Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Web Unleashed '19 - Measuring the Adoption of Web Performance Techniques

388 views

Published on

Performance optimization is a cyclical process. We are constantly learning new ways to optimize, while simultaneously adopting new technologies and techniques that negatively impact performance. The HTTP Archive provides a great historical record of the technical side of the web, with almost 10 years of history and an ever growing dataset of sites.

During this session Paul will provide a brief overview of the HTTP Archive and then dive into some insights into the adoption of common web performance techniques and some of their measurable impacts.

https://fitc.ca/presentation/measuring-the-adoption-of-web-performance-techniques/

Published in: Internet
  • Be the first to comment

Web Unleashed '19 - Measuring the Adoption of Web Performance Techniques

  1. 1. ©2019 AKAMAI Measuring the Adoption of Web Performance Techniques Paul Calvano Principal Web Performance Architect @paulcalvano
  2. 2. 2
  3. 3. 3
  4. 4. 4 https://gs.statcounter.com/platform-market-share/desktop-mobile-tablet/worldwide/#monthly-200901-201907
  5. 5. 5
  6. 6. 6 https://discuss.httparchive.org/t/analyzing-lighthouse-scores-across-the-web/1600
  7. 7. 7
  8. 8. 8
  9. 9. 9 Google BigQuery 5.3 Million Websites!
  10. 10. 10 https://stevesouders.com/hpws/rules.php 2008!
  11. 11. 11 https://developers.google.com/speed/pagespeed/insights/
  12. 12. 12
  13. 13. 13
  14. 14. 14
  15. 15. 15 > 150 Offscreen Images!
  16. 16. 16 Off Screen Images https://discuss.httparchive.org/t/chrome-image-lazy-loading-sites-already-using-it-on-week-1/1707
  17. 17. 17 Off Screen Images https://discuss.httparchive.org/t/chrome-image-lazy-loading-sites-already-using-it-on-week-1/1707
  18. 18. 18 https://web.dev/native-lazy-loading
  19. 19. 19 https://twitter.com/TimVereecke/status/1169880348651446272
  20. 20. 20 MORE THAN 80% OF SITES CAN BENEFIT FROM IMAGE OPTIMIZATION ! > 1MB Potential Savings: 862K websites! https://developers.google.com/web/tools/lighthouse/audits/optimize-images
  21. 21. 21 ©2019 AKAMAI Choosing the Right Image Format https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/image-optimization
  22. 22. 22 V65+ Edge v18+ 1% of Chrome Image Requests 45% of Chrome Image Requests
  23. 23. 23 Responsive Images served by 65% of sites. https://developers.google.com/web/tools/lighthouse/audits/oversized-images Image Source: https://en.wikaipedia.org/wiki/File:Responsive_design_-_Commons_Android_app.jpg
  24. 24. 24 ©2019 AKAMAI Why is Compression Important?
  25. 25. 25 ©2019 AKAMAI Mary had a little lamb - Gzip Compression Version! Original: 954 Bytes Gzip: 372 bytes Savings: 61%
  26. 26. How well are we compressing text assets? Only 43% of HTML responses are compressed
  27. 27. 27
  28. 28. 28 Higher Compression levels Are Expensive … But Have the Highest Compressio Ratios
  29. 29. 29https://paulcalvano.com/index.php/2018/07/25/brotli-compression-how-much-will-it-reduce-your-content/
  30. 30. 30 Bundle all your assets! Don’t bundle Serve only what’s needed! Image Source: https://pixabay.com/photos/puppy-tug-o-war-lab-1647692/
  31. 31. 31 48% of sites have more than 100KB Unused CSS Unused CSS and JavaScript incurs a processing cost
  32. 32. 32 https://v8.dev/blog/cost-of-javascript-2019
  33. 33. 33 https://httparchive.org/reports/state-of-javascript#bytesJs
  34. 34. 34
  35. 35. 35 4 Critical Domains 3 Possible Single Points of Failure
  36. 36. 36
  37. 37. 37 https://hpbn.co/primer-on-latency-and-bandwidth/
  38. 38. 38 No CDN? Where is the Content Served From? 48% of requests were served without a content delivery network.
  39. 39. 39 https://speakerdeck.com/csswizardry/more-than-you-ever-wanted-to-know-about-resource-hints <link rel="dns-prefetch" href="..." /> <link rel="preconnect" href="..." /> <link rel="prefetch" href="..." /> <link rel="prerender" href="..." /> <link rel="preload" href="..." />
  40. 40. 40 3rd Party Protocol Overhead <link rel="dns-prefetch" href="..." /> <link rel="preconnect" href="..." />
  41. 41. 41 ● Performs DNS Lookup in advance of an HTTP request ● Implemented in HTTP Response Header: 1,775 websites ● Implemented in HTML Body: 1,620,685 websites <link rel="dns-prefetch" href="..." /> ● DNS + TCP + TLS in advance of an HTTP request ● Implemented in HTTP Response Header: 2,938,935 websites ● Implemented in HTML Body: 343,528 websites <link rel="preconnect" href="..." /> Recommended
  42. 42. 42 Are Domain Sharding & Cookieless Domains Necessary?
  43. 43. 43 Connection Overhead for Sharded Hosts
  44. 44. ©2015 AKAMAI | FASTER FORWARDTM The fastest request is the one you don’t have to make.
  45. 45. 45 Cacheabilty based on Cache-Control Header - HTTP Archive, Mobile, August 2019 https://discuss.httparchive.org/t/what-percentage-of-third-party-content-is-cacheable/1614 How Cacheable is Web Content?
  46. 46. 46 https://discuss.httparchive.org/t/analyzing-resource-age-by-content-type/1659
  47. 47. 47 https://developers.google.com/web/tools/lighthouse/audits/cache-policy
  48. 48. 48 https://almanac.httparchive.org/
  49. 49. ©2018 AKAMAIbit.ly/ha-slack Chat github.com/HTTPArchive Contribute discuss.httparchive.org Collaborate HTTP Archive Guided Tour https://bit.ly/2JmDnSH
  50. 50. 50 Q&A @paulcalvano

×