Speed is Essential for aGreat Web Experience@andydavies#oredevNov 2012                           http://www.flickr.com/phot...
Performance isn’t always a priority                           http://www.flickr.com/photos/randomidea/247994072
“Has it loaded yet?”                       http://www.flickr.com/photos/kindofindie/4099768084
Our perception of response time  Instant       Seamless                                                           Yawn!100...
“50% more concentration when using       badly performing web sites”                                                    Fo...
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...                              http://www.flickr.com/photos/wwarby/7109538317
W3C Navigation Timing API                                    navigaAonStart,                                        redire...
Navigation Timing Data in Google Analytics                      Text           Other Real User Monitoring tools available
Example of Real Users Experience                         27%Visitors (%)                               13%                ...
Example of Real Users Experience                         27%                                                              ...
Synthetic Monitoring                    3Response Time (s)                    2                    1                    0 ...
Examining the detail...                          http://www.flickr.com/photos/arnybo/2679622216
Browser Plugins         YSlow    PageSpeed
webpagetest.org
Waterfall for bbc.co.uk/news
mobitest.akamai.com                Alternatively, could use Chrome / Safari                remote debugging to generate HAR
Bigger, Faster Servers?                          http://www.flickr.com/photos/getbutterfly/6317955134
Over 80% of page load time is on front-end                                                                   Backend news....
But don’t forget to fix slow server responses    4 seconds!
Bandwidth (often) isn’t the bottleneck2.01.51.00.5  0s                   5s                                      10s      ...
“More Bandwidth Doesn’t Matter (much)”                                                                                    ...
Visualising TCP                  Carlos Bueno (@archivd) https://vimeo.com/14439742
Impact of Latency                     4                     3Page Load Time (s)                     2                     ...
Minimum round trips to download a file                                                             (TCP Segments)285kB214kB...
Latency is Our Biggest Enemy  “In 2012, the average worldwide RTT to Google is still  ~100ms, and ~50-60ms within the US.”...
3G Radio Resource Control                     Idle for 12s           IDLE                           CELL_FACH             ...
Going Faster…                http://www.flickr.com/photos/mikebaird/2464769129/
Speeding Things Up - Some Basics     ★   Compress     ★   Minify     ★   Reduce Requests     ★   Cache     ★   HTTP Keep-A...
What’s the web made of?                                                         Images                                    ...
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                 FontsBitmaps still a challenge but interesting experiments...
It’s no longer a desktop world                             http://www.flickr.com/photos/adactio/6960610178
Go “Mobile First” for Responsive Designs                                  http://seesparkbox.com
Use “Right-sized” Images                                            http://www.flickr.com/photos/emzee/139794246Standards s...
Minimise browser blocking...                               http://www.flickr.com/photos/barteko/6128499314
Parallel Downloads                                    news.bbcimg.co.uk                                    static.bbc.co.u...
Get the <head> straight<!doctype html><html><head>                                                          CSS before JS ...
Load remaining Javascript late as possible           .           .           .        <script src="restofscript.js"></scri...
The Script Tag        <script src=″…″></script>    Until the script has executed, the rendering of            all elements...
“Virgin Media Broadband ISP UsersAffected 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...
Lots of factors to think about...                             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
Measure Impact on Business Goals                           http://www.flickr.com/photos/safari_vacation/5961260280
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 (oredev)

3,376

Published on

Slides from my talk on why speed matters, ways to measure it and how page load times can be improved. Talk was given at oredev in Sweden

Published in: Technology

