11. Work the bandwidth - squeeze the content
gzip/deflate anything that can be compressed
html, css, js, xml, json etc.
(perhaps even favicon.ico)
‘Minify’ js and css
http://www.flickr.com/photos/andih/240584392/
12. Images make up the bulk of bytes transferred
Pick the right format Consider alternatives
jpeg - lossy SVG
png - lossless CSS3
gif - animated Canvas
Icon / pictogram fonts
Don’t forget to optimise them!
http://www.flickr.com/photos/zaprittsky/4520788183/
13. Frameworks and tools can help
Frameworks are adding support for minifying,
merging, versioning and caching
Server plugins and cloud based services to do
similar things are available
http://www.flickr.com/photos/mtneer_man/359116762/
15. Load CSS first
Browsers block rendering until external CSS files
are downloaded (avoids the ‘Flash of Unstyled
Content’)
Avoid inline styles outside the <head>, may
trigger reflow and repaint
16. Split the JavaScript payload
Load only the essential JS in the <head> -
mondernizr, html5shiv etc.
Put the rest at the bottom of the page, or load
asyncronously
(Pagespeed can help find deferrable js)
“Fast Loading Javascript” by @aaronpeters is a really good reference
http://www.slideshare.net/startrender/fast-loading-javascript
17. Load Third Party ‘Widgets’ asynchronously
Script for asynchronous loading:
<script type="text/javascript">
function() {
var js = document.createElement('script');
js.async = true;
js.src = 'myscript.js';
var first = document.getElementsByTagName('script')[0];
first.parentNode.insertBefore(js, first);
})();
</script>
Synchronous scripts can break a site if the script fails to
load or is blocked.
23. How many of these stylesheets get loaded?
<link rel="stylesheet" type="text/css" href="css/base.css" />
<link rel="stylesheet" type="text/css" href="css/flow.css"
media="screen and (max-width: 960px)" />
<link rel="stylesheet" type="text/css" href="css/mobile.css"
media="screen and (max-width: 480px)" />
<link rel="stylesheet" type="text/css" href="css/retina.css"
media="screen and (-webkit-min-device-pixel-ratio: 2)" />
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="css/ie7.css" />
<![endif]-->
24. How many of these stylesheets get loaded?
<link rel="stylesheet" type="text/css" href="css/base.css" />
<link rel="stylesheet" type="text/css" href="css/flow.css"
media="screen and (max-width: 960px)" />
<link rel="stylesheet" type="text/css" href="css/mobile.css"
media="screen and (max-width: 480px)" />
<link rel="stylesheet" type="text/css" href="css/retina.css"
media="screen and (-webkit-min-device-pixel-ratio: 2)" />
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="css/ie7.css" />
<![endif]-->
All of them! (ie7.css only in IE7 though)
25. Font foundries will slow things down
Google
Typekit
(Both have really short cache expiry times. Typekit doesn’t compress eot)
http://www.artzstudio.com/2012/02/web-font-performance-weighing-fontface-options-and-alternatives/
26. Browsers move on - use up to date libraries
Most popular version of
jQuery is over two years old!
(released Feb 2010)
1.3.0 1.3.1 1.3.2 1.4.0 1.4.1 1.4.2 1.4.3 1.4.4 1.5.0 1.5.1 1.5.2 1.6.0 1.6.1 1.6.2 1.6.3 1.6.4 1.7.0 1.7.1
Based on references to jQuery hosted on Google CDN in http://httparchive.org/ Feb 2012 crawl
27. Performance matters, it has a
measurable impact on engagement
Browsers and ISPs can’t fix all our speed
issues
We have the tools and techniques to
make a dramatic difference
Other indications\n - Google&#x2019;s / Yahoo/ Bing experiments\n - Mozilla\n - Shopzilla\n - Kerboodle experience\n\nAlso people&#x2019;s perception of time is faulty... (Stoyan Stefanov, Psychology of Performance)\n - Average person perceives page takes 15% longer to load that reality\n - Will recount it as 35% longer when talking to others\n\n
Developing richer, higher fidelity, usable more pleasant experiences for people\n\nContent growth: 2001 -> 2012 (Souders / HTTP Archive)\nhtml+10%\njs+44%\ncss+19%\nimages +21%\nflash -21%\n \n
\n
Faster JS engines\nBetter network management e.g. SPDY, speculative TCP connections\nGPU acceleration\nNew formats e.g. WebM, WebP\n\n
At low speeds throughput matters but as speeds rise number of requests and latency becomes the limiting factor\nConnection speeds are increasing but connections are shared and contention can be a problem (both within a household and at the exchange)\n\n\n
\n
\n
\n
What about CDN?\nWhat about cheating on TCP slow-start\nLinux 2.6.39 increases initcwnd to 10\n
\n
Images form on average 59% of site content (exc video and audio) \n\nRetina displays complicate things - time for vectors / fonts?\n
Shows the page is loading\n\nPage usable sooner\n\nJavascript issues don&#x2019;t block the rendering\n
\n
Asynchronous loaders like LABjs, yepnope, HEADjs\n
\n
\n
Caveat: What happens if the page fails after the flush?\n
Film strip of debenhams.com loading, frames at 0.5s interval\n\nMain hero/banner image is delayed as it&#x2019;s loaded using background-image: url(...)\n\nWould load sooner if <img> was used instead\n
\n
\n
Major and minor breakpoints in Responsive Design (@byranrieger / @stephanierieger)\n
Number of domains involved for Google\nBoth have very short cache-expiry time for fonts\nTypekit doesn&#x2019;t compress EOT fronts\n
Do you even need jQuery - zepto.js and other js frameworks (microjs.com)\n