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

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

668 Aufrufe

Veröffentlicht am

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/

Veröffentlicht in: Internet
no profile picture user

  • Loggen Sie sich ein, um Kommentare anzuzeigen.

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

×