Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Speed Matters
   Mark Stanton
    @MarkStanto
Does Speed Matter?
   •   2 sec delay reduces revenue by 4%

   •   1/2 sec drops traffic by 20%

   •   fastest 10% of use...
Terminology

•   Empty cache / Primed cache
•   Refresh / Revisit
•   Page ready / Page complete
•   Throughput / Latency
HTTP in 60 seconds
•   Initial Request
                      GET /assets/logo.png HTTP/1.1
                      Host: wds...
Case Study
IE6




      21.8s
Firefox3




      18.6s
Image Optimisation




                  755KB
                 Reduction!
Image Optimisation


24 bit PNG




                  512KB
                 Reduction!
Combine JS
•   Before:




•   After:



                           7 Fewer
                           Requests!
Combine CSS
•   Before:




•   After:



                            6 Fewer
                            Requests!
JS to Bottom




                Page Ready
               1 sec Faster!
Cache Control


•   ETags
•   Expires
Cache Control
•   Etag: "1c014-287d-f824c1c0"



•   If-None-Match: "1c014-287d-f824c1c0"



•   304 Not Modified
Cache Control


•   Expires: Wed, 08 Oct 2010 02:03:51 GMT
•   304 Not Modified
Cache Control
•   Before:
    <VirtualHost *:80>
           ServerName wds-demo.gruden.int
           DocumentRoot ...

  ...
Cache Control

•   Cache-Control: "max-age=0, no-cache, no-
    store, must-revalidate"
•   Pragma: "no-cache"
•   Expires...
Minify




           24KB
         Reduction!
Minify
GZip
•   Before:
    <VirtualHost *:80>
           ServerName wds-demo.gruden.int
           DocumentRoot ...

           ...
Split Components
 Across Domains




                  2.5 sec
               Faster in IE6!
Sprites
           139KB
          Reduction!




          35 Fewer
          Requests!
Restructure Content
Restructure Content


•   Logo into HTML
•   Lazy load rotators
Restructure Content




                  Page Ready
                 5 sec Faster!
CSS Selectors
•   Before:




•   After:



                             100 ms
                             Faster!
Huh?


100 ms
Faster!
Summary
•   Optimised Images         •   Minify

•   Combined JS              •   GZip

•   Combined CSS             •   S...
IE6 - Original




          21.8s
IE6 - Final




         6.0s
Firefox3 - Original




            18.6s
Firefox3 - Final




           4.1s
Tools
•   Firefox Plugins
    •   Firebug

    •   YSlow

    •   Page Speed

    •   Cache Status

    •   LiveHTTPHeader...
Tools

•   http://compressorrater.thruhere.net/
•   http://developer.yahoo.com/yslow/smushit/
•   http://spriteme.org/
•  ...
Tools

•   http://spritegen.website-performance.org/
•   http://spriteme.org/
•   http://developer.yahoo.com/yslow/smushit...
Hat Tip
•   http://stevesouders.com/
•   http://developer.yahoo.com/performance/
Conclusion


•   Look for low hanging fruit
•   Make incremental improvements
•   Incorporate into your process
Conclusion

•   Small upfront investment - continuous benefit
•   Reduced bandwidth
•   Reduced load times
•   Everyone liv...
Thanks


•   http://delicious.com/markstanton/speed-talk
•   @MarkStanto
Pop Quiz
Pop Quiz
Pop Quiz
Upcoming SlideShare
Loading in …5
×

Speed Matters

4,361 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

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

×