Successfully reported this slideshow.
Your SlideShare is downloading. ×

Lazy Load '22 - Performance Mistakes - An HTTP Archive Deep Dive

Ad

Performance Mistakes
…an HTTP Archive Deep Dive
Performance Architect @Etsy
Paul Calvano
@paulcalvano

Ad

https://httparchive.org

Ad

3
How the HTTP Archive Works
● httparchive.org
○ Monthly trends
○ Discussion forum
○ Web Almanac
Chrome UX Report
~8.5 mil...

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Check these out next

1 of 31 Ad
1 of 31 Ad

Lazy Load '22 - Performance Mistakes - An HTTP Archive Deep Dive

Download to read offline

Web performance is a complicated topic, but over the years it’s become easier to articulate thanks to incredible advancements in performance features, their adoption in the browser ecosystem and tools that test and give insight into which techniques might speed up your site.

However, all too often a feature is implemented incorrectly, resulting in a lost opportunity for performance improvement. During this talk I’d like to explore a few common web performance techniques - some that you are likely already familiar with. We’ll dive into HTTP Archive data to find some examples of sites that are using them incorrectly, and explore the impact and potential benefits of fixing them.

https://webdirections.org/lazyload/speakers/paul-calvano.php

Web performance is a complicated topic, but over the years it’s become easier to articulate thanks to incredible advancements in performance features, their adoption in the browser ecosystem and tools that test and give insight into which techniques might speed up your site.

However, all too often a feature is implemented incorrectly, resulting in a lost opportunity for performance improvement. During this talk I’d like to explore a few common web performance techniques - some that you are likely already familiar with. We’ll dive into HTTP Archive data to find some examples of sites that are using them incorrectly, and explore the impact and potential benefits of fixing them.

https://webdirections.org/lazyload/speakers/paul-calvano.php

More Related Content

Lazy Load '22 - Performance Mistakes - An HTTP Archive Deep Dive

  1. 1. Performance Mistakes …an HTTP Archive Deep Dive Performance Architect @Etsy Paul Calvano @paulcalvano
  2. 2. https://httparchive.org
  3. 3. 3 How the HTTP Archive Works ● httparchive.org ○ Monthly trends ○ Discussion forum ○ Web Almanac Chrome UX Report ~8.5 million URLs
  4. 4. https://almanac.httparchive.org/ 4
  5. 5. <img src="example.jpg" loading="lazy" /> 5 https://web.dev/lazy-loading-images/
  6. 6. 6 https://caniuse.com/loading-lazy-attr
  7. 7. Source: https://almanac.httparchive.org/en/2021/media#lazy-loading
  8. 8. 8 https://web.dev/lcp-lazy-loading/
  9. 9. 9 https://almanac.httparchive.org/en/2021/performance#fig-20
  10. 10. 10 https://web.dev/lcp-lazy-loading/
  11. 11. 11 Source: HTTP Archive, April 2022 - Mobile 315,940 Sites failed the Lazy Loaded LCP audit Examples https://www.flipkart.com/ https://open.spotify.com/ https://ml.t-mobile.com/en/home https://store.playstation.com/ https://www.nba.com/
  12. 12. 12 https://almanac.httparchive.org/en/2021/resource-hints
  13. 13. 13 https://almanac.httparchive.org/en/2021/resource-hints
  14. 14. 14 dns–prefetch is used more often than preconnect. If you are using dns-prefetch and the domain is used to load content on the same page, use preconnect instead!
  15. 15. 15 <link rel="preconnect" href="//i.etsystatic.com" /> Why does this look like a dns-prefetch instead of a preconnect?
  16. 16. 16 https://w3c.github.io/resource-hints/
  17. 17. 17 Source: HTTP Archive, April 2022 9.7 Million Preconnect Headers 4.5 Million Preconnects in HTML 101K Missing crossorigin 2.8 Million Missing crossorigin These work fine. ¯_(ツ)_/¯ Many are blocked by CORS
  18. 18. Examples https://www.etsy.com/ https://www.ikea.com/ https://nypost.com/ https://www.chess.com/ https://www.tiktok.com/ https://www.dell.com/ https://www.realtor.com/ 18
  19. 19. 19 https://web.dev/preload-critical-assets/ <link rel="preload" as="font" href="/assets/Pacifo-Bold.woff2">
  20. 20. 20 430K Sites’ with Unused Preloads Examples https://www.washingtonpost.com/ https://www.amazon.com/ https://www.redfin.com/ https://www.wayfair.com/ https://tinder.com/ https://weather.com/ https://www.dailymail.co.uk/
  21. 21. 21 318 Unused Preloads
  22. 22. 22 https://almanac.httparchive.org/en/2021/compression
  23. 23. 23 https://almanac.httparchive.org/en/2021/compression
  24. 24. 24 https://almanac.httparchive.org/en/2021/compression
  25. 25. 25 http://nginx.org/en/docs/http/ngx_http_gzip_module.html NGINX’s default gzip compression level is 1 If you use NGINX, check your compression levels. If you make a change to your compression levels, you will also need to purge CDN caches, because they cache the compressed content you served.
  26. 26. 26 https://tools.paulcalvano.com/compression.php /smart/buttons Test Expected % Diff Uncompressed 373 KB 373 KB - Gzip Compressed 130 KB 99 KB 31% larger Brotli Compressed 152 KB 113 KB 35% larger
  27. 27. 27 https://tools.paulcalvano.com/compression.php
  28. 28. 28 226K Sites’ with >5 first party Images served compressed Examples https://www.costcotravel.com https://www.cricketwireless.com https://www.ryanair.com https://www.basspro.com https://support.apple.com
  29. 29. 29 ● Lazy Loading ○ Don’t lazy load above-the-fold images ○ Check Lighthouse audit for lazy loading LCP image ● Resource Hints ○ If using dns-prefetch for domains loaded on the same page, use preconnect instead. ○ Are your Preconnects are actually being used? Check the crossorigin attributes ○ Check the console to ensure you don’t have unused preloads ● Compression ○ Using NGINX? Check your gzip compression levels ○ Test your largest resource - are compression levels within expected ranges? ○ Avoid compressing binary responses such as images.
  30. 30. HTTP Archive Web Almanac
  31. 31. 31 Thanks! bit.ly/ha-slack Chat github.com/HTTPArchive Contribute discuss.httparchive.org Collaborate @paulcalvano paul@httparchive.org

×