Speed is Essential for a Great Web Experience (Digicure - Copenhagen)

4,305 views

Published on

Slides from my talk at Digicure's performance seminar in Copenhagen.

Published in: Technology

Speed is Essential for a Great Web Experience (Digicure - Copenhagen)

  1. Speed is Essential for a Great Web Experience @andydavies Digicure Oct 2012 http://www.flickr.com/photos/ahockley/3576838608Wednesday, 24 October 2012
  2. Performance isn’t always a priority http://www.flickr.com/photos/randomidea/247994072Wednesday, 24 October 2012
  3. “Has it loaded yet?” http://www.flickr.com/photos/kindofindie/4099768084Wednesday, 24 October 2012
  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, 1968Wednesday, 24 October 2012
  5. “50% more concentration when using badly performing web sites” Foviance http://www.flickr.com/photos/yourdon/3366991042Wednesday, 24 October 2012
  6. Effect of delay on abandonment rate... Abandonment rate over 200+ sites / 177+ million page views over 2 weeks - http://www.measureworks.nl / GomezWednesday, 24 October 2012
  7. Bing did some experiments +1s $/ - 2.8% +Wednesday, 24 October 2012
  8. Wallmart made some improvements -1s +2%Wednesday, 24 October 2012
  9. Shopzilla cut page load time by 5 seconds! +12% +25% -50% $$$ http://velocityconf.com/velocity2009/public/schedule/detail/7709Wednesday, 24 October 2012
  10. Measuring page load time... http://www.flickr.com/photos/wwarby/7109538317Wednesday, 24 October 2012
  11. Synthetic Monitoring 4 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 2012Wednesday, 24 October 2012
  12. But these are not our visitors… http://www.flickr.com/photos/br1dotcom/4297736794Wednesday, 24 October 2012
  13. These are our visitors http://www.flickr.com/photos/yourdon/2681687374Wednesday, 24 October 2012
  14. Measure 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)Wednesday, 24 October 2012
  15. Measure 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)Wednesday, 24 October 2012
  16. Measuring Real Users - Google Analytics Relies on Navigation Timing API, can add extra timing calls to pageWednesday, 24 October 2012
  17. Looking Deeper http://www.flickr.com/photos/ohhector/3149051855Wednesday, 24 October 2012
  18. webpagetest.orgWednesday, 24 October 2012
  19. Waterfall for bbc.co.uk/newsWednesday, 24 October 2012
  20. mobitest.akamai.comWednesday, 24 October 2012
  21. Bigger, Faster Servers? http://www.flickr.com/photos/getbutterfly/6317955134Wednesday, 24 October 2012
  22. 80% plus of page load time is on front-end Backend news.bbc.co.uk Frontend ebay.co.uk debenhams.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 19Wednesday, 24 October 2012
  23. Fix slow server responses first 4 seconds!Wednesday, 24 October 2012
  24. Bandwidth (often) isn’t the bottleneck 2.0 1.5 1.0 0.5 0s 5s 10s news.bbc.co.uk tested via webpagetest.org throttled at 1.5Mbps (bursts over 1.5Mbps are artefact of testing)Wednesday, 24 October 2012
  25. “More Bandwidth Doesn’t Matter (much)” Mike Belshe 3.11s Page 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)Wednesday, 24 October 2012
  26. Impact of Latency 4 3 Page Load Time (s) 2 1 0 20 40 60 80 100 120 140 160 180 200 220 240 Round Trip Time (ms)Wednesday, 24 October 2012
  27. Minimum round trips to download a file (TCP Segments) 285kB 214kB 143kB 71kB Size 1 2 3 4 5 6 7 8 9 10 11 Round Trips TCP and the Lower Bound of Web Performance John RauserWednesday, 24 October 2012
  28. Going Faster… http://www.flickr.com/photos/mikebaird/2464769129/Wednesday, 24 October 2012
  29. Put your pages on a diet http://www.flickr.com/photos/europedistrict/4537909259Wednesday, 24 October 2012
  30. Cut down number of HTTP requestsWednesday, 24 October 2012
  31. Move the content closer http://www.flickr.com/photos/jamesjordan/2198988999Wednesday, 24 October 2012
  32. Organise content so it’s easy to load http://www.flickr.com/photos/jemsweb/4363548805Wednesday, 24 October 2012
  33. What’s the web made of? Images Scripts Stylesheets HTML Flash Other Composition of ‘average’ web page via httparchive.orgWednesday, 24 October 2012
  34. Images are 64% of an ‘average’ web page http://www.flickr.com/photos/zaprittsky/4520788183/Wednesday, 24 October 2012
  35. Bitmapped Images JPEG PNG GIF Optimise, Optimise, Optimise! (jpegmini, pngmini, Smush.it, ImageOptim, Gifsicle etc.)Wednesday, 24 October 2012
  36. New Devices, New Challenges... 2 x Resolution = 4 x Pixels! http://www.flickr.com/photos/roopaw/6985954465Wednesday, 24 October 2012
  37. Some Alternatives CSS SVG Fonts Watch SVG sizes not always smaller than bitmap!Wednesday, 24 October 2012
  38. Don’t block the browser... http://www.flickr.com/photos/barteko/6128499314Wednesday, 24 October 2012
  39. news.bbcimg.co.uk static.bbc.co.uk Browsers can download resources in parallelWednesday, 24 October 2012
  40. But Sometimes... The Waterfall of Doom! 2 seconds! (nearly)Wednesday, 24 October 2012
  41. The Script Tag <script src=″…″></script> Until the script has executed, the rendering of all elements below is blocked!Wednesday, 24 October 2012
  42. “Virgin Media Broadband ISP Users Affected by Website Routing Woes” ISP Review, May 26, 2012 Customer jcmm33 said: “Same issue here as well, been like this all day. Sites like autotrader.co.uk don’t appear to be accessible, others like the telegraph.co.uk are waiting on other components to download (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.htmlWednesday, 24 October 2012
  43. Impact on The Telegraph… Same issue affected many other sites http://bit.ly/Ncy7RdWednesday, 24 October 2012
  44. 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 & OperaWednesday, 24 October 2012
  45. The Challenge of Mobile http://www.flickr.com/photos/cubicgarden/3281555681Wednesday, 24 October 2012
  46. Argh... My brain hurts! http://www.flickr.com/photos/corneveaux/3248566797Wednesday, 24 October 2012
  47. Don’t have to do it all by hand http://www.flickr.com/photos/simeon_barkas/2557059247Wednesday, 24 October 2012
  48. Performance isn’t just for Christmas Measure Optimise AnalyseWednesday, 24 October 2012
  49. Measure Impact on Business Goals http://www.flickr.com/photos/safari_vacation/5961260280Wednesday, 24 October 2012
  50. http://www.flickr.com/photos/jurvetson/6212582593Wednesday, 24 October 2012
  51. @andydavies andy@asteno.com http://www.slideshare.net/andydavies http://www.flickr.com/photos/auntiep/5024494612Wednesday, 24 October 2012
  52. Credits All photographs copyright original owners on flickr.com Following pictograms courtesy of The Noun ProjectWednesday, 24 October 2012

×