• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Speed is Essential for a Great Web Experience (Canvas Conf Version)
 

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

on

  • 45,245 views

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

Statistics

Views

Total Views
45,245
Views on SlideShare
42,727
Embed Views
2,518

Actions

Likes
23
Downloads
166
Comments
6

46 Embeds 2,518

http://wp342.dev 696
http://www.383project.com 512
http://wcmia.conferenceme.in.dev 203
http://rodriguezidoiahctics1213i.blogspot.com.es 148
http://wp35bp162.dev 123
http://dimensionmedia.staging.wpengine.com 93
http://383project.site 90
http://coderinsights.blogspot.in 88
http://planet-skyron.co.uk 81
https://twitter.com 76
http://383project2012.383dev.co.uk 74
http://rodriguezidoiahctics1213i.blogspot.com 70
http://dimensionmedia.wpengine.com 51
http://coderinsights.blogspot.com 37
http://localhost 31
http://holdon54321.blogspot.com 21
http://lanyrd.com 20
http://www.etceter.com 18
https://si0.twimg.com 13
http://coderinsights.blogspot.ru 12
http://flavors.me 11
http://tweetedtimes.com 5
http://skeleton 5
http://classes.miller-motte.edu 4
http://simplypavi.flavors.me 3
http://kred.com 3
http://coderinsights.blogspot.co.uk 3
http://coderinsights.blogspot.ro 3
http://coderinsights.blogspot.fr 2
http://coderinsights.blogspot.co.nz 2
http://writeonwebformation.wordpress.com 2
http://www3.edee.test.fg.cz 2
http://holdon54321.blogspot.co.uk 2
http://www.brijj.com 2
http://coderinsights.blogspot.sg 1
http://coderinsights.blogspot.co.il 1
http://coderinsights.blogspot.be 1
http://instacurate.com 1
http://pinterest.com 1
http://coderinsights.blogspot.de 1
http://bowencraggs.review.llamadigital.net 1
http://127.0.0.1 1
http://twitter.com 1
http://www.gimnasio11-2.blogspot.com 1
http://gimnasio11-2.blogspot.com 1
http://miami.conferenceme.in 1
More...

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

16 of 6 previous next Post a comment

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

    • Speed is Essential for aGreat Web Experience@andydavies#CanvasConfSep 2012 http://www.flickr.com/photos/barkaway/342359810
    • 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!100ms 1s 10s 3s - Recommended 7s - Fortune 500 Load Time Average (2010) Response Time in Man-computer Conversational Transactions Robert B. Miller, 1968
    • “50% more concentration when using badly performing web sites” Foviance http://www.flickr.com/photos/yourdon/3366991042
    • Effect of delay on abandonment rate... Abandonment rate over 200+ sites / 177+ million page views over 2 weeks - http://www.measureworks.nl / Gomez
    • Bing did some experiments +1s $/ - 2.8% +
    • Wallmart made some improvements -1s +2%
    • Shopzilla cut page load time by 5 seconds! +12% +25% -50% $$$ http://velocityconf.com/velocity2009/public/schedule/detail/7709
    • Measuring page load time...
    • 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)
    • 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.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
    • Fix slow server responses first 4 seconds!
    • 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)
    • 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
    • Going Faster… http://www.flickr.com/photos/mikebaird/2464769129/
    • 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
    • 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?
    • 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! (jpegmini, pngmini, Smush.it, ImageOptim, Gifsicle etc.)
    • New Devices, New Challenges... 2 x Resolution = 4 x Pixels! http://www.flickr.com/photos/roopaw/6985954465
    • 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 TCP connections being (re-) opened
    • 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.com/photos/sterlingely/64228609
    • Redirects - necessary but waste time… Why 2 redirects? Expensive over mobile networks due to latency
    • 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
    • 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(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
    • 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/auntiep/5024494612
    • CreditsAll photographs copyright original owners on flickr.comFollowing pictograms courtesy of The Noun Project