Speed is Essential for a Great Web Experience @andydavies
#oredev Nov 2012 http://www.flickr.com/photos/dex1138/7879381800
Performance isn’t always a priority
http://www.flickr.com/photos/randomidea/247994072
“Has it loaded yet?”
http://www.flickr.com/photos/kindofindie/4099768084
Our perception of response time Instant Seamless
Yawn!
100ms 1s
10s
3s - Recommended Load Time
6.5s - Alexa 2000 Fall 2012
Response Time in Man-computer Conversational Transactions Robert B. Miller, 1968
“50% more concentration when using badly performing web sites� Foviance http://www.flickr.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... http://www.flickr.com/photos/wwarby/7109538317
W3C Navigation Timing API navigaAonStart, redirectStart, redirectEnd, fetchStart, domainLookupStart, domainLookupEnd, connectStart, (secureConnecAonStart), connectEnd, requestStart, responseStart, responseEnd, Prompt, for, unload,
redirect,
App, cache,
DNS,
TCP,
Request,
Response,
Processing,
onLoad,
unload,
loadEventEnd, loadEventStart, domComplete, domContentLoaded, domInteracAve, domLoading, unloadEnd, unloadStart,
http://www.w3.org/TR/navigation-timing/
Navigation Timing Data in Google Analytics
Text
Other Real User Monitoring tools available
Example of Real Users Experience
Visitors (%)
27%
13%
8%
8%
6%
6% 2%
1
2
3
4
5
6 Load Time (s)
7
3%
3% 1%
8
9
10
Example of Real Users Experience 27%
Visitors (%)
24%
13%
8%
8%
6%
6% 2%
1
2
3
4
5
6 Load Time (s)
7
3%
3% 1%
8
9
10
> 10
Synthetic Monitoring
Response Time (s)
3
2
1
0
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 September 2012
Examining the detail... http://www.flickr.com/photos/arnybo/2679622216
Browser Plugins
YSlow
PageSpeed
webpagetest.org
Waterfall for bbc.co.uk/news
mobitest.akamai.com
Alternatively, could use Chrome / Safari remote debugging to generate HAR
Bigger, Faster Servers? http://www.flickr.com/photos/getbutterfly/6317955134
Over 80% of page load time is on front-end Backend Frontend
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
Measured via residential ADSL line using Google Chrome
But don’t forget to fix slow server responses
4 seconds!
Bandwidth (often) isn’t the bottleneck
2.0 1.5 1.0 0.5 0s
5s
10s
news.bbc.co.uk tested via webpagetest.org throttled at 1.5Mbps (bursts over 1.5Mbps are artefact of testing)
“More Bandwidth Doesn’t Matter (much)” Mike Belshe
Page Load Time
3.11s
1.95s 1.63s
1
2
3
1.50s
1.44s
1.41s
1.39s
1.38s
1.37s
1.36s
4
5
6
7
8
9
10
Bandwidth (Mbps)
Visualising TCP
Carlos Bueno (@archivd) https://vimeo.com/14439742
Impact of Latency
Page Load Time (s)
4
3
2
1
0
20
40
60
80
100
120
140
Round Trip Time (ms)
160
180
200
220
240
Minimum round trips to download a file (TCP Segments)
285kB 214kB 143kB 71kB
Size 1
2
3
Round Trips
4
5
6
7
8
9
10
11
TCP and the Lower Bound of Web Performance John Rauser
Latency is Our Biggest Enemy
“In 2012, the average worldwide RTT to Google is still ~100ms, and ~50-60ms within the US.”
“we are looking at 100-1000ms RTT range on mobile” Ilya Grigorik
http://www.igvita.com/2012/07/19/latency-the-new-web-performance-bottleneck/
3G Radio Resource Control Idle for 12s IDLE
1-2s delay!
1s delay
CELL_DCH
CELL_FACH
Idle for 5s
Exact timings vary and depend on carrier NOT device http://web.eecs.umich.edu/~fengqian/paper/3g_imc10.pdf
Going Faster‌
http://www.flickr.com/photos/mikebaird/2464769129/
Speeding Things Up - Some Basics
★ ★ ★ ★ ★ ★
Compress Minify Reduce Requests Cache HTTP Keep-Alive Use a CDN?
What’s the web made of? Images Scripts Stylesheets HTML Flash Other
Composition of ‘average’ web page via httparchive.org
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.flickr.com/photos/roopaw/6985954465
Some Alternatives
CSS
SVG
Fonts
Bitmaps still a challenge but interesting experiments around
It’s no longer a desktop world
http://www.flickr.com/photos/adactio/6960610178
Go “Mobile First” for Responsive Designs
http://seesparkbox.com
Use “Right-sized� Images
http://www.flickr.com/photos/emzee/139794246
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.
Minimise browser blocking...
http://www.flickr.com/photos/barteko/6128499314
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
Get the <head> straight <!doctype html> <html> <head> <meta charset="utf-8"> <title>This is my title<title>
CSS before JS Ideally one file*
<link rel="stylesheet" href="styles.css" type="text/css" /> <script src="script.js"></script> . . .
Only JS needed during page load
</head> * Depends on size and whether major / minor breakpoints used
Load remaining Javascript late as possible
. . . <script src="restofscript.js"></script> </body> </html>
One file or many? (Depends on size)
Script loaders can help but scripts arenâ&#x20AC;&#x2122;t discoverable by pre-fetcher
The Script Tag
<script src=″…″></script>
Until the script has executed, the rendering of all elements below is blocked!
“Virgin Media Broadband ISP Users Affected by Website Routing Woes” ISP Review, May 26, 2012
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).”
http://www.ispreview.co.uk/index.php/2012/05/uk-virgin-media-broadband-isp-users-affected-by-website-routing-woes.html
Impact on The Telegraphâ&#x20AC;Ś
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>
Or use a script loader - labjs, requirejs, yepnope etc.
Lots of factors to think about... http://www.flickr.com/photos/corneveaux/3248566797
Donâ&#x20AC;&#x2122;t have to do it all by hand http://www.flickr.com/photos/simeon_barkas/2557059247
Performance isnâ&#x20AC;&#x2122;t just for Christmas Measure
Optimise
Analyse
Measure Impact on Business Goals
http://www.flickr.com/photos/safari_vacation/5961260280
http://www.flickr.com/photos/jurvetson/6212582593
@andydavies andy@asteno.com http://www.slideshare.net/andydavies
http://www.flickr.com/photos/auntiep/5024494612
Credits All photographs copyright original owners on flickr.com Following pictograms courtesy of The Noun Project