The document outlines 17 common performance mistakes found in web development, specifically related to image loading and resource management. Key issues include improper lazy loading of images, missing crossorigin attributes in preconnects, and inadequate compression on third-party assets. It emphasizes the importance of monitoring and optimizing performance to enhance user experience on websites.

1. Performance Mistakes
…an HTTP Archive Deep Dive
Performance Architect @ Etsy
Paul Calvano
https://bsky.app/profile/paulcalvano.bsky.social
https://www.linkedin.com/in/paulcalvano/
https://webperf.social/@paulcalvano

2. 17
Common Mistakes

6. https://httparchive.org

7. https://almanac.httparchive.org/

8. <img src="example.jpg" loading="lazy" />
https://web.dev/lazy-loading-images/

11. https://web.dev/lcp-lazy-loading/

12. Source: HTTP Archive, October 2024 - Mobile
731K
Sites Failed the Lazy
Loaded LCP
lighthouse audit
~4%
Regardless of
popularity

13. 1. Lazy Loading LCP Images
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
1. Lazy Loading LCP Images

14. https://x.com/csswizardry/status/1714697877245632832
189K
Sites are doing this!

15. fetchpriority="high"
loading="lazy"
decoding="async"

16. 1. Lazy Loading LCP Images
2. Lazy Loading High Priority Images
3. Async Decoding for High Priority Images
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
__________________________________
2. Lazy Loading High Priority Images
3. Async Decoding for High Priority Images
______________________________________________________
Correction - this isn’t a mistake after all. Thanks Barry Pollard!
https://www.tunetheweb.com/blog/what-does-the-image-decoding-attribute-actually-do/

19. <link rel="preconnect"
href="https://example.com" crossorigin />

20. Use Preconnect for a domain
used on the same page.
Otherwise use Dns-Prefetch
Document Request
Preconnect from
Response Header
Default
DNS Prefetch
Preconnect from
Response Body
DNS
TCP
TLS
HTTP
Preconnect via
Early Hints
If the domain is needed
early in the page, the
Preconnect should occur
earlier.

21. <link rel="preconnect" href="//i.etsystatic.com" />
This looks like a dns-prefetch!

22. https://w3c.github.io/resource-hints/

23. Source: HTTP Archive, October 2024
9.2 Million
Preconnects in HTML
4.6 Million
Missing crossorigin
Many are blocked by CORS

24. 1. Lazy Loading LCP Images
2. Lazy Loading High Priority Images
3. Async Decoding for High Priority Images
4. Preconnect with missing crossorigin
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
__________________________________
4. Preconnect with missing crossorigin

25. <link rel="preload"
href="/fonts/opensans.woff2"
as="font" />

26. Preload from
Early Hint
Document Request
Default
Preload from
Response Body
Preload from
Response Header
DNS
TCP
TLS
HTTP
Preload if you need the
request to load early on the
current page.
Avoid preloading too much.
Preloading will delay other
high priority resources.

27. 2.4 Million
Sites using Preload
Source: HTTP Archive, October 2024

28. 34,553
Preload > 20
requests
48,203
Preload > 1MB of
content
1,163
Preload Video
137,997
Preload Multiple
Images
Source: HTTP Archive, October 2024

29. 1. Lazy Loading LCP Images
2. Lazy Loading High Priority Images
3. Async Decoding for High Priority Images
4. Preconnect with missing crossorigin
5. Preloading multiple images
6. Preloading excessive requests and bytes
7. Preloading videos
8.
9.
10.
11.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
__________________________________
5. Preloading multiple images
6. Preloading excessive requests and bytes
7. Preloading videos

31. 379
Unused Preloads

32. 279
Unused Preloads

33. 1.2 Million
Sites’ with Unused Preloads
(that’s almost 50% of sites using preload)
Source: HTTP Archive, October 2024

34. 1. Lazy Loading LCP Images
2. Lazy Loading High Priority Images
3. Async Decoding for High Priority Images
4. Preconnect with missing crossorigin
5. Preloading multiple images
6. Preloading excessive requests and bytes
7. Preloading videos
8. Unused Preloads
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
__________________________________
8. Unused Preloads

35. <link rel="preload"
href="/fonts/opensans.woff2" />

36. 37,185
Sites Missing Preload Type
Source: HTTP Archive, October 2024

37. 1. Lazy Loading LCP Images
2. Lazy Loading High Priority Images
3. Async Decoding for High Priority Images
4. Preconnect with missing crossorigin
5. Preloading multiple images
6. Preloading excessive requests and bytes
7. Preloading videos
8. Unused Preloads
9. Preload with missing “as” attribute
10. Preloading versions of the same font
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
__________________________________
9. Preload with missing “as” attribute
10. Preloading versions of the same font

38. https://almanac.httparchive.org/en/2024/fonts
font-display=swap
and
Preload fonts
495K Sites use

39. 1. Lazy Loading LCP Images
2. Lazy Loading High Priority Images
3. Async Decoding for High Priority Images
4. Preconnect with missing crossorigin
5. Preloading multiple images
6. Preloading excessive requests and bytes
7. Preloading videos
8. Unused Preloads
9. Preload with missing “as” attribute
10. Preloading versions of the same font
11. Font-Display: swap for Preloaded fonts
12.
13.
14.
15.
16.
17.
18.
19.
20.
__________________________________
11. Font-Display:swap for Preloaded Fonts

41. Content-Encoding: [gzip|br|zstd]

42. ● In 2024, every web server, web browser and CDN supports at least Gzip compression.
● Most also support Brotli compression

43. US Geological Survey - 2024-04-05 Earthquake Aftershocks

