Speed Matters

4,218 views

Published on

As we build richer, more complex web applications it’s easy to forget that speed is the cornerstone of user experience. Bing have found that a 2 second delay reduces revenue by 4%. Google know that half a second delay drops traffic by 20%. AOL have shown that users with a speedy experience stay 50% longer than users who have to wait. The evidence is clear – speed matters.

What’s more, most latency comes from the front-end, not the backend so the fixes are not specific to a particular platform. This session will examine a range of techniques from DOM & CSS tricks to web server and HTTP tweaks that can help improve front-end performance by 25-50%.

Whether you’re looking to save bandwidth, increase your conversion rate, retain visitors, save time or just make your users happy – the speed of your site matters.

Published in: Technology
1 Comment
10 Likes
Statistics
Notes
No Downloads
Views
Total views
4,218
On SlideShare
0
From Embeds
0
Number of Embeds
287
Actions
Shares
0
Downloads
0
Comments
1
Likes
10
Embeds 0
No embeds

No notes for slide

Speed Matters

  1. 1. Speed Matters Mark Stanton @MarkStanto
  2. 2. Does Speed Matter? • 2 sec delay reduces revenue by 4% • 1/2 sec drops traffic by 20% • fastest 10% of users stay 50% longer than the slowest 10% • 10ms = one man-year per day
  3. 3. Terminology • Empty cache / Primed cache • Refresh / Revisit • Page ready / Page complete • Throughput / Latency
  4. 4. HTTP in 60 seconds • Initial Request GET /assets/logo.png HTTP/1.1 Host: wds-demo.gruden.int User-Agent: Mozilla/5.0... HTTP/1.x 200 OK Server: Apache/2.2.11... Last-Modified: Wed, 09 Sep 2009 17:36:00 GMT Content-Length: 4067 Content-Type: image/png • Subsequent Requests GET /assets/logo.png HTTP/1.1 Host: wds-demo.gruden.int User-Agent: Mozilla/5.0... If-Modified-Since: Wed, 09 Sep 2009 17:36:00 GMT HTTP/1.x 304 Not Modified Server: Apache/1.3.41 ...
  5. 5. Case Study
  6. 6. IE6 21.8s
  7. 7. Firefox3 18.6s
  8. 8. Image Optimisation 755KB Reduction!
  9. 9. Image Optimisation 24 bit PNG 512KB Reduction!
  10. 10. Combine JS • Before: • After: 7 Fewer Requests!
  11. 11. Combine CSS • Before: • After: 6 Fewer Requests!
  12. 12. JS to Bottom Page Ready 1 sec Faster!
  13. 13. Cache Control • ETags • Expires
  14. 14. Cache Control • Etag: "1c014-287d-f824c1c0" • If-None-Match: "1c014-287d-f824c1c0" • 304 Not Modified
  15. 15. Cache Control • Expires: Wed, 08 Oct 2010 02:03:51 GMT • 304 Not Modified
  16. 16. Cache Control • Before: <VirtualHost *:80> ServerName wds-demo.gruden.int DocumentRoot ... ErrorLog /private/var/log/apache2/wds-demo-error_log CustomLog /private/var/log/apache2/wds-demo-access_log common </VirtualHost> • After: <VirtualHost *:80> ServerName wds-demo.gruden.int DocumentRoot ... ErrorLog /private/var/log/apache2/wds-demo-error_log CustomLog /private/var/log/apache2/wds-demo-access_log common ExpiresActive on ExpiresDefault "access plus 1 year" FileETag none </VirtualHost> 90% Fewer 304s!
  17. 17. Cache Control • Cache-Control: "max-age=0, no-cache, no- store, must-revalidate" • Pragma: "no-cache" • Expires: "Wed, 11 Jan 1984 05:00:00 GMT" Doh!
  18. 18. Minify 24KB Reduction!
  19. 19. Minify
  20. 20. GZip • Before: <VirtualHost *:80> ServerName wds-demo.gruden.int DocumentRoot ... ... ExpiresActive on ExpiresDefault "access plus 1 year" FileETag none </VirtualHost> • After: <VirtualHost *:80> ServerName wds-demo.gruden.int DocumentRoot ... AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css application/javascript ... ExpiresActive on ExpiresDefault "access plus 1 year" 96KB FileETag none </VirtualHost> Reduction!
  21. 21. Split Components Across Domains 2.5 sec Faster in IE6!
  22. 22. Sprites 139KB Reduction! 35 Fewer Requests!
  23. 23. Restructure Content
  24. 24. Restructure Content • Logo into HTML • Lazy load rotators
  25. 25. Restructure Content Page Ready 5 sec Faster!
  26. 26. CSS Selectors • Before: • After: 100 ms Faster!
  27. 27. Huh? 100 ms Faster!
  28. 28. Summary • Optimised Images • Minify • Combined JS • GZip • Combined CSS • Split Domains • JS to the Bottom • Sprites • Cache Control: Expires • Restructure Content
  29. 29. IE6 - Original 21.8s
  30. 30. IE6 - Final 6.0s
  31. 31. Firefox3 - Original 18.6s
  32. 32. Firefox3 - Final 4.1s
  33. 33. Tools • Firefox Plugins • Firebug • YSlow • Page Speed • Cache Status • LiveHTTPHeaders • Charles Proxy
  34. 34. Tools • http://compressorrater.thruhere.net/ • http://developer.yahoo.com/yslow/smushit/ • http://spriteme.org/ • http://spritegen.website-performance.org/
  35. 35. Tools • http://spritegen.website-performance.org/ • http://spriteme.org/ • http://developer.yahoo.com/yslow/smushit/ • http://compressorrater.thruhere.net/
  36. 36. Hat Tip • http://stevesouders.com/ • http://developer.yahoo.com/performance/
  37. 37. Conclusion • Look for low hanging fruit • Make incremental improvements • Incorporate into your process
  38. 38. Conclusion • Small upfront investment - continuous benefit • Reduced bandwidth • Reduced load times • Everyone lives happily ever after
  39. 39. Thanks • http://delicious.com/markstanton/speed-talk • @MarkStanto
  40. 40. Pop Quiz
  41. 41. Pop Quiz
  42. 42. Pop Quiz

×