This is a presentation I gave at the Frontenders event in Valencia on September 12th.
It reveals the most common performance traits of the mobile web and discusses 7 techniques that enable developers to improve the page load and rendering time of their web sites.
7. Data
„RTT is the length of time it takes for a signal to be sent plus the length of time
it takes for an acknowledgment of that signal to be received“ (Source: Wikipedia)
12. The web is getting heavier
550
740
930
1.120
1.310
1.500
MAY2011
MAY2012
MAY2013
Average download size of a website
kilobytes
Source: httparchive.org/trends.php
84. Combine CSS with preprocessors
compass --watch sass/style.scss:css/style.css
Inline JavaScript and CSS files smaller than 4kb
script ... /script and style ... /style
Use sprite images with similar color palettes
wearekiss.com/spritepad, spritecow.com
General rules
95. Caching
Expires
IfModule mod_expires.c
ExpiresActive on
ExpiresByType text/html „access plus 5 minutes“
ExpiresByType image/jpg „access plus 6 months“
ExpiresByType image/gif „access plus 6 months“
ExpiresByType image/png „access plus 6 months“
ExpiresByType image/jpg „access plus 6 months“
ExpiresByType text/css „access plus 6 months“
ExpiresByType text/javascript „access plus 6 months“
ExpiresByType text/x-javascript „access plus 6 months“
ExpiresByType text/x-icon „access plus 1 year“
/IfModule
Source: The Smashing Mobile Book - Optimizing For Mobile (Page 192)
up
103. Example
script id=“jQuery“/script
var jQfile;
if (‘jqFile’ in window.localStorage) {
jqFile = window.localStorage.getItem(‘jqFile’);
}
else {
jqFile = getJQFile();
window.localStorage.setItem(‘jqFile’, jqFile);
}
document.getElementById(‘jQuery’).text = jqFile;
Source: The Smashing Mobile Book - Optimizing For Mobile (Page 201)
113. Correct CSS/JS order
html
head
// CSS goes here
link rel=“stylehseet“ href=“iCanLoadFirst.css” /
/head
body
...
img src=”iCanDownloadBeforeTheJavaScript.jpg” /
...
script src=”require.js”/script
/body
Doesn‘t
116. Applying styles
var el =
document.getElementById(‘foo’);
el.style.color = ’#fff’;
el.style.backgroundColor = ’#000’;
el.style.borderColor = ’#fe0’;
var el =
document.getElementById(‘foo’);
el.className = ‘bar’;
Bad Good
3
119. Dynamic addition
Bad Good
var ul =
document.getElementsByTagName(ul)[0];
var elems = [
document.createElement(li),
document.createElement(li),
document.createElement(li),
...
];
var ul =
document.getElementsByTagName(ul)[0];
ul.appendChild( fragment.cloneNode() );
var elems = [
document.createElement(li),
document.createElement(li),
document.createElement(li),
...
];
for ( var e = 0; e elems.length; e++ ) {
ul.appendChild( elems[e].cloneNode() );
}
var fragment =
document.createDocumentFragment();
n