Dev.Ocean #3: Web Performance Improvements In One Hour

My second speaking gig at Dev.Ocean #3. A slight evolution of my Points Brighton talk.

Transcript

1. Ben Everard Web performance improvements you can make in one hour §
2. J’adore le web
3. Pre-talk shout-outs... Andy Davies http://andydavies.me Steve Souders http://www.stevesouders.com/
4. Why is performance so important?
5. “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
6. “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
7. A real example...
8. Mobile Visit Exmoor site http://m.visit-exmoor.co.uk At Exmoor speeds... Weighs 2MB • Destroyed my phone battery • Entire site loaded in 7.2 minutes • 30 seconds before anything is visible
9. Measuring...
10. Your toolbox... Google Page Speed Yahoo! YSlow Others... Chrome Dev Tools Firebug WebPagetest Slowy App et al...
11. Lets get started...
12. 1) Reduce requests
14. http://www.websiteoptimization.com/secrets/metrics/10-21-http-request.html
15. TCP Segmentation
16. 2) Reduce page weight
17. 75% of page weight in these two images Mobile Visit Exmoor site http://m.visit-exmoor.co.uk
18. Image optimisation
19. Minify assets
20. GZIP compression
21. <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
23. 3) Caching
24. <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
25. Cache busting!
26. http://domain.com/screen.css?v=2
27. 4) Loading assets
28. CSS at the top Within the <head> element
29. JavaScript at the bottom Just before closing </body> tag
30. http://davidwalsh.name/html5-async
31. 5) Use a CDN
32. maxcdn.com
33. 1) Reduce requests 2) Reduce page weight 3) Be explicit with caching 4) Loading assets 5) Use a CDN What have we learnt?
34. 1) Find and fix issues on your own site 2) Tell your friends 3) Drink beer What next?
35. Cheers! Ben Everard ilmv beneverard.co.uk hello@beneverard.co.uk ✉ 
36. Questions?