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://www.meetup.com/web-performance-ny/events/286338923/

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

2. https://httparchive.org

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

4. https://almanac.httparchive.org/
4

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

6. 6
https://caniuse.com/loading-lazy-attr

7. Source: https://almanac.httparchive.org/en/2022/media#lazy-loading

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

9. 9
https://almanac.httparchive.org/en/2021/performance#fig-20

10. 10
https://web.dev/lcp-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

15. 15
https://almanac.httparchive.org/en/2021/resource-hints

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?

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

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

20. Examples
https://www.dailymail.co.uk
https://www.theguardian.com
https://www.macys.com
https://www.chess.com
https://www.washingtonpost.com
20

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/

23. 23
318
Unused Preloads

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/

26. 26
381
Unused Preloaded
Fonts
https://velotour.fr/
https://www.webpagetest.org/result/220918_AiDcQG_94F/

27. 27
370
Unused Preloaded
Fonts
https://www.dragonhall.co.uk https://www.voxnativa.org
617
Unused Preloaded
Fonts

29. 29
https://almanac.httparchive.org/en/2021/compression

30. 30
https://almanac.httparchive.org/en/2021/compression

31. 31
https://almanac.httparchive.org/en/2021/compression

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

34. 34
https://tools.paulcalvano.com/compression.php

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

38. 38
https://developers.cloudflare.com/c
ache/about/early-hints/
https://www.fastly.com/blog/beyond
-server-push-experimenting-with-th
e-103-early-hints-status-code

39. 39
https://www.webpagetest.org/result/220916_BiDcGC_F12/1/details/

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.

42. https://almanac.httparchive.org/
42

43. 43
Thanks!
bit.ly/ha-slack
Chat
github.com/HTTPArchive
Contribute
discuss.httparchive.org
Collaborate
@paulcalvano
paul@httparchive.org