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.

  1. Reduce requests

http://www.websiteoptimization.com/secrets/metrics/10-21-http-request.html

🔎 TCP Segmentation

  1. Reduce page weight

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

  1. Caching

<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()

  1. Loading assets…

CSS at the top Within the <head> element

JavaScript at the bottom Just before closing </body> tag

🔗 http://davidwalsh.name/html5-async

  1. Use a CDN

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