Downloaded 169 times
![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>
async attribute may be option but not supported by IE & Opera](https://image.slidesharecdn.com/canvasconf-120907105924-phpapp02/75/Speed-is-Essential-for-a-Great-Web-Experience-Canvas-Conf-Version-40-2048.jpg)
Uploaded byAndy Davies
Speed is Essential for a Great Web Experience (Canvas Conf Version)
Speed is essential for a good user experience on the web. Research has shown that page load times over 1 second can negatively impact user behavior like concentration and abandonment rates. Factors that affect page load times include front-end code, images, third-party scripts, redirects, and HTTP requests. Key ways to improve performance include optimizing front-end code, compressing images, loading scripts asynchronously, minimizing redirects, caching resources, and measuring real user performance. The goal is to provide users with fast response times across all devices.
More Related Content
![[cssdevconf] Adaptive Images in Responsive Web Design](https://cdn.slidesharecdn.com/ss_thumbnails/adaptive-imagesv16-131021133151-phpapp01-thumbnail.jpg?width=640&height=640&fit=bounds)
![[wvbcn] Adaptive Images in Responsive Web Design](https://cdn.slidesharecdn.com/ss_thumbnails/adaptive-imagesv13v2-130629093334-phpapp01-thumbnail.jpg?width=640&height=640&fit=bounds)
Similar to Speed is Essential for a Great Web Experience (Canvas Conf Version)
![Client-side Web Performance Optimization [paper]](https://cdn.slidesharecdn.com/ss_thumbnails/2011-01-18jakob-schroeterclient-side-optimization-110125033543-phpapp02-thumbnail.jpg?width=640&height=640&fit=bounds)
![Governance, Deployment & Methodologies for Agentic Automation [2/3]](https://cdn.slidesharecdn.com/ss_thumbnails/agenticcommunityseries-day2-251112135038-a386476d-thumbnail.jpg?width=640&height=640&fit=bounds)
Speed is Essential for a Great Web Experience (Canvas Conf Version)
- 1. Speed is Essentialfor a Great Web Experience @andydavies #CanvasConf Sep 2012 http://www.flickr.com/photos/barkaway/342359810
- 2. But sometimes otherconcerns take priority... http://www.flickr.com/photos/randomidea/247994072
- 3. “Are we thereyet?” http://www.flickr.com/photos/sharynmorrow/643126727
- 4. Our perception ofresponse time Instant Seamless Yawn! 100ms 1s 10s 3s - Recommended 7s - Fortune 500 Load Time Average (2010) 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...
- 11. Measure Real Users’Experience 27% 24% of visitors 24% waited over 10s Visitors (%) 13% 8% 8% 6% 6% 3% 3% 2% 1% 1 2 3 4 5 6 7 8 9 10 > 10 Load Time (s)
- 12. Measuring Real Users- Google Analytics Relies on Navigation Timing API, can add extra timing calls to page
- 13. Measuring Real Users- LogNormal
- 14. Measuring Real Users- Torbit Insight
- 15. Measuring Real Users- New Relic
- 16.
- 17.
- 18.
- 19. Bigger, Faster Servers? http://www.flickr.com/photos/br1dotcom/4297736794
- 20. 80% plus 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.25 2.5 3.75 5 Measured on residential ADSL line using Chrome 19
- 21. Fix slow serverresponses first 4 seconds!
- 22. 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)
- 23. 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
- 24. Going Faster… http://www.flickr.com/photos/mikebaird/2464769129/
- 25. 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> * Bryan and Stephanie Rieger’s major and minor breakpoint approach requires multiple CSS files
- 26. Load remaining Javascriptlate as possible . . . <script src="restofscript.js"></script> </body> </html> One file or many? (Depends on size) Could you defer some JS until after onload?
- 27. Squash text basedcontent - gzip / minify http://www.flickr.com/photos/evdg/298415813
- 28. Images are 64%of an ‘average’ web page http://www.flickr.com/photos/zaprittsky/4520788183/
- 29. Bitmapped Images JPEG PNG GIF Optimise, Optimise, Optimise! (jpegmini, pngmini, Smush.it, ImageOptim, Gifsicle etc.)
- 30. New Devices, NewChallenges... 2 x Resolution = 4 x Pixels! http://www.flickr.com/photos/roopaw/6985954465
- 31. Some Alternatives CSS SVG Fonts Watch SVG - may not always be smaller than bitmap!
- 32. Re-use TCP Connectionsvia HTTP Keep-Alive Orange segments are TCP connections being (re-) opened
- 33. news.bbcimg.co.uk static.bbc.co.uk Increase number of parallel downloads
- 34. Sometimes... The Waterfallof Doom! 2 seconds! (nearly)
- 35. Reduce number ofHTTP requests
- 36. Cache resources thatdon’t change ‘often’ forever (use versions to replace) http://www.flickr.com/photos/sterlingely/64228609
- 37. Redirects - necessarybut waste time… Why 2 redirects? Expensive over mobile networks due to latency
- 38. The Perils ofThird Party Javascript... “Virgin Media Broadband ISP Users Affected by Website Routing Woes” ISP Review, May 26, 2012 cg-global.maxymiser.com unreachable
- 39. Impact on TheTelegraph… Same issue affected many other sites http://bit.ly/Ncy7Rd
- 40. 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> async attribute may be option but not supported by IE & Opera
- 41. Argh... My brainhurts! http://www.flickr.com/photos/corneveaux/3248566797
- 42. Don’t have todo it all by hand http://www.flickr.com/photos/simeon_barkas/2557059247
- 43. Performance isn’t justfor Christmas Measure Optimise Analyse
- 44.
- 45. @andydavies [email protected] http://www.slideshare.net/andydavies http://www.flickr.com/photos/auntiep/5024494612
- 46. Credits All photographs copyrightoriginal owners on flickr.com Following pictograms courtesy of The Noun Project