44. https://x.com/paulcalvano/status/1776302447108972663

45. https://tools.paulcalvano.com/compression-tester/

46. 1. Lazy Loading LCP Images
2. Lazy Loading High Priority Images
3. Async Decoding for High Priority Images
4. Preconnect with missing crossorigin
5. Preloading multiple images
6. Preloading excessive requests and bytes
7. Preloading videos
8. Unused Preloads
9. Preload with missing “as” attribute
10. Preloading versions of the same font
11. Font-Display: swap for Preloaded fonts
12. No Gzip of Brotli compression
13.
14.
15.
16.
17.
18.
19.
20.
__________________________________
12. No Gzip or Brotli compression

47. https://paulcalvano.com/2024-03-19-choosing-between-gzip-brotli-and-zstandard-compression/

48. 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.

49. 1. Lazy Loading LCP Images
2. Lazy Loading High Priority Images
3. Async Decoding for High Priority Images
4. Preconnect with missing crossorigin
5. Preloading multiple images
6. Preloading excessive requests and bytes
7. Preloading videos
8. Unused Preloads
9. Preload with missing “as” attribute
10. Preloading versions of the same font
11. Font-Display: swap for Preloaded fonts
12. No Gzip of Brotli compression
13. Inadequate compression levels
14.
15.
16.
17.
18.
19.
20.
__________________________________
13. Inadequate compression levels

50. https://paulcalvano.com/2024-09-03-discovering-third-party-performance-risks/

51. 4610
Third Party domains
serving uncompressed
content
Source: HTTP Archive, October 2024

52. 1. Lazy Loading LCP Images
2. Lazy Loading High Priority Images
3. Async Decoding for High Priority Images
4. Preconnect with missing crossorigin
5. Preloading multiple images
6. Preloading excessive requests and bytes
7. Preloading videos
8. Unused Preloads
9. Preload with missing “as” attribute
10. Preloading versions of the same font
11. Font-Display: swap for Preloaded fonts
12. No Gzip of Brotli compression
13. Inadequate compression levels
14. Third Parties not compressing assets
15.
16.
17.
18.
19.
20.
__________________________________
14. Third Parties not compressing assets

54. https://www.speedcurve.com/blog/performance-budgets/

55. 1. Lazy Loading LCP Images
2. Lazy Loading High Priority Images
3. Async Decoding for High Priority Images
4. Preconnect with missing crossorigin
5. Preloading multiple images
6. Preloading excessive requests and bytes
7. Preloading videos
8. Unused Preloads
9. Preload with missing “as” attribute
10. Preloading versions of the same font
11. Font-Display: swap for Preloaded fonts
12. No Gzip of Brotli compression
13. Inadequate compression levels
14. Third Parties not compressing assets
15. Bypassing image optimizations
16.
17.
18.
19.
20.
__________________________________
15. Bypassing automated image optimizations

56. 200K
Sites load more than
1MB from S3
580K
Sites load images from
S3 instead of a CDN
Source: HTTP Archive, October 2024

57. 1. Lazy Loading LCP Images
2. Lazy Loading High Priority Images
3. Async Decoding for High Priority Images
4. Preconnect with missing crossorigin
5. Preloading multiple images
6. Preloading excessive requests and bytes
7. Preloading videos
8. Unused Preloads
9. Preload with missing “as” attribute
10. Preloading versions of the same font
11. Font-Display: swap for Preloaded fonts
12. No Gzip of Brotli compression
13. Inadequate compression levels
14. Third Parties not compressing assets
15. Bypassing image optimizations
16. Using S3 for Image Delivery
17.
18.
19.
20.
16. Using S3 for Image Delivery

58. 913K
Sites are gzip
compressing
first party
images

59. 1. Lazy Loading LCP Images
2. Lazy Loading High Priority Images
3. Async Decoding for High Priority Images
4. Preconnect with missing crossorigin
5. Preloading multiple images
6. Preloading excessive requests and bytes
7. Preloading videos
8. Unused Preloads
9. Preload with missing “as” attribute
10. Preloading versions of the same font
11. Font-Display: swap for Preloaded fonts
12. No Gzip of Brotli compression
13. Inadequate compression levels
14. Third Parties not compressing assets
15. Bypassing image optimizations
16. Using S3 for Image Delivery
17. Gzip compressing images
18.
19.
20.
__________________________________
17. Gzip compressing images

60. Hypothesis
Testing
Validation
Monitoring
This feature will improve [metric].
WebPageTest
Browser Dev Tools
RUM
A/B Testing
RUM
Synthetic Measurements
Performance Budgets

61. 1. Lazy Loading LCP Images
2. Lazy Loading High Priority Images
3. Async Decoding for High Priority Images
4. Preconnect with missing crossorigin
5. Preloading multiple images
6. Preloading excessive requests and bytes
7. Preloading videos
8. Unused Preloads
9. Preload with missing “as” attribute
10. Preloading versions of the same font
11. Font-Display: swap for Preloaded fonts
12. No Gzip or Brotli compression
13. Inadequate compression levels
14. Third Parties not compressing assets
15. Bypassing image optimizations
16. Using S3 for Image Delivery
17. Gzip compressing images
Performance Mistakes
__________________________________

62. How the HTTP Archive Works
● httparchive.org
● Monthly trends
● Discussion forum
● Web Almanac
Chrome UX Report
~16-18 million URLs

63. https://har.fyi/guides/getting-started/

64. Thank You!
Performance Architect @Etsy
Paul Calvano
https://webperf.social/@paulcalvano
https://www.linkedin.com/in/paulcalvano/