A presentation at Shropgeek Rebellion in in Shrewsbury, UK by Ben Everard
Ben Everard § Web performance improvements you can make in one hour
Who’s this guy?
Pre-talk shout-outs… Andy Davies http://andydavies.me Steve Souders http://www.stevesouders.com/
Why is performance so important?
“If an e-commerce site is making $100,000 per day, a 1 second page delay could potentially cost $2.5 million in lost sales every year.” http://blog.kissmetrics.com/loading-time/?wide=1
“Amazon found that it increased revenue by 1% for every 100 milliseconds of improvement” http://sites.google.com/site/glinden/Home/StanfordDataMining.2006-11-28.ppt
Measuring
Your toolbox… Others… Yahoo! YSlow Chrome Dev Tools Firebug WebPagetest Slowy App et al… Google Page Speed
Lets. Get. Started.
http://www.websiteoptimization.com/secrets/metrics/10-21-http-request.html
🔎 TCP Segmentation
Mobile Visit Exmoor site http://m.visit-exmoor.co.uk
Mobile Visit Exmoor site http://m.visit-exmoor.co.uk Weighs 2MB
Mobile Visit Exmoor site http://m.visit-exmoor.co.uk Weighs 2MB At Exmoor speeds…
Mobile Visit Exmoor site http://m.visit-exmoor.co.uk Weighs 2MB At Exmoor speeds… ● 30 seconds before anything is visible
Mobile Visit Exmoor site http://m.visit-exmoor.co.uk Weighs 2MB At Exmoor speeds… ● 30 seconds before anything is visible ● Entire site loaded in 7.2 minutes
Mobile Visit Exmoor site http://m.visit-exmoor.co.uk Weighs 2MB At Exmoor speeds… ● 30 seconds before anything is visible ● Entire site loaded in 7.2 minutes ● Destroyed my phone battery
75% of page weight in these two images
Image optimisation
Minify assets
GZIP compression
<ifmodule mod_deflate.c> ! AddOutputFilterByType DEFLATE ! ! text/text ! ! text/html ! ! text/plain ! ! text/xml ! ! text/css ! ! application/x-javascript ! ! application/javascript </ifmodule> http://git.io/XTDjng
<IfModule mod_expires.c> ! ExpiresActive On ! ExpiresByType text/css “access plus 1 year” ! ExpiresByType application/javascript “access plus 1 year” ! ExpiresByType text/javascript “access plus 1 year” ! ExpiresByType text/html “access plus 1 hour” ! ExpiresByType text/richtext “access plus 1 hour” ! ExpiresByType text/plain “access plus 1 hour” ! ExpiresByType text/xml “access plus 1 hour” ! ExpiresByType image/gif “access plus 1 year” ! ExpiresByType image/jpeg “access plus 1 year” ! ExpiresByType image/png “access plus 1 year” ! ExpiresByType image/x-icon “access plus 1 year” </IfModule> http://git.io/XTDjng
Cache busting!
http://domain.com/screen.css?v=2
http://domain.com/screen.css?v=2
🔎 filemtime()
CSS at the top Within the <head> element
JavaScript at the bottom Just before closing </body> tag
🔗 http://davidwalsh.name/html5-async
maxcdn.com
What have we learnt? 1) Reduce requests 2) Reduce page weight 3) Be explicit with caching 4) Loading assets 5) Use a CDN
Thank you Ben Everard 🔗 ✉ ilmv beneverard.co.uk hello@beneverard.co.uk
for free. You
can too.