Speed is Essential for aGreat Web Experience@andydavies#CanvasConfSep 2012                           http://www.flickr.com/...
But sometimes other concerns take priority...                            http://www.flickr.com/photos/randomidea/247994072
“Are we there yet?”                      http://www.flickr.com/photos/sharynmorrow/643126727
Our perception of response time  Instant       Seamless                                                           Yawn!100...
“50% more concentration when using       badly performing web sites”                                               Fovianc...
Effect of delay on abandonment rate...      Abandonment rate over 200+ sites / 177+ million page views over 2 weeks - http...
Bing did some experiments     +1s                            $/                             - 2.8%                        ...
Wallmart made some improvements     -1s                      +2%
Shopzilla cut page load time by 5 seconds!  +12%          +25%                                -50%   $$$                  ...
Measuring page load time...
Measure Real Users’ Experience                         27%                                                     24% of visi...
Measuring Real Users - Google AnalyticsRelies on Navigation Timing API, can add extra timing calls to page
Measuring Real Users - LogNormal
Measuring Real Users - Torbit Insight
Measuring Real Users - New Relic
webpagetest.org
Waterfall for bbc.co.uk/news
mobitest.akamai.com
Bigger, Faster Servers?                          http://www.flickr.com/photos/br1dotcom/4297736794
80% plus of page load time is on front-end                                                                 Backend news.bb...
Fix slow server responses first    4 seconds!
Bandwidth (often) isn’t the bottleneck2.01.51.00.5  0s                   5s                                      10s      ...
Minimum round trips to download a file                                                             (TCP Segments)285kB214kB...
Going Faster…                http://www.flickr.com/photos/mikebaird/2464769129/
Get the <head> straight<!doctype html><html><head>                                                                 CSS bef...
Load remaining Javascript late as possible        .        .        .      <script src="restofscript.js"></script>    </bo...
Squash text based content - gzip / minify                              http://www.flickr.com/photos/evdg/298415813
Images are 64% of an ‘average’ web page                        http://www.flickr.com/photos/zaprittsky/4520788183/
Bitmapped Images    JPEG                            PNG                           GIF       Optimise, Optimise, Optimise! ...
New Devices, New Challenges...                2 x Resolution = 4 x Pixels!                           http://www.flickr.com/...
Some Alternatives     CSS               SVG                Fonts Watch SVG - may not always be smaller than bitmap!
Re-use TCP Connections via HTTP Keep-Alive                               Orange segments                             are T...
news.bbcimg.co.uk                        static.bbc.co.ukIncrease number of parallel downloads
Sometimes... The Waterfall of Doom!                  2 seconds! (nearly)
Reduce number of HTTP requests
Cache resources that don’t change ‘often’ forever(use versions to replace)                                http://www.flickr...
Redirects - necessary but waste time…                                  Why 2 redirects?   Expensive over mobile networks d...
The Perils of Third Party Javascript...     “Virgin Media Broadband ISP Users     Affected by Website Routing Woes”       ...
Impact on The Telegraph…Same issue affected many other sites   http://bit.ly/Ncy7Rd
Load Third Party scripts asynchronously <script type="text/javascript">   function() {     var js = document.createElement...
Argh... My brain hurts!                     http://www.flickr.com/photos/corneveaux/3248566797
Don’t have to do it all by hand            http://www.flickr.com/photos/simeon_barkas/2557059247
Performance isn’t just for Christmas                     Measure          Optimise             Analyse
http://www.flickr.com/photos/jurvetson/6212582593
@andydavies         andy@asteno.comhttp://www.slideshare.net/andydavies                       http://www.flickr.com/photos/...
CreditsAll photographs copyright original owners on flickr.comFollowing pictograms courtesy of The Noun Project
Upcoming SlideShare
Loading in...5
×

Speed is Essential for a Great Web Experience (Canvas Conf Version)

45,961

Published on

Slides from my Web Performance talk at Canvas Conf, Birmingham - 7 Sep 2012

Published in: Technology, Design
6 Comments
23 Likes
Statistics
Notes
No Downloads
Views
Total Views
45,961
On Slideshare
0
From Embeds
0
Number of Embeds
18
Actions
Shares
0
Downloads
168
Comments
6
Likes
23
Embeds 0
No embeds

No notes for slide

Speed is Essential for a Great Web Experience (Canvas Conf Version)

  1. 1. Speed is Essential for aGreat Web Experience@andydavies#CanvasConfSep 2012 http://www.flickr.com/photos/barkaway/342359810
  2. 2. But sometimes other concerns take priority... http://www.flickr.com/photos/randomidea/247994072
  3. 3. “Are we there yet?” http://www.flickr.com/photos/sharynmorrow/643126727
  4. 4. Our perception of response time Instant Seamless Yawn!100ms 1s 10s 3s - Recommended 7s - Fortune 500 Load Time Average (2010) Response Time in Man-computer Conversational Transactions Robert B. Miller, 1968
  5. 5. “50% more concentration when using badly performing web sites” Foviance http://www.flickr.com/photos/yourdon/3366991042
  6. 6. Effect of delay on abandonment rate... Abandonment rate over 200+ sites / 177+ million page views over 2 weeks - http://www.measureworks.nl / Gomez
  7. 7. Bing did some experiments +1s $/ - 2.8% +
  8. 8. Wallmart made some improvements -1s +2%
  9. 9. Shopzilla cut page load time by 5 seconds! +12% +25% -50% $$$ http://velocityconf.com/velocity2009/public/schedule/detail/7709
  10. 10. Measuring page load time...
  11. 11. Measure Real Users’ Experience 27% 24% of visitors 24% waited over 10sVisitors (%) 13% 8% 8% 6% 6% 3% 3% 2% 1% 1 2 3 4 5 6 7 8 9 10 > 10 Load Time (s)
  12. 12. Measuring Real Users - Google AnalyticsRelies on Navigation Timing API, can add extra timing calls to page
  13. 13. Measuring Real Users - LogNormal
  14. 14. Measuring Real Users - Torbit Insight
  15. 15. Measuring Real Users - New Relic
  16. 16. webpagetest.org
  17. 17. Waterfall for bbc.co.uk/news
  18. 18. mobitest.akamai.com
  19. 19. Bigger, Faster Servers? http://www.flickr.com/photos/br1dotcom/4297736794
  20. 20. 80% plus of page load time is on front-end Backend news.bbc.co.uk Frontend ebay.co.ukdebenhams.co.uk direct.gov.uk amazon.co.uk mumsnet.com guardian.co.uk 0 1.25 2.5 3.75 5 Measured on residential ADSL line using Chrome 19
  21. 21. Fix slow server responses first 4 seconds!
  22. 22. Bandwidth (often) isn’t the bottleneck2.01.51.00.5 0s 5s 10s news.bbc.co.uk tested via webpagetest.org throttled at 1.5Mbps (bursts over 1.5Mbps are artefact of testing)
  23. 23. Minimum round trips to download a file (TCP Segments)285kB214kB143kB 71kB Size 1 2 3 4 5 6 7 8 9 10 11 Round Trips TCP and the Lower Bound of Web Performance John Rauser
  24. 24. Going Faster… http://www.flickr.com/photos/mikebaird/2464769129/
  25. 25. Get the <head> straight<!doctype html><html><head> CSS before JS <meta charset="utf-8"> Ideally one file* <title>This is my title<title> <link rel="stylesheet" href="styles.css" type="text/css" /> <script src="script.js"></script> . . Only JS needed . during page load</head> * Bryan and Stephanie Rieger’s major and minor breakpoint approach requires multiple CSS files
  26. 26. Load remaining Javascript late as possible . . . <script src="restofscript.js"></script> </body> </html> One file or many? (Depends on size) Could you defer some JS until after onload?
  27. 27. Squash text based content - gzip / minify http://www.flickr.com/photos/evdg/298415813
  28. 28. Images are 64% of an ‘average’ web page http://www.flickr.com/photos/zaprittsky/4520788183/
  29. 29. Bitmapped Images JPEG PNG GIF Optimise, Optimise, Optimise! (jpegmini, pngmini, Smush.it, ImageOptim, Gifsicle etc.)
  30. 30. New Devices, New Challenges... 2 x Resolution = 4 x Pixels! http://www.flickr.com/photos/roopaw/6985954465
  31. 31. Some Alternatives CSS SVG Fonts Watch SVG - may not always be smaller than bitmap!
  32. 32. Re-use TCP Connections via HTTP Keep-Alive Orange segments are TCP connections being (re-) opened
  33. 33. news.bbcimg.co.uk static.bbc.co.ukIncrease number of parallel downloads
  34. 34. Sometimes... The Waterfall of Doom! 2 seconds! (nearly)
  35. 35. Reduce number of HTTP requests
  36. 36. Cache resources that don’t change ‘often’ forever(use versions to replace) http://www.flickr.com/photos/sterlingely/64228609
  37. 37. Redirects - necessary but waste time… Why 2 redirects? Expensive over mobile networks due to latency
  38. 38. The Perils of Third Party Javascript... “Virgin Media Broadband ISP Users Affected by Website Routing Woes” ISP Review, May 26, 2012 cg-global.maxymiser.com unreachable
  39. 39. Impact on The Telegraph…Same issue affected many other sites http://bit.ly/Ncy7Rd
  40. 40. Load Third Party scripts asynchronously <script type="text/javascript"> function() { var js = document.createElement(script); js.async = true; js.src = myscript.js; var e = document.getElementsByTagName(script)[0]; e.parentNode.insertBefore(js, first); })(); </script> async attribute may be option but not supported by IE & Opera
  41. 41. Argh... My brain hurts! http://www.flickr.com/photos/corneveaux/3248566797
  42. 42. Don’t have to do it all by hand http://www.flickr.com/photos/simeon_barkas/2557059247
  43. 43. Performance isn’t just for Christmas Measure Optimise Analyse
  44. 44. http://www.flickr.com/photos/jurvetson/6212582593
  45. 45. @andydavies andy@asteno.comhttp://www.slideshare.net/andydavies http://www.flickr.com/photos/auntiep/5024494612
  46. 46. CreditsAll photographs copyright original owners on flickr.comFollowing pictograms courtesy of The Noun Project
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×