SlideShare uses cookies to improve functionality and performance, and to provide you with relevant advertising. If you continue browsing the site, you agree to the use of cookies on this website. See our User Agreement and Privacy Policy.
SlideShare uses cookies to improve functionality and performance, and to provide you with relevant advertising. If you continue browsing the site, you agree to the use of cookies on this website. See our Privacy Policy and User Agreement for details.
Successfully reported this slideshow.
Activate your 14 day free trial to unlock unlimited reading.
Speed is Essential for a Great Web Experience (oredev)
Our perception of response time
Instant Seamless Yawn! 100ms 1s 10s 3s - Recommended 6.5s - Alexa 2000 Load Time Fall 2012 Response Time in Man-computer Conversational Transactions Robert B. Miller, 1968
Over 80% of page load
time is on front-end Backend news.bbc.co.uk Frontend 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
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)
Impact of Latency 4 3
Page Load Time (s) 2 1 0 20 40 60 80 100 120 140 160 180 200 220 240 Round Trip Time (ms)
Minimum round trips to download
a file (TCP Segments) 285kB 214kB 143kB 71kB Size 1 2 3 4 5 6 7 8 9 10 11 Round Trips 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 CELL_FACH 1s delay 1-2s delay! CELL_DCH Idle for 5s Exact timings vary and depend on carrier NOT device http://web.eecs.umich.edu/~fengqian/paper/3g_imc10.pdf
Get the <head> straight <!doctype
html> <html> <head> CSS before JS <meta charset="utf-8"> Ideally one file* <title>This is my title<title> <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’t discoverable by pre-fetcher
“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
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.