speed is essential for a great web experience (digicure - copenhagen)
DESCRIPTION
Slides from my talk at Digicure's performance seminar in Copenhagen.TRANSCRIPT
http://www.flickr.com/photos/ahockley/3576838608
Speed is Essential for a Great Web Experience
@andydavies
DigicureOct 2012
Wednesday, 24 October 2012
http://www.flickr.com/photos/randomidea/247994072
Performance isn’t always a priority
Wednesday, 24 October 2012
http://www.flickr.com/photos/kindofindie/4099768084
“Has it loaded yet?”
Wednesday, 24 October 2012
100ms 1s 10s
Response Time in Man-computer Conversational TransactionsRobert B. Miller, 1968
Instant
Seamless Yawn!
Our perception of response time
3s - RecommendedLoad Time
6.5s - Alexa 2000Fall 2012
Wednesday, 24 October 2012
“50% more concentration when using badly performing web sites”
Foviance
http://www.flickr.com/photos/yourdon/3366991042Wednesday, 24 October 2012
Abandonment rate over 200+ sites / 177+ million page views over 2 weeks - http://www.measureworks.nl / Gomez
Effect of delay on abandonment rate...
Wednesday, 24 October 2012
Bing did some experiments
+1s - 2.8%
+1s$/ Wednesday, 24 October 2012
Wallmart made some improvements
-1s +2%
Wednesday, 24 October 2012
Shopzilla cut page load time by 5 seconds!
http://velocityconf.com/velocity2009/public/schedule/detail/7709
$$$
+12% +25% -50%
Wednesday, 24 October 2012
Measuring page load time...
http://www.flickr.com/photos/wwarby/7109538317Wednesday, 24 October 2012
0
1
2
3
4
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
Res
pons
e T
ime
(s)
September 2012
Synthetic Monitoring
Wednesday, 24 October 2012
But these are not our visitors…
http://www.flickr.com/photos/br1dotcom/4297736794
Wednesday, 24 October 2012
http://www.flickr.com/photos/yourdon/2681687374
These are our visitors
Wednesday, 24 October 2012
1 2 3 4 5 6 7 8 9 10
1%3%3%
2%
6%
8%
13%
27%
8%
6%
Vis
itors
(%
)
Load Time (s)
Measure Real Users’ Experience
Wednesday, 24 October 2012
1 2 3 4 5 6 7 8 9 10 > 10
24%
1%3%3%
2%
6%
8%
13%
27%
8%
6%
Vis
itors
(%
)
Load Time (s)
Measure Real Users’ Experience
Wednesday, 24 October 2012
Measuring Real Users - Google Analytics
Relies on Navigation Timing API, can add extra timing calls to pageWednesday, 24 October 2012
http://www.flickr.com/photos/ohhector/3149051855
Looking Deeper
Wednesday, 24 October 2012
webpagetest.org
Wednesday, 24 October 2012
Waterfall for bbc.co.uk/news
Wednesday, 24 October 2012
mobitest.akamai.com
Wednesday, 24 October 2012
Bigger, Faster Servers?
http://www.flickr.com/photos/getbutterfly/6317955134Wednesday, 24 October 2012
80% plus of page load time is on front-end
Measured on residential ADSL line using Chrome 19
news.bbc.co.uk
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
BackendFrontend
Wednesday, 24 October 2012
Fix slow server responses first
4 seconds!
Wednesday, 24 October 2012
Bandwidth (often) isn’t the bottleneck
news.bbc.co.uk tested via webpagetest.org throttled at 1.5Mbps(bursts over 1.5Mbps are artefact of testing)
10s0s 5s
0.5
1.0
1.5
2.0
Wednesday, 24 October 2012
“More Bandwidth Doesn’t Matter (much)”Mike Belshe
1 2 3 4 5 6 7 8 9 10
1.36s1.37s1.38s1.39s1.41s1.44s1.50s1.63s
1.95s
3.11s
Page
Loa
d T
ime
Bandwidth (Mbps)
Wednesday, 24 October 2012
Impact of Latency
1
2
3
4
0 20 40 60 80 100 120 140 160 180 200 220 240
Page
Loa
d T
ime
(s)
Round Trip Time (ms)Wednesday, 24 October 2012
TCP and the Lower Bound of Web PerformanceJohn Rauser
Minimum round trips to download a file
71kB
143kB
214kB
285kB
1 2 3 4 5 6 7 8 9 10 11
(TCP Segments)
Round Trips
Size
Wednesday, 24 October 2012
Going Faster…
http://www.flickr.com/photos/mikebaird/2464769129/Wednesday, 24 October 2012
Put your pages on a diethttp://www.flickr.com/photos/europedistrict/4537909259
Wednesday, 24 October 2012
Cut down number of HTTP requests
Wednesday, 24 October 2012
Move the content closer
http://www.flickr.com/photos/jamesjordan/2198988999Wednesday, 24 October 2012
http://www.flickr.com/photos/jemsweb/4363548805
Organise content so it’s easy to load
Wednesday, 24 October 2012
What’s the web made of?
ImagesScriptsStylesheetsHTMLFlashOther
Composition of ‘average’ web page via httparchive.orgWednesday, 24 October 2012
http://www.flickr.com/photos/zaprittsky/4520788183/
Images are 64% of an ‘average’ web page
Wednesday, 24 October 2012
JPEG PNG GIF
Bitmapped Images
Optimise, Optimise, Optimise! (jpegmini, pngmini, Smush.it, ImageOptim, Gifsicle etc.)
Wednesday, 24 October 2012
New Devices, New Challenges...
2 x Resolution = 4 x Pixels!
http://www.flickr.com/photos/roopaw/6985954465Wednesday, 24 October 2012
CSS SVG Fonts
Some Alternatives
Watch SVG sizes not always smaller than bitmap!Wednesday, 24 October 2012
Don’t block the browser...
http://www.flickr.com/photos/barteko/6128499314
Wednesday, 24 October 2012
Browsers can download resources in parallel
news.bbcimg.co.uk
static.bbc.co.uk
Wednesday, 24 October 2012
But Sometimes... The Waterfall of Doom!
2 seconds! (nearly)
Wednesday, 24 October 2012
The Script Tag
<script src=″…″></script>
Until the script has executed, the rendering of all elements below is blocked!
Wednesday, 24 October 2012
“Virgin Media Broadband ISP Users Affected by Website Routing Woes”
ISP Review, May 26, 2012
http://www.ispreview.co.uk/index.php/2012/05/uk-virgin-media-broadband-isp-users-affected-by-website-routing-woes.html
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).”
Wednesday, 24 October 2012
http://bit.ly/Ncy7Rd
Impact on The Telegraph…
Same issue affected many other sitesWednesday, 24 October 2012
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
Wednesday, 24 October 2012
The Challenge of Mobile
http://www.flickr.com/photos/cubicgarden/3281555681Wednesday, 24 October 2012
Argh... My brain hurts!
http://www.flickr.com/photos/corneveaux/3248566797Wednesday, 24 October 2012
http://www.flickr.com/photos/simeon_barkas/2557059247
Don’t have to do it all by hand
Wednesday, 24 October 2012
Measure
AnalyseOptimise
Performance isn’t just for Christmas
Wednesday, 24 October 2012
http://www.flickr.com/photos/safari_vacation/5961260280
Measure Impact on Business Goals
Wednesday, 24 October 2012
http://www.flickr.com/photos/jurvetson/6212582593Wednesday, 24 October 2012
http://www.flickr.com/photos/auntiep/5024494612
@andydavies
http://www.slideshare.net/andydavies
Wednesday, 24 October 2012
Credits
All photographs copyright original owners on flickr.com
Following pictograms courtesy of The Noun Project
Wednesday, 24 October 2012