speed is essential for a great web experience (canvas conf version)
DESCRIPTION
Slides from my Web Performance talk at Canvas Conf, Birmingham - 7 Sep 2012TRANSCRIPT
![Page 1: Speed is Essential for a Great Web Experience (Canvas Conf Version)](https://reader033.vdocuments.site/reader033/viewer/2022051611/54b732c74a795925408b45fb/html5/thumbnails/1.jpg)
http://www.flickr.com/photos/barkaway/342359810
Speed is Essential for a Great Web Experience
@andydavies
#CanvasConf Sep 2012
![Page 2: Speed is Essential for a Great Web Experience (Canvas Conf Version)](https://reader033.vdocuments.site/reader033/viewer/2022051611/54b732c74a795925408b45fb/html5/thumbnails/2.jpg)
http://www.flickr.com/photos/randomidea/247994072
But sometimes other concerns take priority...
![Page 3: Speed is Essential for a Great Web Experience (Canvas Conf Version)](https://reader033.vdocuments.site/reader033/viewer/2022051611/54b732c74a795925408b45fb/html5/thumbnails/3.jpg)
http://www.flickr.com/photos/sharynmorrow/643126727
“Are we there yet?”
![Page 4: Speed is Essential for a Great Web Experience (Canvas Conf Version)](https://reader033.vdocuments.site/reader033/viewer/2022051611/54b732c74a795925408b45fb/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
7s - Fortune 500Average (2010)
![Page 5: Speed is Essential for a Great Web Experience (Canvas Conf Version)](https://reader033.vdocuments.site/reader033/viewer/2022051611/54b732c74a795925408b45fb/html5/thumbnails/5.jpg)
“50% more concentration when using badly performing web sites”
Foviance
http://www.flickr.com/photos/yourdon/3366991042
![Page 6: Speed is Essential for a Great Web Experience (Canvas Conf Version)](https://reader033.vdocuments.site/reader033/viewer/2022051611/54b732c74a795925408b45fb/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...
![Page 7: Speed is Essential for a Great Web Experience (Canvas Conf Version)](https://reader033.vdocuments.site/reader033/viewer/2022051611/54b732c74a795925408b45fb/html5/thumbnails/7.jpg)
Bing did some experiments
+1s - 2.8%
+1s$/
![Page 8: Speed is Essential for a Great Web Experience (Canvas Conf Version)](https://reader033.vdocuments.site/reader033/viewer/2022051611/54b732c74a795925408b45fb/html5/thumbnails/8.jpg)
Wallmart made some improvements
-1s +2%
![Page 9: Speed is Essential for a Great Web Experience (Canvas Conf Version)](https://reader033.vdocuments.site/reader033/viewer/2022051611/54b732c74a795925408b45fb/html5/thumbnails/9.jpg)
Shopzilla cut page load time by 5 seconds!
http://velocityconf.com/velocity2009/public/schedule/detail/7709
$$$
+12% +25% -50%
![Page 10: Speed is Essential for a Great Web Experience (Canvas Conf Version)](https://reader033.vdocuments.site/reader033/viewer/2022051611/54b732c74a795925408b45fb/html5/thumbnails/10.jpg)
Measuring page load time...
![Page 11: Speed is Essential for a Great Web Experience (Canvas Conf Version)](https://reader033.vdocuments.site/reader033/viewer/2022051611/54b732c74a795925408b45fb/html5/thumbnails/11.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
24% of visitors waited over 10s
![Page 12: Speed is Essential for a Great Web Experience (Canvas Conf Version)](https://reader033.vdocuments.site/reader033/viewer/2022051611/54b732c74a795925408b45fb/html5/thumbnails/12.jpg)
Measuring Real Users - Google Analytics
Relies on Navigation Timing API, can add extra timing calls to page
![Page 13: Speed is Essential for a Great Web Experience (Canvas Conf Version)](https://reader033.vdocuments.site/reader033/viewer/2022051611/54b732c74a795925408b45fb/html5/thumbnails/13.jpg)
Measuring Real Users - LogNormal
![Page 14: Speed is Essential for a Great Web Experience (Canvas Conf Version)](https://reader033.vdocuments.site/reader033/viewer/2022051611/54b732c74a795925408b45fb/html5/thumbnails/14.jpg)
Measuring Real Users - Torbit Insight
![Page 15: Speed is Essential for a Great Web Experience (Canvas Conf Version)](https://reader033.vdocuments.site/reader033/viewer/2022051611/54b732c74a795925408b45fb/html5/thumbnails/15.jpg)
Measuring Real Users - New Relic
![Page 16: Speed is Essential for a Great Web Experience (Canvas Conf Version)](https://reader033.vdocuments.site/reader033/viewer/2022051611/54b732c74a795925408b45fb/html5/thumbnails/16.jpg)
webpagetest.org
![Page 17: Speed is Essential for a Great Web Experience (Canvas Conf Version)](https://reader033.vdocuments.site/reader033/viewer/2022051611/54b732c74a795925408b45fb/html5/thumbnails/17.jpg)
Waterfall for bbc.co.uk/news
![Page 19: Speed is Essential for a Great Web Experience (Canvas Conf Version)](https://reader033.vdocuments.site/reader033/viewer/2022051611/54b732c74a795925408b45fb/html5/thumbnails/19.jpg)
Bigger, Faster Servers?
http://www.flickr.com/photos/br1dotcom/4297736794
![Page 20: Speed is Essential for a Great Web Experience (Canvas Conf Version)](https://reader033.vdocuments.site/reader033/viewer/2022051611/54b732c74a795925408b45fb/html5/thumbnails/20.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
![Page 21: Speed is Essential for a Great Web Experience (Canvas Conf Version)](https://reader033.vdocuments.site/reader033/viewer/2022051611/54b732c74a795925408b45fb/html5/thumbnails/21.jpg)
Fix slow server responses first
4 seconds!
![Page 22: Speed is Essential for a Great Web Experience (Canvas Conf Version)](https://reader033.vdocuments.site/reader033/viewer/2022051611/54b732c74a795925408b45fb/html5/thumbnails/22.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
![Page 23: Speed is Essential for a Great Web Experience (Canvas Conf Version)](https://reader033.vdocuments.site/reader033/viewer/2022051611/54b732c74a795925408b45fb/html5/thumbnails/23.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
![Page 24: Speed is Essential for a Great Web Experience (Canvas Conf Version)](https://reader033.vdocuments.site/reader033/viewer/2022051611/54b732c74a795925408b45fb/html5/thumbnails/24.jpg)
Going Faster…
http://www.flickr.com/photos/mikebaird/2464769129/
![Page 25: Speed is Essential for a Great Web Experience (Canvas Conf Version)](https://reader033.vdocuments.site/reader033/viewer/2022051611/54b732c74a795925408b45fb/html5/thumbnails/25.jpg)
Get the <head> straight
<!doctype html><html><head> <meta charset="utf-8"> <title>This is my title<title>
<link rel="stylesheet" href="styles.css" type="text/css" />
<script src="script.js"></script>
. . .
</head>
CSS before JSIdeally one file*
Only JS needed during page load
* Bryan and Stephanie Rieger’s major and minor breakpoint approach requires multiple CSS files
![Page 26: Speed is Essential for a Great Web Experience (Canvas Conf Version)](https://reader033.vdocuments.site/reader033/viewer/2022051611/54b732c74a795925408b45fb/html5/thumbnails/26.jpg)
. . .
<script src="restofscript.js"></script>
</body></html> One file or many?
(Depends on size)
Load remaining Javascript late as possible
Could you defer some JS until after onload?
![Page 27: Speed is Essential for a Great Web Experience (Canvas Conf Version)](https://reader033.vdocuments.site/reader033/viewer/2022051611/54b732c74a795925408b45fb/html5/thumbnails/27.jpg)
Squash text based content - gzip / minify
http://www.flickr.com/photos/evdg/298415813
![Page 28: Speed is Essential for a Great Web Experience (Canvas Conf Version)](https://reader033.vdocuments.site/reader033/viewer/2022051611/54b732c74a795925408b45fb/html5/thumbnails/28.jpg)
http://www.flickr.com/photos/zaprittsky/4520788183/
Images are 64% of an ‘average’ web page
![Page 29: Speed is Essential for a Great Web Experience (Canvas Conf Version)](https://reader033.vdocuments.site/reader033/viewer/2022051611/54b732c74a795925408b45fb/html5/thumbnails/29.jpg)
JPEG PNG GIF
Bitmapped Images
Optimise, Optimise, Optimise! (jpegmini, pngmini, Smush.it, ImageOptim, Gifsicle etc.)
![Page 30: Speed is Essential for a Great Web Experience (Canvas Conf Version)](https://reader033.vdocuments.site/reader033/viewer/2022051611/54b732c74a795925408b45fb/html5/thumbnails/30.jpg)
New Devices, New Challenges...
2 x Resolution = 4 x Pixels!
http://www.flickr.com/photos/roopaw/6985954465
![Page 31: Speed is Essential for a Great Web Experience (Canvas Conf Version)](https://reader033.vdocuments.site/reader033/viewer/2022051611/54b732c74a795925408b45fb/html5/thumbnails/31.jpg)
CSS SVG Fonts
Some Alternatives
Watch SVG - may not always be smaller than bitmap!
![Page 32: Speed is Essential for a Great Web Experience (Canvas Conf Version)](https://reader033.vdocuments.site/reader033/viewer/2022051611/54b732c74a795925408b45fb/html5/thumbnails/32.jpg)
Re-use TCP Connections via HTTP Keep-Alive
Orange segmentsare TCP connections being (re-) opened
![Page 33: Speed is Essential for a Great Web Experience (Canvas Conf Version)](https://reader033.vdocuments.site/reader033/viewer/2022051611/54b732c74a795925408b45fb/html5/thumbnails/33.jpg)
Increase number of parallel downloads
news.bbcimg.co.uk
static.bbc.co.uk
![Page 34: Speed is Essential for a Great Web Experience (Canvas Conf Version)](https://reader033.vdocuments.site/reader033/viewer/2022051611/54b732c74a795925408b45fb/html5/thumbnails/34.jpg)
Sometimes... The Waterfall of Doom!
2 seconds! (nearly)
![Page 35: Speed is Essential for a Great Web Experience (Canvas Conf Version)](https://reader033.vdocuments.site/reader033/viewer/2022051611/54b732c74a795925408b45fb/html5/thumbnails/35.jpg)
Reduce number of HTTP requests
![Page 36: Speed is Essential for a Great Web Experience (Canvas Conf Version)](https://reader033.vdocuments.site/reader033/viewer/2022051611/54b732c74a795925408b45fb/html5/thumbnails/36.jpg)
Cache resources that don’t change ‘often’ forever
http://www.flickr.com/photos/sterlingely/64228609(use versions to replace)
![Page 37: Speed is Essential for a Great Web Experience (Canvas Conf Version)](https://reader033.vdocuments.site/reader033/viewer/2022051611/54b732c74a795925408b45fb/html5/thumbnails/37.jpg)
Redirects - necessary but waste time…
Expensive over mobile networks due to latency
Why 2 redirects?
![Page 38: Speed is Essential for a Great Web Experience (Canvas Conf Version)](https://reader033.vdocuments.site/reader033/viewer/2022051611/54b732c74a795925408b45fb/html5/thumbnails/38.jpg)
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
![Page 39: Speed is Essential for a Great Web Experience (Canvas Conf Version)](https://reader033.vdocuments.site/reader033/viewer/2022051611/54b732c74a795925408b45fb/html5/thumbnails/39.jpg)
http://bit.ly/Ncy7Rd
Impact on The Telegraph…
Same issue affected many other sites
![Page 40: Speed is Essential for a Great Web Experience (Canvas Conf Version)](https://reader033.vdocuments.site/reader033/viewer/2022051611/54b732c74a795925408b45fb/html5/thumbnails/40.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
![Page 41: Speed is Essential for a Great Web Experience (Canvas Conf Version)](https://reader033.vdocuments.site/reader033/viewer/2022051611/54b732c74a795925408b45fb/html5/thumbnails/41.jpg)
Argh... My brain hurts!
http://www.flickr.com/photos/corneveaux/3248566797
![Page 42: Speed is Essential for a Great Web Experience (Canvas Conf Version)](https://reader033.vdocuments.site/reader033/viewer/2022051611/54b732c74a795925408b45fb/html5/thumbnails/42.jpg)
http://www.flickr.com/photos/simeon_barkas/2557059247
Don’t have to do it all by hand
![Page 43: Speed is Essential for a Great Web Experience (Canvas Conf Version)](https://reader033.vdocuments.site/reader033/viewer/2022051611/54b732c74a795925408b45fb/html5/thumbnails/43.jpg)
Measure
AnalyseOptimise
Performance isn’t just for Christmas
![Page 44: Speed is Essential for a Great Web Experience (Canvas Conf Version)](https://reader033.vdocuments.site/reader033/viewer/2022051611/54b732c74a795925408b45fb/html5/thumbnails/44.jpg)
http://www.flickr.com/photos/jurvetson/6212582593
![Page 45: Speed is Essential for a Great Web Experience (Canvas Conf Version)](https://reader033.vdocuments.site/reader033/viewer/2022051611/54b732c74a795925408b45fb/html5/thumbnails/45.jpg)
http://www.flickr.com/photos/auntiep/5024494612
@andydavies
http://www.slideshare.net/andydavies
![Page 46: Speed is Essential for a Great Web Experience (Canvas Conf Version)](https://reader033.vdocuments.site/reader033/viewer/2022051611/54b732c74a795925408b45fb/html5/thumbnails/46.jpg)
Credits
All photographs copyright original owners on flickr.com
Following pictograms courtesy of The Noun Project