Download to read offline
![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.](https://image.slidesharecdn.com/essentialforagreatwebexperience-ebriksinfotech-130111021047-phpapp02/85/Essential-for-a-great-web-experience-e-briks-infotech-47-320.jpg)
Essential for a great web experience e briks infotech
- 1. Speed is Essentialfor a Great Web Experience @andydavies #oredev Nov 2012 http://www.flickr.com/photos/dex1138/7879381800
- 2. Performance isn’t alwaysa priority http://www.flickr.com/photos/randomidea/247994072
- 3. “Has it loadedyet?” http://www.flickr.com/photos/kindofindie/4099768084
- 4. Our perception ofresponse 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
- 5. “50% more concentrationwhen using badly performing web sites” Foviance http://www.flickr.com/photos/yourdon/3366991042
- 6. Effect of delayon abandonment rate... Abandonment rate over 200+ sites / 177+ million page views over 2 weeks - http://www.measureworks.nl / Gomez
- 7. Bing did someexperiments +1s $/ - 2.8% +
- 8. Wallmart made someimprovements -1s +2%
- 9. Shopzilla cut pageload time by 5 seconds! +12% +25% -50% $$$ http://velocityconf.com/velocity2009/public/schedule/detail/7709
- 10. Measuring page loadtime... http://www.flickr.com/photos/wwarby/7109538317
- 11. W3C Navigation TimingAPI navigaAonStart, redirectStart, redirectEnd, fetchStart, domainLookupStart, domainLookupEnd, connectStart, (secureConnecAonStart), connectEnd, requestStart, responseStart, responseEnd, Prompt, App, for, redirect, DNS, TCP, Request, Response, Processing, onLoad, cache, unload, unload, loadEventEnd, loadEventStart, domComplete, domContentLoaded, domInteracAve, domLoading, unloadEnd, unloadStart, http://www.w3.org/TR/navigation-timing/
- 12. Navigation Timing Datain Google Analytics Text Other Real User Monitoring tools available
- 13. Example of RealUsers Experience 27% Visitors (%) 13% 8% 8% 6% 6% 3% 3% 2% 1% 1 2 3 4 5 6 7 8 9 10 Load Time (s)
- 14. Example of RealUsers Experience 27% 24% Visitors (%) 13% 8% 8% 6% 6% 3% 3% 2% 1% 1 2 3 4 5 6 7 8 9 10 > 10 Load Time (s)
- 15. Synthetic Monitoring 3 Response Time (s) 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
- 16. Examining the detail... http://www.flickr.com/photos/arnybo/2679622216
- 17. Browser Plugins YSlow PageSpeed
- 18.
- 19.
- 20. mobitest.akamai.com Alternatively, could use Chrome / Safari remote debugging to generate HAR
- 21. Bigger, Faster Servers? http://www.flickr.com/photos/getbutterfly/6317955134
- 22. Over 80% ofpage 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
- 23. But don’t forgetto fix slow server responses 4 seconds!
- 24. Bandwidth (often) isn’tthe 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)
- 25. “More Bandwidth Doesn’tMatter (much)” Mike Belshe 3.11s Page Load Time 1.95s 1.63s 1.50s 1.44s 1.41s 1.39s 1.38s 1.37s 1.36s 1 2 3 4 5 6 7 8 9 10 Bandwidth (Mbps)
- 26. Visualising TCP Carlos Bueno (@archivd) https://vimeo.com/14439742
- 27. 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)
- 28. Minimum round tripsto 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
- 29. Latency is OurBiggest 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/
- 30. 3G Radio ResourceControl 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
- 31. Going Faster… http://www.flickr.com/photos/mikebaird/2464769129/
- 32. Speeding Things Up- Some Basics ★ Compress ★ Minify ★ Reduce Requests ★ Cache ★ HTTP Keep-Alive ★ Use a CDN?
- 33. What’s the webmade of? Images Scripts Stylesheets HTML Flash Other Composition of ‘average’ web page via httparchive.org
- 34. Bitmapped Images JPEG PNG GIF Optimise, Optimise, Optimise! (jpegmini, pngmini, Smush.it, ImageOptim, Gifsicle etc.)
- 35. New Devices, NewChallenges... 2 x Resolution = 4 x Pixels! http://www.flickr.com/photos/roopaw/6985954465
- 36. Some Alternatives CSS SVG Fonts Bitmaps still a challenge but interesting experiments around
- 37. It’s no longera desktop world http://www.flickr.com/photos/adactio/6960610178
- 38. Go “Mobile First”for Responsive Designs http://seesparkbox.com
- 39. 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.
- 40. Minimise browser blocking... http://www.flickr.com/photos/barteko/6128499314
- 41. 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
- 42. 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
- 43. Load remaining Javascriptlate 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
- 44. The Script Tag <script src=″…″></script> Until the script has executed, the rendering of all elements below is blocked!
- 45. “Virgin Media BroadbandISP 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
- 46. Impact on TheTelegraph… Same issue affected many other sites http://bit.ly/Ncy7Rd
- 47. Load Third Partyscripts 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.
- 48. Lots of factorsto think about... http://www.flickr.com/photos/corneveaux/3248566797
- 49. Don’t have todo it all by hand http://www.flickr.com/photos/simeon_barkas/2557059247
- 50. Performance isn’t justfor Christmas Measure Optimise Analyse
- 51. Measure Impact onBusiness Goals http://www.flickr.com/photos/safari_vacation/5961260280
- 52.
- 53. @andydavies andy@asteno.com http://www.slideshare.net/andydavies http://www.flickr.com/photos/auntiep/5024494612
- 54. Credits All photographs copyrightoriginal owners on flickr.com Following pictograms courtesy of The Noun Project