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