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

  • 45,573 views
Uploaded on

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

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

More in: Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
45,573
On Slideshare
0
From Embeds
0
Number of Embeds
15

Actions

Shares
Downloads
167
Comments
6
Likes
23

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Speed is Essential for aGreat Web Experience@andydavies#CanvasConfSep 2012 http://www.flickr.com/photos/barkaway/342359810
  • 2. But sometimes other concerns take priority... http://www.flickr.com/photos/randomidea/247994072
  • 3. “Are we there yet?” http://www.flickr.com/photos/sharynmorrow/643126727
  • 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. “50% more concentration when using badly performing web sites” Foviance http://www.flickr.com/photos/yourdon/3366991042
  • 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. Bing did some experiments +1s $/ - 2.8% +
  • 8. Wallmart made some improvements -1s +2%
  • 9. Shopzilla cut page load time by 5 seconds! +12% +25% -50% $$$ http://velocityconf.com/velocity2009/public/schedule/detail/7709
  • 10. Measuring page load time...
  • 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. Measuring Real Users - Google AnalyticsRelies on Navigation Timing API, can add extra timing calls to page
  • 13. Measuring Real Users - LogNormal
  • 14. Measuring Real Users - Torbit Insight
  • 15. Measuring Real Users - New Relic
  • 16. webpagetest.org
  • 17. Waterfall for bbc.co.uk/news
  • 18. mobitest.akamai.com
  • 19. Bigger, Faster Servers? http://www.flickr.com/photos/br1dotcom/4297736794
  • 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. Fix slow server responses first 4 seconds!
  • 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. 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. Going Faster… http://www.flickr.com/photos/mikebaird/2464769129/
  • 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. 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. Squash text based content - gzip / minify http://www.flickr.com/photos/evdg/298415813
  • 28. Images are 64% of an ‘average’ web page http://www.flickr.com/photos/zaprittsky/4520788183/
  • 29. Bitmapped Images JPEG PNG GIF Optimise, Optimise, Optimise! (jpegmini, pngmini, Smush.it, ImageOptim, Gifsicle etc.)
  • 30. New Devices, New Challenges... 2 x Resolution = 4 x Pixels! http://www.flickr.com/photos/roopaw/6985954465
  • 31. Some Alternatives CSS SVG Fonts Watch SVG - may not always be smaller than bitmap!
  • 32. Re-use TCP Connections via HTTP Keep-Alive Orange segments are TCP connections being (re-) opened
  • 33. news.bbcimg.co.uk static.bbc.co.ukIncrease number of parallel downloads
  • 34. Sometimes... The Waterfall of Doom! 2 seconds! (nearly)
  • 35. Reduce number of HTTP requests
  • 36. Cache resources that don’t change ‘often’ forever(use versions to replace) http://www.flickr.com/photos/sterlingely/64228609
  • 37. Redirects - necessary but waste time… Why 2 redirects? Expensive over mobile networks due to latency
  • 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. Impact on The Telegraph…Same issue affected many other sites http://bit.ly/Ncy7Rd
  • 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. Argh... My brain hurts! http://www.flickr.com/photos/corneveaux/3248566797
  • 42. Don’t have to do it all by hand http://www.flickr.com/photos/simeon_barkas/2557059247
  • 43. Performance isn’t just for Christmas Measure Optimise Analyse
  • 44. http://www.flickr.com/photos/jurvetson/6212582593
  • 45. @andydavies andy@asteno.comhttp://www.slideshare.net/andydavies http://www.flickr.com/photos/auntiep/5024494612
  • 46. CreditsAll photographs copyright original owners on flickr.comFollowing pictograms courtesy of The Noun Project