Web experience
description
Transcript of Web experience
![Page 1: Web experience](https://reader035.fdocuments.in/reader035/viewer/2022070501/568bf0a51a28ab8933906067/html5/thumbnails/1.jpg)
http://www.flickr.com/photos/dex1138/7879381800
Speed is Essential for a Great Web Experience
@andydavies
#oredevNov 2012
![Page 2: Web experience](https://reader035.fdocuments.in/reader035/viewer/2022070501/568bf0a51a28ab8933906067/html5/thumbnails/2.jpg)
http://www.flickr.com/photos/randomidea/247994072
Performance isn’t always a priority
![Page 3: Web experience](https://reader035.fdocuments.in/reader035/viewer/2022070501/568bf0a51a28ab8933906067/html5/thumbnails/3.jpg)
http://www.flickr.com/photos/kindofindie/4099768084
“Has it loaded yet?”
![Page 4: Web experience](https://reader035.fdocuments.in/reader035/viewer/2022070501/568bf0a51a28ab8933906067/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: Web experience](https://reader035.fdocuments.in/reader035/viewer/2022070501/568bf0a51a28ab8933906067/html5/thumbnails/5.jpg)
“50% more concentration when using badly performing web sites”
Foviance
http://www.flickr.com/photos/yourdon/3366991042
![Page 6: Web experience](https://reader035.fdocuments.in/reader035/viewer/2022070501/568bf0a51a28ab8933906067/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: Web experience](https://reader035.fdocuments.in/reader035/viewer/2022070501/568bf0a51a28ab8933906067/html5/thumbnails/7.jpg)
Bing did some experiments
+1s - 2.8%
+1s$/
![Page 8: Web experience](https://reader035.fdocuments.in/reader035/viewer/2022070501/568bf0a51a28ab8933906067/html5/thumbnails/8.jpg)
Wallmart made some improvements
-1s +2%
![Page 9: Web experience](https://reader035.fdocuments.in/reader035/viewer/2022070501/568bf0a51a28ab8933906067/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: Web experience](https://reader035.fdocuments.in/reader035/viewer/2022070501/568bf0a51a28ab8933906067/html5/thumbnails/10.jpg)
Measuring page load time...
http://www.flickr.com/photos/wwarby/7109538317
![Page 11: Web experience](https://reader035.fdocuments.in/reader035/viewer/2022070501/568bf0a51a28ab8933906067/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: Web experience](https://reader035.fdocuments.in/reader035/viewer/2022070501/568bf0a51a28ab8933906067/html5/thumbnails/12.jpg)
Navigation Timing Data in Google Analytics
Text
Other Real User Monitoring tools available
![Page 13: Web experience](https://reader035.fdocuments.in/reader035/viewer/2022070501/568bf0a51a28ab8933906067/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: Web experience](https://reader035.fdocuments.in/reader035/viewer/2022070501/568bf0a51a28ab8933906067/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: Web experience](https://reader035.fdocuments.in/reader035/viewer/2022070501/568bf0a51a28ab8933906067/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: Web experience](https://reader035.fdocuments.in/reader035/viewer/2022070501/568bf0a51a28ab8933906067/html5/thumbnails/16.jpg)
http://www.flickr.com/photos/arnybo/2679622216
Examining the detail...
![Page 17: Web experience](https://reader035.fdocuments.in/reader035/viewer/2022070501/568bf0a51a28ab8933906067/html5/thumbnails/17.jpg)
Browser Plugins
YSlow PageSpeed
![Page 18: Web experience](https://reader035.fdocuments.in/reader035/viewer/2022070501/568bf0a51a28ab8933906067/html5/thumbnails/18.jpg)
webpagetest.org
![Page 19: Web experience](https://reader035.fdocuments.in/reader035/viewer/2022070501/568bf0a51a28ab8933906067/html5/thumbnails/19.jpg)
Waterfall for bbc.co.uk/news
![Page 20: Web experience](https://reader035.fdocuments.in/reader035/viewer/2022070501/568bf0a51a28ab8933906067/html5/thumbnails/20.jpg)
mobitest.akamai.com
Alternatively, could use Chrome / Safari remote debugging to generate HAR
![Page 21: Web experience](https://reader035.fdocuments.in/reader035/viewer/2022070501/568bf0a51a28ab8933906067/html5/thumbnails/21.jpg)
Bigger, Faster Servers?
http://www.flickr.com/photos/getbutterfly/6317955134
![Page 22: Web experience](https://reader035.fdocuments.in/reader035/viewer/2022070501/568bf0a51a28ab8933906067/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: Web experience](https://reader035.fdocuments.in/reader035/viewer/2022070501/568bf0a51a28ab8933906067/html5/thumbnails/23.jpg)
But don’t forget to fix slow server responses
4 seconds!
![Page 24: Web experience](https://reader035.fdocuments.in/reader035/viewer/2022070501/568bf0a51a28ab8933906067/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: Web experience](https://reader035.fdocuments.in/reader035/viewer/2022070501/568bf0a51a28ab8933906067/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: Web experience](https://reader035.fdocuments.in/reader035/viewer/2022070501/568bf0a51a28ab8933906067/html5/thumbnails/26.jpg)
Carlos Bueno (@archivd) https://vimeo.com/14439742
Visualising TCP
![Page 27: Web experience](https://reader035.fdocuments.in/reader035/viewer/2022070501/568bf0a51a28ab8933906067/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: Web experience](https://reader035.fdocuments.in/reader035/viewer/2022070501/568bf0a51a28ab8933906067/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: Web experience](https://reader035.fdocuments.in/reader035/viewer/2022070501/568bf0a51a28ab8933906067/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: Web experience](https://reader035.fdocuments.in/reader035/viewer/2022070501/568bf0a51a28ab8933906067/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: Web experience](https://reader035.fdocuments.in/reader035/viewer/2022070501/568bf0a51a28ab8933906067/html5/thumbnails/31.jpg)
Going Faster…
http://www.flickr.com/photos/mikebaird/2464769129/
![Page 32: Web experience](https://reader035.fdocuments.in/reader035/viewer/2022070501/568bf0a51a28ab8933906067/html5/thumbnails/32.jpg)
Speeding Things Up - Some Basics
★ Compress★ Minify★ Reduce Requests★ Cache★ HTTP Keep-Alive★ Use a CDN?
![Page 33: Web experience](https://reader035.fdocuments.in/reader035/viewer/2022070501/568bf0a51a28ab8933906067/html5/thumbnails/33.jpg)
What’s the web made of?
ImagesScriptsStylesheetsHTMLFlashOther
Composition of ‘average’ web page via httparchive.org
![Page 34: Web experience](https://reader035.fdocuments.in/reader035/viewer/2022070501/568bf0a51a28ab8933906067/html5/thumbnails/34.jpg)
JPEG PNG GIF
Bitmapped Images
Optimise, Optimise, Optimise! (jpegmini, pngmini, Smush.it, ImageOptim, Gifsicle etc.)
![Page 35: Web experience](https://reader035.fdocuments.in/reader035/viewer/2022070501/568bf0a51a28ab8933906067/html5/thumbnails/35.jpg)
New Devices, New Challenges...
2 x Resolution = 4 x Pixels!
http://www.flickr.com/photos/roopaw/6985954465
![Page 36: Web experience](https://reader035.fdocuments.in/reader035/viewer/2022070501/568bf0a51a28ab8933906067/html5/thumbnails/36.jpg)
CSS SVG Fonts
Some Alternatives
Bitmaps still a challenge but interesting experiments around
![Page 37: Web experience](https://reader035.fdocuments.in/reader035/viewer/2022070501/568bf0a51a28ab8933906067/html5/thumbnails/37.jpg)
It’s no longer a desktop world
http://www.flickr.com/photos/adactio/6960610178
![Page 38: Web experience](https://reader035.fdocuments.in/reader035/viewer/2022070501/568bf0a51a28ab8933906067/html5/thumbnails/38.jpg)
Go “Mobile First” for Responsive Designs
http://seesparkbox.com
![Page 39: Web experience](https://reader035.fdocuments.in/reader035/viewer/2022070501/568bf0a51a28ab8933906067/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: Web experience](https://reader035.fdocuments.in/reader035/viewer/2022070501/568bf0a51a28ab8933906067/html5/thumbnails/40.jpg)
Minimise browser blocking...
http://www.flickr.com/photos/barteko/6128499314
![Page 41: Web experience](https://reader035.fdocuments.in/reader035/viewer/2022070501/568bf0a51a28ab8933906067/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: Web experience](https://reader035.fdocuments.in/reader035/viewer/2022070501/568bf0a51a28ab8933906067/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: Web experience](https://reader035.fdocuments.in/reader035/viewer/2022070501/568bf0a51a28ab8933906067/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: Web experience](https://reader035.fdocuments.in/reader035/viewer/2022070501/568bf0a51a28ab8933906067/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: Web experience](https://reader035.fdocuments.in/reader035/viewer/2022070501/568bf0a51a28ab8933906067/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: Web experience](https://reader035.fdocuments.in/reader035/viewer/2022070501/568bf0a51a28ab8933906067/html5/thumbnails/46.jpg)
http://bit.ly/Ncy7Rd
Impact on The Telegraph…
Same issue affected many other sites
![Page 47: Web experience](https://reader035.fdocuments.in/reader035/viewer/2022070501/568bf0a51a28ab8933906067/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: Web experience](https://reader035.fdocuments.in/reader035/viewer/2022070501/568bf0a51a28ab8933906067/html5/thumbnails/48.jpg)
Lots of factors to think about...
http://www.flickr.com/photos/corneveaux/3248566797
![Page 49: Web experience](https://reader035.fdocuments.in/reader035/viewer/2022070501/568bf0a51a28ab8933906067/html5/thumbnails/49.jpg)
http://www.flickr.com/photos/simeon_barkas/2557059247
Don’t have to do it all by hand
![Page 50: Web experience](https://reader035.fdocuments.in/reader035/viewer/2022070501/568bf0a51a28ab8933906067/html5/thumbnails/50.jpg)
Measure
AnalyseOptimise
Performance isn’t just for Christmas
![Page 51: Web experience](https://reader035.fdocuments.in/reader035/viewer/2022070501/568bf0a51a28ab8933906067/html5/thumbnails/51.jpg)
http://www.flickr.com/photos/safari_vacation/5961260280
Measure Impact on Business Goals
![Page 52: Web experience](https://reader035.fdocuments.in/reader035/viewer/2022070501/568bf0a51a28ab8933906067/html5/thumbnails/52.jpg)
http://www.flickr.com/photos/jurvetson/6212582593
![Page 53: Web experience](https://reader035.fdocuments.in/reader035/viewer/2022070501/568bf0a51a28ab8933906067/html5/thumbnails/53.jpg)
http://www.flickr.com/photos/auntiep/5024494612
@andydavies
http://www.slideshare.net/andydavies
![Page 54: Web experience](https://reader035.fdocuments.in/reader035/viewer/2022070501/568bf0a51a28ab8933906067/html5/thumbnails/54.jpg)
Credits
All photographs copyright original owners on flickr.com
Following pictograms courtesy of The Noun Project