speed is essential for a great web experience (digicure - copenhagen)
DESCRIPTION
Slides from my talk at Digicure's performance seminar in Copenhagen.TRANSCRIPT
![Page 1: Speed is Essential for a Great Web Experience (Digicure - Copenhagen)](https://reader034.vdocuments.net/reader034/viewer/2022052310/5553b435b4c905d4448b4c66/html5/thumbnails/1.jpg)
http://www.flickr.com/photos/ahockley/3576838608
Speed is Essential for a Great Web Experience
@andydavies
DigicureOct 2012
Wednesday, 24 October 2012
![Page 2: Speed is Essential for a Great Web Experience (Digicure - Copenhagen)](https://reader034.vdocuments.net/reader034/viewer/2022052310/5553b435b4c905d4448b4c66/html5/thumbnails/2.jpg)
http://www.flickr.com/photos/randomidea/247994072
Performance isn’t always a priority
Wednesday, 24 October 2012
![Page 3: Speed is Essential for a Great Web Experience (Digicure - Copenhagen)](https://reader034.vdocuments.net/reader034/viewer/2022052310/5553b435b4c905d4448b4c66/html5/thumbnails/3.jpg)
http://www.flickr.com/photos/kindofindie/4099768084
“Has it loaded yet?”
Wednesday, 24 October 2012
![Page 4: Speed is Essential for a Great Web Experience (Digicure - Copenhagen)](https://reader034.vdocuments.net/reader034/viewer/2022052310/5553b435b4c905d4448b4c66/html5/thumbnails/4.jpg)
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
![Page 5: Speed is Essential for a Great Web Experience (Digicure - Copenhagen)](https://reader034.vdocuments.net/reader034/viewer/2022052310/5553b435b4c905d4448b4c66/html5/thumbnails/5.jpg)
“50% more concentration when using badly performing web sites”
Foviance
http://www.flickr.com/photos/yourdon/3366991042Wednesday, 24 October 2012
![Page 6: Speed is Essential for a Great Web Experience (Digicure - Copenhagen)](https://reader034.vdocuments.net/reader034/viewer/2022052310/5553b435b4c905d4448b4c66/html5/thumbnails/6.jpg)
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
![Page 7: Speed is Essential for a Great Web Experience (Digicure - Copenhagen)](https://reader034.vdocuments.net/reader034/viewer/2022052310/5553b435b4c905d4448b4c66/html5/thumbnails/7.jpg)
Bing did some experiments
+1s - 2.8%
+1s$/ Wednesday, 24 October 2012
![Page 8: Speed is Essential for a Great Web Experience (Digicure - Copenhagen)](https://reader034.vdocuments.net/reader034/viewer/2022052310/5553b435b4c905d4448b4c66/html5/thumbnails/8.jpg)
Wallmart made some improvements
-1s +2%
Wednesday, 24 October 2012
![Page 9: Speed is Essential for a Great Web Experience (Digicure - Copenhagen)](https://reader034.vdocuments.net/reader034/viewer/2022052310/5553b435b4c905d4448b4c66/html5/thumbnails/9.jpg)
Shopzilla cut page load time by 5 seconds!
http://velocityconf.com/velocity2009/public/schedule/detail/7709
$$$
+12% +25% -50%
Wednesday, 24 October 2012
![Page 10: Speed is Essential for a Great Web Experience (Digicure - Copenhagen)](https://reader034.vdocuments.net/reader034/viewer/2022052310/5553b435b4c905d4448b4c66/html5/thumbnails/10.jpg)
Measuring page load time...
http://www.flickr.com/photos/wwarby/7109538317Wednesday, 24 October 2012
![Page 11: Speed is Essential for a Great Web Experience (Digicure - Copenhagen)](https://reader034.vdocuments.net/reader034/viewer/2022052310/5553b435b4c905d4448b4c66/html5/thumbnails/11.jpg)
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
![Page 12: Speed is Essential for a Great Web Experience (Digicure - Copenhagen)](https://reader034.vdocuments.net/reader034/viewer/2022052310/5553b435b4c905d4448b4c66/html5/thumbnails/12.jpg)
But these are not our visitors…
http://www.flickr.com/photos/br1dotcom/4297736794
Wednesday, 24 October 2012
![Page 13: Speed is Essential for a Great Web Experience (Digicure - Copenhagen)](https://reader034.vdocuments.net/reader034/viewer/2022052310/5553b435b4c905d4448b4c66/html5/thumbnails/13.jpg)
http://www.flickr.com/photos/yourdon/2681687374
These are our visitors
Wednesday, 24 October 2012
![Page 14: Speed is Essential for a Great Web Experience (Digicure - Copenhagen)](https://reader034.vdocuments.net/reader034/viewer/2022052310/5553b435b4c905d4448b4c66/html5/thumbnails/14.jpg)
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
![Page 15: Speed is Essential for a Great Web Experience (Digicure - Copenhagen)](https://reader034.vdocuments.net/reader034/viewer/2022052310/5553b435b4c905d4448b4c66/html5/thumbnails/15.jpg)
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
![Page 16: Speed is Essential for a Great Web Experience (Digicure - Copenhagen)](https://reader034.vdocuments.net/reader034/viewer/2022052310/5553b435b4c905d4448b4c66/html5/thumbnails/16.jpg)
Measuring Real Users - Google Analytics
Relies on Navigation Timing API, can add extra timing calls to pageWednesday, 24 October 2012
![Page 17: Speed is Essential for a Great Web Experience (Digicure - Copenhagen)](https://reader034.vdocuments.net/reader034/viewer/2022052310/5553b435b4c905d4448b4c66/html5/thumbnails/17.jpg)
http://www.flickr.com/photos/ohhector/3149051855
Looking Deeper
Wednesday, 24 October 2012
![Page 18: Speed is Essential for a Great Web Experience (Digicure - Copenhagen)](https://reader034.vdocuments.net/reader034/viewer/2022052310/5553b435b4c905d4448b4c66/html5/thumbnails/18.jpg)
webpagetest.org
Wednesday, 24 October 2012
![Page 19: Speed is Essential for a Great Web Experience (Digicure - Copenhagen)](https://reader034.vdocuments.net/reader034/viewer/2022052310/5553b435b4c905d4448b4c66/html5/thumbnails/19.jpg)
Waterfall for bbc.co.uk/news
Wednesday, 24 October 2012
![Page 20: Speed is Essential for a Great Web Experience (Digicure - Copenhagen)](https://reader034.vdocuments.net/reader034/viewer/2022052310/5553b435b4c905d4448b4c66/html5/thumbnails/20.jpg)
mobitest.akamai.com
Wednesday, 24 October 2012
![Page 21: Speed is Essential for a Great Web Experience (Digicure - Copenhagen)](https://reader034.vdocuments.net/reader034/viewer/2022052310/5553b435b4c905d4448b4c66/html5/thumbnails/21.jpg)
Bigger, Faster Servers?
http://www.flickr.com/photos/getbutterfly/6317955134Wednesday, 24 October 2012
![Page 22: Speed is Essential for a Great Web Experience (Digicure - Copenhagen)](https://reader034.vdocuments.net/reader034/viewer/2022052310/5553b435b4c905d4448b4c66/html5/thumbnails/22.jpg)
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
![Page 23: Speed is Essential for a Great Web Experience (Digicure - Copenhagen)](https://reader034.vdocuments.net/reader034/viewer/2022052310/5553b435b4c905d4448b4c66/html5/thumbnails/23.jpg)
Fix slow server responses first
4 seconds!
Wednesday, 24 October 2012
![Page 24: Speed is Essential for a Great Web Experience (Digicure - Copenhagen)](https://reader034.vdocuments.net/reader034/viewer/2022052310/5553b435b4c905d4448b4c66/html5/thumbnails/24.jpg)
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
![Page 25: Speed is Essential for a Great Web Experience (Digicure - Copenhagen)](https://reader034.vdocuments.net/reader034/viewer/2022052310/5553b435b4c905d4448b4c66/html5/thumbnails/25.jpg)
“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
![Page 26: Speed is Essential for a Great Web Experience (Digicure - Copenhagen)](https://reader034.vdocuments.net/reader034/viewer/2022052310/5553b435b4c905d4448b4c66/html5/thumbnails/26.jpg)
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
![Page 27: Speed is Essential for a Great Web Experience (Digicure - Copenhagen)](https://reader034.vdocuments.net/reader034/viewer/2022052310/5553b435b4c905d4448b4c66/html5/thumbnails/27.jpg)
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
![Page 28: Speed is Essential for a Great Web Experience (Digicure - Copenhagen)](https://reader034.vdocuments.net/reader034/viewer/2022052310/5553b435b4c905d4448b4c66/html5/thumbnails/28.jpg)
Going Faster…
http://www.flickr.com/photos/mikebaird/2464769129/Wednesday, 24 October 2012
![Page 29: Speed is Essential for a Great Web Experience (Digicure - Copenhagen)](https://reader034.vdocuments.net/reader034/viewer/2022052310/5553b435b4c905d4448b4c66/html5/thumbnails/29.jpg)
Put your pages on a diethttp://www.flickr.com/photos/europedistrict/4537909259
Wednesday, 24 October 2012
![Page 30: Speed is Essential for a Great Web Experience (Digicure - Copenhagen)](https://reader034.vdocuments.net/reader034/viewer/2022052310/5553b435b4c905d4448b4c66/html5/thumbnails/30.jpg)
Cut down number of HTTP requests
Wednesday, 24 October 2012
![Page 31: Speed is Essential for a Great Web Experience (Digicure - Copenhagen)](https://reader034.vdocuments.net/reader034/viewer/2022052310/5553b435b4c905d4448b4c66/html5/thumbnails/31.jpg)
Move the content closer
http://www.flickr.com/photos/jamesjordan/2198988999Wednesday, 24 October 2012
![Page 32: Speed is Essential for a Great Web Experience (Digicure - Copenhagen)](https://reader034.vdocuments.net/reader034/viewer/2022052310/5553b435b4c905d4448b4c66/html5/thumbnails/32.jpg)
http://www.flickr.com/photos/jemsweb/4363548805
Organise content so it’s easy to load
Wednesday, 24 October 2012
![Page 33: Speed is Essential for a Great Web Experience (Digicure - Copenhagen)](https://reader034.vdocuments.net/reader034/viewer/2022052310/5553b435b4c905d4448b4c66/html5/thumbnails/33.jpg)
What’s the web made of?
ImagesScriptsStylesheetsHTMLFlashOther
Composition of ‘average’ web page via httparchive.orgWednesday, 24 October 2012
![Page 34: Speed is Essential for a Great Web Experience (Digicure - Copenhagen)](https://reader034.vdocuments.net/reader034/viewer/2022052310/5553b435b4c905d4448b4c66/html5/thumbnails/34.jpg)
http://www.flickr.com/photos/zaprittsky/4520788183/
Images are 64% of an ‘average’ web page
Wednesday, 24 October 2012
![Page 35: Speed is Essential for a Great Web Experience (Digicure - Copenhagen)](https://reader034.vdocuments.net/reader034/viewer/2022052310/5553b435b4c905d4448b4c66/html5/thumbnails/35.jpg)
JPEG PNG GIF
Bitmapped Images
Optimise, Optimise, Optimise! (jpegmini, pngmini, Smush.it, ImageOptim, Gifsicle etc.)
Wednesday, 24 October 2012
![Page 36: Speed is Essential for a Great Web Experience (Digicure - Copenhagen)](https://reader034.vdocuments.net/reader034/viewer/2022052310/5553b435b4c905d4448b4c66/html5/thumbnails/36.jpg)
New Devices, New Challenges...
2 x Resolution = 4 x Pixels!
http://www.flickr.com/photos/roopaw/6985954465Wednesday, 24 October 2012
![Page 37: Speed is Essential for a Great Web Experience (Digicure - Copenhagen)](https://reader034.vdocuments.net/reader034/viewer/2022052310/5553b435b4c905d4448b4c66/html5/thumbnails/37.jpg)
CSS SVG Fonts
Some Alternatives
Watch SVG sizes not always smaller than bitmap!Wednesday, 24 October 2012
![Page 38: Speed is Essential for a Great Web Experience (Digicure - Copenhagen)](https://reader034.vdocuments.net/reader034/viewer/2022052310/5553b435b4c905d4448b4c66/html5/thumbnails/38.jpg)
Don’t block the browser...
http://www.flickr.com/photos/barteko/6128499314
Wednesday, 24 October 2012
![Page 39: Speed is Essential for a Great Web Experience (Digicure - Copenhagen)](https://reader034.vdocuments.net/reader034/viewer/2022052310/5553b435b4c905d4448b4c66/html5/thumbnails/39.jpg)
Browsers can download resources in parallel
news.bbcimg.co.uk
static.bbc.co.uk
Wednesday, 24 October 2012
![Page 40: Speed is Essential for a Great Web Experience (Digicure - Copenhagen)](https://reader034.vdocuments.net/reader034/viewer/2022052310/5553b435b4c905d4448b4c66/html5/thumbnails/40.jpg)
But Sometimes... The Waterfall of Doom!
2 seconds! (nearly)
Wednesday, 24 October 2012
![Page 41: Speed is Essential for a Great Web Experience (Digicure - Copenhagen)](https://reader034.vdocuments.net/reader034/viewer/2022052310/5553b435b4c905d4448b4c66/html5/thumbnails/41.jpg)
The Script Tag
<script src=″…″></script>
Until the script has executed, the rendering of all elements below is blocked!
Wednesday, 24 October 2012
![Page 42: Speed is Essential for a Great Web Experience (Digicure - Copenhagen)](https://reader034.vdocuments.net/reader034/viewer/2022052310/5553b435b4c905d4448b4c66/html5/thumbnails/42.jpg)
“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
![Page 43: Speed is Essential for a Great Web Experience (Digicure - Copenhagen)](https://reader034.vdocuments.net/reader034/viewer/2022052310/5553b435b4c905d4448b4c66/html5/thumbnails/43.jpg)
http://bit.ly/Ncy7Rd
Impact on The Telegraph…
Same issue affected many other sitesWednesday, 24 October 2012
![Page 44: Speed is Essential for a Great Web Experience (Digicure - Copenhagen)](https://reader034.vdocuments.net/reader034/viewer/2022052310/5553b435b4c905d4448b4c66/html5/thumbnails/44.jpg)
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
![Page 45: Speed is Essential for a Great Web Experience (Digicure - Copenhagen)](https://reader034.vdocuments.net/reader034/viewer/2022052310/5553b435b4c905d4448b4c66/html5/thumbnails/45.jpg)
The Challenge of Mobile
http://www.flickr.com/photos/cubicgarden/3281555681Wednesday, 24 October 2012
![Page 46: Speed is Essential for a Great Web Experience (Digicure - Copenhagen)](https://reader034.vdocuments.net/reader034/viewer/2022052310/5553b435b4c905d4448b4c66/html5/thumbnails/46.jpg)
Argh... My brain hurts!
http://www.flickr.com/photos/corneveaux/3248566797Wednesday, 24 October 2012
![Page 47: Speed is Essential for a Great Web Experience (Digicure - Copenhagen)](https://reader034.vdocuments.net/reader034/viewer/2022052310/5553b435b4c905d4448b4c66/html5/thumbnails/47.jpg)
http://www.flickr.com/photos/simeon_barkas/2557059247
Don’t have to do it all by hand
Wednesday, 24 October 2012
![Page 48: Speed is Essential for a Great Web Experience (Digicure - Copenhagen)](https://reader034.vdocuments.net/reader034/viewer/2022052310/5553b435b4c905d4448b4c66/html5/thumbnails/48.jpg)
Measure
AnalyseOptimise
Performance isn’t just for Christmas
Wednesday, 24 October 2012
![Page 49: Speed is Essential for a Great Web Experience (Digicure - Copenhagen)](https://reader034.vdocuments.net/reader034/viewer/2022052310/5553b435b4c905d4448b4c66/html5/thumbnails/49.jpg)
http://www.flickr.com/photos/safari_vacation/5961260280
Measure Impact on Business Goals
Wednesday, 24 October 2012
![Page 50: Speed is Essential for a Great Web Experience (Digicure - Copenhagen)](https://reader034.vdocuments.net/reader034/viewer/2022052310/5553b435b4c905d4448b4c66/html5/thumbnails/50.jpg)
http://www.flickr.com/photos/jurvetson/6212582593Wednesday, 24 October 2012
![Page 51: Speed is Essential for a Great Web Experience (Digicure - Copenhagen)](https://reader034.vdocuments.net/reader034/viewer/2022052310/5553b435b4c905d4448b4c66/html5/thumbnails/51.jpg)
http://www.flickr.com/photos/auntiep/5024494612
@andydavies
http://www.slideshare.net/andydavies
Wednesday, 24 October 2012
![Page 52: Speed is Essential for a Great Web Experience (Digicure - Copenhagen)](https://reader034.vdocuments.net/reader034/viewer/2022052310/5553b435b4c905d4448b4c66/html5/thumbnails/52.jpg)
Credits
All photographs copyright original owners on flickr.com
Following pictograms courtesy of The Noun Project
Wednesday, 24 October 2012