web experience
DESCRIPTION
web promotion for every oneTRANSCRIPT
http://www.flickr.com/photos/dex1138/7879381800
Speed is Essential for a Great Web Experience
@andydavies
#oredevNov 2012
http://www.flickr.com/photos/randomidea/247994072
Performance isn’t always a priority
http://www.flickr.com/photos/kindofindie/4099768084
“Has it loaded yet?”
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
“50% more concentration when using badly performing web sites”
Foviance
http://www.flickr.com/photos/yourdon/3366991042
Abandonment rate over 200+ sites / 177+ million page views over 2 weeks - http://www.measureworks.nl / Gomez
Effect of delay on abandonment rate...
Bing did some experiments
+1s - 2.8%
+1s$/
Wallmart made some improvements
-1s +2%
Shopzilla cut page load time by 5 seconds!
http://velocityconf.com/velocity2009/public/schedule/detail/7709
$$$
+12% +25% -50%
Measuring page load time...
http://www.flickr.com/photos/wwarby/7109538317
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/
Navigation Timing Data in Google Analytics
Text
Other Real User Monitoring tools available
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
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
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
http://www.flickr.com/photos/arnybo/2679622216
Examining the detail...
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
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
But don’t forget to fix slow server responses
4 seconds!
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
“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)
Carlos Bueno (@archivd) https://vimeo.com/14439742
Visualising TCP
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)
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
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
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
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?
ImagesScriptsStylesheetsHTMLFlashOther
Composition of ‘average’ web page via httparchive.org
JPEG PNG GIF
Bitmapped Images
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
CSS SVG Fonts
Some Alternatives
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
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
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>
<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
. . .
<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
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
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).”
http://bit.ly/Ncy7Rd
Impact on The Telegraph…
Same issue affected many other sites
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
http://www.flickr.com/photos/simeon_barkas/2557059247
Don’t have to do it all by hand
Measure
AnalyseOptimise
Performance isn’t just for Christmas
http://www.flickr.com/photos/safari_vacation/5961260280
Measure Impact on Business Goals
http://www.flickr.com/photos/jurvetson/6212582593
http://www.flickr.com/photos/auntiep/5024494612
@andydavies
http://www.slideshare.net/andydavies
Credits
All photographs copyright original owners on flickr.com
Following pictograms courtesy of The Noun Project