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

Speed is Essential for aGreat Web Experience@andydavies#CanvasConfSep 2012 http://www.ﬂickr.com/photos/barkaway/342359810

But sometimes other concerns take priority... http://www.ﬂickr.com/photos/randomidea/247994072

“Are we there yet?” http://www.ﬂickr.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.ﬂickr.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.ﬂickr.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 ﬁrst 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 ﬁle (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.ﬂickr.com/photos/mikebaird/2464769129/

Get the <head> straight<!doctype html><html><head> CSS before JS <meta charset="utf-8"> Ideally one ﬁle* <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 ﬁles

Load remaining Javascript late as possible . . . <script src="restofscript.js"></script> </body> </html> One ﬁle or many? (Depends on size) Could you defer some JS until after onload?

Squash text based content - gzip / minify http://www.ﬂickr.com/photos/evdg/298415813

Images are 64% of an ‘average’ web page http://www.ﬂickr.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.ﬂickr.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.ﬂickr.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.ﬂickr.com/photos/corneveaux/3248566797

Don’t have to do it all by hand http://www.ﬂickr.com/photos/simeon_barkas/2557059247

Performance isn’t just for Christmas Measure Optimise Analyse

http://www.ﬂickr.com/photos/jurvetson/6212582593

@andydavies andy@asteno.comhttp://www.slideshare.net/andydavies http://www.ﬂickr.com/photos/auntiep/5024494612

CreditsAll photographs copyright original owners on ﬂickr.comFollowing pictograms courtesy of The Noun Project

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

Andy Davies

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