speed is essential for a great web experience (oredev)
DESCRIPTION
Slides from my talk on why speed matters, ways to measure it and how page load times can be improved. Talk was given at oredev in SwedenTRANSCRIPT
![Page 1: Speed is Essential for a Great Web Experience (oredev)](https://reader034.vdocuments.mx/reader034/viewer/2022051110/54b732c34a795912438b45e1/html5/thumbnails/1.jpg)
http://www.flickr.com/photos/dex1138/7879381800
Speed is Essential for a Great Web Experience
@andydavies
#oredevNov 2012
![Page 2: Speed is Essential for a Great Web Experience (oredev)](https://reader034.vdocuments.mx/reader034/viewer/2022051110/54b732c34a795912438b45e1/html5/thumbnails/2.jpg)
http://www.flickr.com/photos/randomidea/247994072
Performance isn’t always a priority
![Page 3: Speed is Essential for a Great Web Experience (oredev)](https://reader034.vdocuments.mx/reader034/viewer/2022051110/54b732c34a795912438b45e1/html5/thumbnails/3.jpg)
http://www.flickr.com/photos/kindofindie/4099768084
“Has it loaded yet?”
![Page 4: Speed is Essential for a Great Web Experience (oredev)](https://reader034.vdocuments.mx/reader034/viewer/2022051110/54b732c34a795912438b45e1/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
![Page 5: Speed is Essential for a Great Web Experience (oredev)](https://reader034.vdocuments.mx/reader034/viewer/2022051110/54b732c34a795912438b45e1/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 (oredev)](https://reader034.vdocuments.mx/reader034/viewer/2022051110/54b732c34a795912438b45e1/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 (oredev)](https://reader034.vdocuments.mx/reader034/viewer/2022051110/54b732c34a795912438b45e1/html5/thumbnails/7.jpg)
Bing did some experiments
+1s - 2.8%
+1s$/
![Page 8: Speed is Essential for a Great Web Experience (oredev)](https://reader034.vdocuments.mx/reader034/viewer/2022051110/54b732c34a795912438b45e1/html5/thumbnails/8.jpg)
Wallmart made some improvements
-1s +2%
![Page 9: Speed is Essential for a Great Web Experience (oredev)](https://reader034.vdocuments.mx/reader034/viewer/2022051110/54b732c34a795912438b45e1/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 (oredev)](https://reader034.vdocuments.mx/reader034/viewer/2022051110/54b732c34a795912438b45e1/html5/thumbnails/10.jpg)
Measuring page load time...
http://www.flickr.com/photos/wwarby/7109538317
![Page 11: Speed is Essential for a Great Web Experience (oredev)](https://reader034.vdocuments.mx/reader034/viewer/2022051110/54b732c34a795912438b45e1/html5/thumbnails/11.jpg)
loadEventStart,
Prompt,for,
unload,
App,cache, DNS, TCP, Request, Response, onLoad,Processing,
redirectStart,
fetchStart,domainLookupStart,
domainLookupEnd,connectStart,
connectEnd,requestStart,
responseStart,responseEnd,
domLoading,
domInteracAve,
domContentLoaded,
domComplete,
loadEventEnd,
redirect,
redirectEnd,
navigaAonStart,
unloadStart,
unloadEnd,
unload,
(secureConnecAonStart),
W3C Navigation Timing API
http://www.w3.org/TR/navigation-timing/
![Page 12: Speed is Essential for a Great Web Experience (oredev)](https://reader034.vdocuments.mx/reader034/viewer/2022051110/54b732c34a795912438b45e1/html5/thumbnails/12.jpg)
Navigation Timing Data in Google Analytics
Text
Other Real User Monitoring tools available
![Page 13: Speed is Essential for a Great Web Experience (oredev)](https://reader034.vdocuments.mx/reader034/viewer/2022051110/54b732c34a795912438b45e1/html5/thumbnails/13.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)
Example of Real Users Experience
![Page 14: Speed is Essential for a Great Web Experience (oredev)](https://reader034.vdocuments.mx/reader034/viewer/2022051110/54b732c34a795912438b45e1/html5/thumbnails/14.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)
1 2 3 4 5 6 7 8 9 10 > 10
Vis
itors
(%
)
Load Time (s)
Example of Real Users Experience
![Page 15: Speed is Essential for a Great Web Experience (oredev)](https://reader034.vdocuments.mx/reader034/viewer/2022051110/54b732c34a795912438b45e1/html5/thumbnails/15.jpg)
0
1
2
3
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
![Page 16: Speed is Essential for a Great Web Experience (oredev)](https://reader034.vdocuments.mx/reader034/viewer/2022051110/54b732c34a795912438b45e1/html5/thumbnails/16.jpg)
http://www.flickr.com/photos/arnybo/2679622216
Examining the detail...
![Page 17: Speed is Essential for a Great Web Experience (oredev)](https://reader034.vdocuments.mx/reader034/viewer/2022051110/54b732c34a795912438b45e1/html5/thumbnails/17.jpg)
Browser Plugins
YSlow PageSpeed
![Page 18: Speed is Essential for a Great Web Experience (oredev)](https://reader034.vdocuments.mx/reader034/viewer/2022051110/54b732c34a795912438b45e1/html5/thumbnails/18.jpg)
webpagetest.org
![Page 19: Speed is Essential for a Great Web Experience (oredev)](https://reader034.vdocuments.mx/reader034/viewer/2022051110/54b732c34a795912438b45e1/html5/thumbnails/19.jpg)
Waterfall for bbc.co.uk/news
![Page 20: Speed is Essential for a Great Web Experience (oredev)](https://reader034.vdocuments.mx/reader034/viewer/2022051110/54b732c34a795912438b45e1/html5/thumbnails/20.jpg)
mobitest.akamai.com
Alternatively, could use Chrome / Safari remote debugging to generate HAR
![Page 21: Speed is Essential for a Great Web Experience (oredev)](https://reader034.vdocuments.mx/reader034/viewer/2022051110/54b732c34a795912438b45e1/html5/thumbnails/21.jpg)
Bigger, Faster Servers?
http://www.flickr.com/photos/getbutterfly/6317955134
![Page 22: Speed is Essential for a Great Web Experience (oredev)](https://reader034.vdocuments.mx/reader034/viewer/2022051110/54b732c34a795912438b45e1/html5/thumbnails/22.jpg)
Over 80% of page load time is on front-end
Measured via residential ADSL line using Google Chrome
news.bbc.co.uk
ebay.co.uk
debenhams.co.uk
direct.gov.uk
amazon.co.uk
mumsnet.com
guardian.co.uk
0 1 2 3 4 5
BackendFrontend
![Page 23: Speed is Essential for a Great Web Experience (oredev)](https://reader034.vdocuments.mx/reader034/viewer/2022051110/54b732c34a795912438b45e1/html5/thumbnails/23.jpg)
But don’t forget to fix slow server responses
4 seconds!
![Page 24: Speed is Essential for a Great Web Experience (oredev)](https://reader034.vdocuments.mx/reader034/viewer/2022051110/54b732c34a795912438b45e1/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
![Page 25: Speed is Essential for a Great Web Experience (oredev)](https://reader034.vdocuments.mx/reader034/viewer/2022051110/54b732c34a795912438b45e1/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)
![Page 26: Speed is Essential for a Great Web Experience (oredev)](https://reader034.vdocuments.mx/reader034/viewer/2022051110/54b732c34a795912438b45e1/html5/thumbnails/26.jpg)
Carlos Bueno (@archivd) https://vimeo.com/14439742
Visualising TCP
![Page 27: Speed is Essential for a Great Web Experience (oredev)](https://reader034.vdocuments.mx/reader034/viewer/2022051110/54b732c34a795912438b45e1/html5/thumbnails/27.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)
![Page 28: Speed is Essential for a Great Web Experience (oredev)](https://reader034.vdocuments.mx/reader034/viewer/2022051110/54b732c34a795912438b45e1/html5/thumbnails/28.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 29: Speed is Essential for a Great Web Experience (oredev)](https://reader034.vdocuments.mx/reader034/viewer/2022051110/54b732c34a795912438b45e1/html5/thumbnails/29.jpg)
Latency is Our Biggest Enemy
“In 2012, the average worldwide RTT to Google is still ~100ms, and ~50-60ms within the US.”
http://www.igvita.com/2012/07/19/latency-the-new-web-performance-bottleneck/
“we are looking at 100-1000ms RTT range on mobile”
Ilya Grigorik
![Page 30: Speed is Essential for a Great Web Experience (oredev)](https://reader034.vdocuments.mx/reader034/viewer/2022051110/54b732c34a795912438b45e1/html5/thumbnails/30.jpg)
3G Radio Resource Control
http://web.eecs.umich.edu/~fengqian/paper/3g_imc10.pdf
IDLE CELL_FACH
CELL_DCH Idle for 5s
Idle for 12s
1-2s delay!
Exact timings vary and depend on carrier NOT device
1s delay
![Page 31: Speed is Essential for a Great Web Experience (oredev)](https://reader034.vdocuments.mx/reader034/viewer/2022051110/54b732c34a795912438b45e1/html5/thumbnails/31.jpg)
Going Faster…
http://www.flickr.com/photos/mikebaird/2464769129/
![Page 32: Speed is Essential for a Great Web Experience (oredev)](https://reader034.vdocuments.mx/reader034/viewer/2022051110/54b732c34a795912438b45e1/html5/thumbnails/32.jpg)
Speeding Things Up - Some Basics
★ Compress★ Minify★ Reduce Requests★ Cache★ HTTP Keep-Alive★ Use a CDN?
![Page 33: Speed is Essential for a Great Web Experience (oredev)](https://reader034.vdocuments.mx/reader034/viewer/2022051110/54b732c34a795912438b45e1/html5/thumbnails/33.jpg)
What’s the web made of?
ImagesScriptsStylesheetsHTMLFlashOther
Composition of ‘average’ web page via httparchive.org
![Page 34: Speed is Essential for a Great Web Experience (oredev)](https://reader034.vdocuments.mx/reader034/viewer/2022051110/54b732c34a795912438b45e1/html5/thumbnails/34.jpg)
JPEG PNG GIF
Bitmapped Images
Optimise, Optimise, Optimise! (jpegmini, pngmini, Smush.it, ImageOptim, Gifsicle etc.)
![Page 35: Speed is Essential for a Great Web Experience (oredev)](https://reader034.vdocuments.mx/reader034/viewer/2022051110/54b732c34a795912438b45e1/html5/thumbnails/35.jpg)
New Devices, New Challenges...
2 x Resolution = 4 x Pixels!
http://www.flickr.com/photos/roopaw/6985954465
![Page 36: Speed is Essential for a Great Web Experience (oredev)](https://reader034.vdocuments.mx/reader034/viewer/2022051110/54b732c34a795912438b45e1/html5/thumbnails/36.jpg)
CSS SVG Fonts
Some Alternatives
Bitmaps still a challenge but interesting experiments around
![Page 37: Speed is Essential for a Great Web Experience (oredev)](https://reader034.vdocuments.mx/reader034/viewer/2022051110/54b732c34a795912438b45e1/html5/thumbnails/37.jpg)
It’s no longer a desktop world
http://www.flickr.com/photos/adactio/6960610178
![Page 38: Speed is Essential for a Great Web Experience (oredev)](https://reader034.vdocuments.mx/reader034/viewer/2022051110/54b732c34a795912438b45e1/html5/thumbnails/38.jpg)
Go “Mobile First” for Responsive Designs
http://seesparkbox.com
![Page 39: Speed is Essential for a Great Web Experience (oredev)](https://reader034.vdocuments.mx/reader034/viewer/2022051110/54b732c34a795912438b45e1/html5/thumbnails/39.jpg)
Standards support (picture? srcset?) is coming but unclear when!
Meanwhile services such as sencha.io, resrc.it and JS libraries -picturefill.js, foresight.js can help.
Use “Right-sized” Images
http://www.flickr.com/photos/emzee/139794246
![Page 40: Speed is Essential for a Great Web Experience (oredev)](https://reader034.vdocuments.mx/reader034/viewer/2022051110/54b732c34a795912438b45e1/html5/thumbnails/40.jpg)
Minimise browser blocking...
http://www.flickr.com/photos/barteko/6128499314
![Page 41: Speed is Essential for a Great Web Experience (oredev)](https://reader034.vdocuments.mx/reader034/viewer/2022051110/54b732c34a795912438b45e1/html5/thumbnails/41.jpg)
Parallel Downloads
news.bbcimg.co.uk
static.bbc.co.uk
Domain Sharding increases number of parallel downloads but…
…more connections may not be a good idea on mobile…may also interfere with multiplexing in protocols like SPDY
![Page 42: Speed is Essential for a Great Web Experience (oredev)](https://reader034.vdocuments.mx/reader034/viewer/2022051110/54b732c34a795912438b45e1/html5/thumbnails/42.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
* Depends on size and whether major / minor breakpoints used
![Page 43: Speed is Essential for a Great Web Experience (oredev)](https://reader034.vdocuments.mx/reader034/viewer/2022051110/54b732c34a795912438b45e1/html5/thumbnails/43.jpg)
. . .
<script src="restofscript.js"></script>
</body></html> One file or many?
(Depends on size)
Load remaining Javascript late as possible
Script loaders can help but scripts aren’t discoverable by pre-fetcher
![Page 44: Speed is Essential for a Great Web Experience (oredev)](https://reader034.vdocuments.mx/reader034/viewer/2022051110/54b732c34a795912438b45e1/html5/thumbnails/44.jpg)
The Script Tag
<script src=″…″></script>
Until the script has executed, the rendering of all elements below is blocked!
![Page 45: Speed is Essential for a Great Web Experience (oredev)](https://reader034.vdocuments.mx/reader034/viewer/2022051110/54b732c34a795912438b45e1/html5/thumbnails/45.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).”
![Page 46: Speed is Essential for a Great Web Experience (oredev)](https://reader034.vdocuments.mx/reader034/viewer/2022051110/54b732c34a795912438b45e1/html5/thumbnails/46.jpg)
http://bit.ly/Ncy7Rd
Impact on The Telegraph…
Same issue affected many other sites
![Page 47: Speed is Essential for a Great Web Experience (oredev)](https://reader034.vdocuments.mx/reader034/viewer/2022051110/54b732c34a795912438b45e1/html5/thumbnails/47.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>
Or use a script loader - labjs, requirejs, yepnope etc.
![Page 48: Speed is Essential for a Great Web Experience (oredev)](https://reader034.vdocuments.mx/reader034/viewer/2022051110/54b732c34a795912438b45e1/html5/thumbnails/48.jpg)
Lots of factors to think about...
http://www.flickr.com/photos/corneveaux/3248566797
![Page 49: Speed is Essential for a Great Web Experience (oredev)](https://reader034.vdocuments.mx/reader034/viewer/2022051110/54b732c34a795912438b45e1/html5/thumbnails/49.jpg)
http://www.flickr.com/photos/simeon_barkas/2557059247
Don’t have to do it all by hand
![Page 50: Speed is Essential for a Great Web Experience (oredev)](https://reader034.vdocuments.mx/reader034/viewer/2022051110/54b732c34a795912438b45e1/html5/thumbnails/50.jpg)
Measure
AnalyseOptimise
Performance isn’t just for Christmas
![Page 51: Speed is Essential for a Great Web Experience (oredev)](https://reader034.vdocuments.mx/reader034/viewer/2022051110/54b732c34a795912438b45e1/html5/thumbnails/51.jpg)
http://www.flickr.com/photos/safari_vacation/5961260280
Measure Impact on Business Goals
![Page 52: Speed is Essential for a Great Web Experience (oredev)](https://reader034.vdocuments.mx/reader034/viewer/2022051110/54b732c34a795912438b45e1/html5/thumbnails/52.jpg)
http://www.flickr.com/photos/jurvetson/6212582593
![Page 53: Speed is Essential for a Great Web Experience (oredev)](https://reader034.vdocuments.mx/reader034/viewer/2022051110/54b732c34a795912438b45e1/html5/thumbnails/53.jpg)
http://www.flickr.com/photos/auntiep/5024494612
@andydavies
http://www.slideshare.net/andydavies
![Page 54: Speed is Essential for a Great Web Experience (oredev)](https://reader034.vdocuments.mx/reader034/viewer/2022051110/54b732c34a795912438b45e1/html5/thumbnails/54.jpg)
Credits
All photographs copyright original owners on flickr.com
Following pictograms courtesy of The Noun Project