Downloaded 40 times
Uploaded byPaul Calvano
Lazy Load '22 - Performance Mistakes - An HTTP Archive Deep Dive
The document discusses common performance mistakes in web development, based on data from the HTTP Archive. Key points include the importance of lazy loading images, using resource hints correctly, and ensuring optimal compression settings on servers like Nginx. The author provides specific examples of websites that exemplify these issues, highlighting the need for audits and improvements in performance practices.
More Related Content
![[BrightonSEO 2022] Unlocking the Hidden Potential of Product Listing Pages](https://cdn.slidesharecdn.com/ss_thumbnails/abuali-brightonseo2022slides-221003112121-157abb52-thumbnail.jpg?width=640&height=640&fit=bounds)
Similar to Lazy Load '22 - Performance Mistakes - An HTTP Archive Deep Dive
Lazy Load '22 - Performance Mistakes - An HTTP Archive Deep Dive
- 1. Performance Mistakes …an HTTPArchive Deep Dive Performance Architect @Etsy Paul Calvano @paulcalvano
- 2.
- 3. 3 How the HTTPArchive Works ● httparchive.org ○ Monthly trends ○ Discussion forum ○ Web Almanac Chrome UX Report ~8.5 million URLs
- 4.
- 5. <img src="example.jpg" loading="lazy"/> 5 https://web.dev/lazy-loading-images/
- 6.
- 7.
- 8.
- 9.
- 10.
- 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.
- 13.
- 14. 14 dns–prefetch is usedmore 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 <link rel="preconnect" href="//i.etsystatic.com"/> Why does this look like a dns-prefetch instead of a preconnect?
- 16.
- 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.
- 19. 19 https://web.dev/preload-critical-assets/ <link rel="preload" as="font"href="/assets/Pacifo-Bold.woff2">
- 20. 20 430K Sites’ with UnusedPreloads 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.
- 22.
- 23.
- 24.
- 25. 25 http://nginx.org/en/docs/http/ngx_http_gzip_module.html NGINX’s default gzipcompression 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 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.
- 28. 28 226K Sites’ with >5first 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 ● 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. HTTP Archive WebAlmanac
- 31.