Speed is Essential for a Great Web Experience (oredev)

  1. 1. Speed is Essential for aGreat Web Experience@andydavies#oredevNov 2012 http://www.flickr.com/photos/dex1138/7879381800
  2. 2. Performance isn’t always a priority http://www.flickr.com/photos/randomidea/247994072
  3. 3. “Has it loaded yet?” http://www.flickr.com/photos/kindofindie/4099768084
  4. 4. Our perception of response time Instant Seamless Yawn!100ms 1s 10s 3s - Recommended 6.5s - Alexa 2000 Load Time Fall 2012 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... http://www.flickr.com/photos/wwarby/7109538317
  11. 11. W3C Navigation Timing API navigaAonStart, redirectStart, redirectEnd, fetchStart, domainLookupStart, domainLookupEnd, connectStart, (secureConnecAonStart), connectEnd, requestStart, responseStart, responseEnd, Prompt, App, for, redirect, DNS, TCP, Request, Response, Processing, onLoad, cache, unload, unload, loadEventEnd, loadEventStart, domComplete, domContentLoaded, domInteracAve, domLoading, unloadEnd, unloadStart, http://www.w3.org/TR/navigation-timing/
  12. 12. Navigation Timing Data in Google Analytics Text Other Real User Monitoring tools available
  13. 13. Example of Real Users Experience 27%Visitors (%) 13% 8% 8% 6% 6% 3% 3% 2% 1% 1 2 3 4 5 6 7 8 9 10 Load Time (s)
  14. 14. Example of Real Users Experience 27% 24%Visitors (%) 13% 8% 8% 6% 6% 3% 3% 2% 1% 1 2 3 4 5 6 7 8 9 10 > 10 Load Time (s)
  15. 15. Synthetic Monitoring 3Response Time (s) 2 1 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 16 27 28 29 30 September 2012
  16. 16. Examining the detail... http://www.flickr.com/photos/arnybo/2679622216
  17. 17. Browser Plugins YSlow PageSpeed
  18. 18. webpagetest.org
  19. 19. Waterfall for bbc.co.uk/news
  20. 20. mobitest.akamai.com Alternatively, could use Chrome / Safari remote debugging to generate HAR
  21. 21. Bigger, Faster Servers? http://www.flickr.com/photos/getbutterfly/6317955134
  22. 22. Over 80% 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 2 3 4 5 Measured via residential ADSL line using Google Chrome
  23. 23. But don’t forget to fix slow server responses 4 seconds!
  24. 24. 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)
  25. 25. “More Bandwidth Doesn’t Matter (much)” Mike Belshe 3.11sPage Load Time 1.95s 1.63s 1.50s 1.44s 1.41s 1.39s 1.38s 1.37s 1.36s 1 2 3 4 5 6 7 8 9 10 Bandwidth (Mbps)
  26. 26. Visualising TCP Carlos Bueno (@archivd) https://vimeo.com/14439742
  27. 27. Impact of Latency 4 3Page Load Time (s) 2 1 0 20 40 60 80 100 120 140 160 180 200 220 240 Round Trip Time (ms)
  28. 28. 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
  29. 29. Latency is Our Biggest Enemy “In 2012, the average worldwide RTT to Google is still ~100ms, and ~50-60ms within the US.” “we are looking at 100-1000ms RTT range on mobile” Ilya Grigorik http://www.igvita.com/2012/07/19/latency-the-new-web-performance-bottleneck/
  30. 30. 3G Radio Resource Control Idle for 12s IDLE CELL_FACH 1s delay 1-2s delay! CELL_DCH Idle for 5s Exact timings vary and depend on carrier NOT device http://web.eecs.umich.edu/~fengqian/paper/3g_imc10.pdf
  31. 31. Going Faster… http://www.flickr.com/photos/mikebaird/2464769129/
  32. 32. Speeding Things Up - Some Basics ★ Compress ★ Minify ★ Reduce Requests ★ Cache ★ HTTP Keep-Alive ★ Use a CDN?
  33. 33. What’s the web made of? Images Scripts Stylesheets HTML Flash Other Composition of ‘average’ web page via httparchive.org
  34. 34. Bitmapped Images JPEG PNG GIF Optimise, Optimise, Optimise! (jpegmini, pngmini, Smush.it, ImageOptim, Gifsicle etc.)
  35. 35. New Devices, New Challenges... 2 x Resolution = 4 x Pixels! http://www.flickr.com/photos/roopaw/6985954465
  36. 36. Some Alternatives CSS SVG FontsBitmaps still a challenge but interesting experiments around
  37. 37. It’s no longer a desktop world http://www.flickr.com/photos/adactio/6960610178
  38. 38. Go “Mobile First” for Responsive Designs http://seesparkbox.com
  39. 39. Use “Right-sized” Images http://www.flickr.com/photos/emzee/139794246Standards support (picture? srcset?) is coming but unclear when!Meanwhile services such as sencha.io, resrc.it and JS libraries -picturefill.js, foresight.js can help.
  40. 40. Minimise browser blocking... http://www.flickr.com/photos/barteko/6128499314
  41. 41. Parallel Downloads news.bbcimg.co.uk static.bbc.co.uk Domain Sharding increases number of parallel downloads but… …more connections may not be a good idea on mobile …may also interfere with multiplexing in protocols like SPDY
  42. 42. 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> * Depends on size and whether major / minor breakpoints used
  43. 43. Load remaining Javascript late as possible . . . <script src="restofscript.js"></script> </body> </html> One file or many? (Depends on size)Script loaders can help but scripts aren’t discoverable by pre-fetcher
  44. 44. The Script Tag <script src=″…″></script> Until the script has executed, the rendering of all elements below is blocked!
  45. 45. “Virgin Media Broadband ISP UsersAffected by Website Routing Woes” ISP Review, May 26, 2012Customer jcmm33 said:“Same issue here as well, been like this all day. Sites likeautotrader.co.uk don’t appear to be accessible, others likethe telegraph.co.uk are waiting on other components todownload (content from sites like cg-global.maxymiser.com,pixel.quantserve.com).” http://www.ispreview.co.uk/index.php/2012/05/uk-virgin-media-broadband-isp-users-affected-by-website-routing-woes.html
  46. 46. Impact on The Telegraph…Same issue affected many other sites http://bit.ly/Ncy7Rd
  47. 47. 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> Or use a script loader - labjs, requirejs, yepnope etc.
  48. 48. Lots of factors to think about... http://www.flickr.com/photos/corneveaux/3248566797
  49. 49. Don’t have to do it all by hand http://www.flickr.com/photos/simeon_barkas/2557059247
  50. 50. Performance isn’t just for Christmas Measure Optimise Analyse
  51. 51. Measure Impact on Business Goals http://www.flickr.com/photos/safari_vacation/5961260280
  52. 52. http://www.flickr.com/photos/jurvetson/6212582593
  53. 53. @andydavies andy@asteno.comhttp://www.slideshare.net/andydavies http://www.flickr.com/photos/auntiep/5024494612
  54. 54. 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.

×