NY WebPerf Sept '22 - Performance Mistakes - An HTTP Archive Deep Dive
1 like716 views
The document analyzes performance mistakes in web development, highlighting issues such as the ineffective use of lazy loading, preconnect headers, and compression techniques. It uses data from the HTTP Archive to provide insights and examples of common pitfalls for web performance. Key recommendations include validating performance plugins and adjusting server settings for optimal resource delivery.
NY WebPerf Sept '22 - Performance Mistakes - An HTTP Archive Deep Dive
- 1. Performance Mistakes …an HTTP Archive Deep Dive Performance Architect @Etsy Paul Calvano @paulcalvano
- 3. 3 How the HTTP Archive Works ● httparchive.org ○ Monthly trends ○ Discussion forum ○ Web Almanac Chrome UX Report ~15 million URLs
- 5. <img src="example.jpg" loading="lazy" /> 5 https://web.dev/lazy-loading/
- 11. 11 Source: HTTP Archive, August 2022 - Mobile 614,649 Sites failed the Lazy Loaded LCP audit Examples https://www.etsy.com/ https://www.ikea.com/ https://ml.t-mobile.com/ https://www.chinatimes.com/ https://news.google.com/ https://www.spotify.com/ https://www.skysports.com/
- 12. 12 Source: HTTP Archive, August 2022 - Mobile <img data-listing-card-listing-image="" data-src="https://i.etsystatic.com/28954110/c/2325/1846/279/339/il/816107/3871829563…" class="wt-width-full wt-height-full wt-display-block wt-position-absolute loaded" alt="Custom Engraved Marble Wood Coasters | Round Marble Wooden Coaster Persona…" loading="lazy" src="https://i.etsystatic.com/28954110/c/2325/1846/279/339/il/816107/3871829563…" data-ll-status="loaded">
- 13. 13 Source: HTTP Archive, August 2022 - Mobile <img style="object-position: 47% 80%;" alt="Knut Hagberg and Marianne Hagberg carrying a LISABO table across a car par…" loading="lazy" srcset="https://www.ikea.com/global/en/images/Hagberg_start_008a6e757d.jpg?f=g 200…" src="https://www.ikea.com/global/en/images/Hagberg_start_008a6e757d.jpg?f=xl" sizes="(min-width: 768px) 920px, 94vw" class="svelte-1fkqlic"> <img class="tvs3Id QwxBBf" srcset="https://lh3.googleusercontent.com/proxy/76K5GlOX1TyqOPVvyItJAtQ5wr9iHdZVtk…" aria-label="Image" alt="" src="https://lh3.googleusercontent.com/proxy/76K5GlOX1TyqOPVvyItJAtQ5wr9iHdZVtk…" importance="high" jslog="131347" loading="lazy">
- 14. 14
- 16. 16 If you are using dns-prefetch and the domain is used to load content on the same page, use preconnect instead! HTML DNS TCP TLS HTTP request DNS TCP TLS DNS TCP TLS DNS Prefetch Preconnect HTTP request HTTP request
- 17. 17 <link rel="preconnect" href="//i.etsystatic.com" /> Why does this look like a dns-prefetch instead of a preconnect?
- 19. 19 Source: HTTP Archive, August 2022 18.1 Million Preconnect Headers 8.6 Million Preconnects in HTML 166K Missing crossorigin 4.4 Million Missing crossorigin These work fine. ¯_(ツ)_/¯ Many are blocked by CORS
- 21. 21 https://web.dev/preload-critical-assets/ <link rel="preload" as="font" href="/assets/Pacifo-Bold.woff2">
- 22. 22 567,523 Sites’ with Unused Preloads Examples https://www.redfin.com/ https://www.wayfair.com/ https://www.twitter.com/ https://bing.com https://www.nytimes.com/ https://www.washingtonpost.com/ https://www.dailymail.co.uk/
- 24. 24 https://blog.webpagetest.org/posts/removing-unused-preloads-on-festival-foods/
- 25. 25 https://blog.webpagetest.org/posts/removing-unused-preloads-on-festival-foods/
- 27. 27 370 Unused Preloaded Fonts https://www.dragonhall.co.uk https://www.voxnativa.org 617 Unused Preloaded Fonts
- 32. 32 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.
- 33. 33 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
- 35. 35 406K Sites’ with >5 first party Images served compressed Examples https://www.telegraph.co.uk https://www.costcotravel.com https://www.ryanair.com https://www.basspro.com https://support.apple.com
- 36. 36 1.08 Million Sites’ with first party fonts (woff and woff2) served compressed Examples https://www.petsmart.com https://www.etsy.com https://www.udemy.com https://www.discord.com https://peacocktv.com
- 37. 37
- 40. 40
- 41. 41 ● Lazy Loading ○ Don’t lazy load above-the-fold images ○ Check Lighthouse audit for lazy loading LCP image ● Resource Hints and Early 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. ● If you are using performance plugins, validate that they are doing what you expect.