Greatest Disaster Hits in Web Performance

BILBOSTACK 2026. Major hits from yesterday and today that are destroying your project's loading speed, user experience, and business metrics (and how to avoid them!).

Transcript

2. Meet your Tour Manager Estela Franco Technical Architect, Web Performance guaca.bsky.social__ toot.cafe/@guaca
7. Core Web Vitals
9. developer.chrome.com/docs/crux Big Brother is Watching you!
10. httparchive.org
11. httparchive.org
13. almanac.httparchive.org
14. almanac.httparchive.org 16.2M websites 244TB processed
19. uncompressed HTML 1.3M mobile websites
20. uncompressed JavaScript 29.5M mobile websites
22. Uncompressed resources
25. TTFB FCP LCP < 2.5 s 3.2 s
27. TTFB >= 2.2 s 1M mobile websites
28. developer.mozilla.org/en-US/docs/Web/API/PerformanceResourceTiming
29. Shopify Theme Inspector (Chrome Extension)
30. Lack of TTFB optimization (Server Config, RTT, Redirects... and your code!)
33. web.dev/learn/performance/understanding-the-critical-path
34. spec.whatwg.org/multipage/scripting.html#attr-script-defer
35. <link rel="stylesheet" href="styles.css" defer > NOPE!
36. <link rel="stylesheet" href="styles.css" media="print" onload="this.onload=null;this.media='all'" > <noscript> <link rel="stylesheet" href="styles.css"> </noscript> web.dev/articles/defer-non-critical-css
40. FCP: 9s
41. Render-blocking resources
44. <img src="hero-image.webp" alt="My cool hero image" />
45. <img src="hero-image.webp" alt="My cool hero image" loading="lazy" />
46. ✅ ✅ ✅ ✅
48. <img src="hero-image.jpg" alt="My cool hero image" />
49. <img src="placeholder.jpg" alt="My cool hero image" data-src="hero-image.jpg" class="lazy" />
51. calendar.perfplanet.com/2022/lazy-loading-lcp-images-why-does-this-anti-pattern-happen/
52. 2022 18% almanac.httparchive.org/en/2022/performance
53. almanac.httparchive.org/en/2025/performance 2025 17%
55. Lazy-loading the LCP image
58. <img src="hero-image.webp" alt="My cool hero image" />
59. <img src="hero-image.webp" alt="My cool hero image" fetchpriority="high" />
60. ✅ ✅ ✅ ✅
62. Missing fetchpriority=”high” on LCP
65. web.dev/articles/preload-scanner
66. <link rel="preload" as="image" href="image.jpg" >
68. @font-face { font-family: Cool Sans; src: url(https://example.com/cool.woff2) format("woff2"), font-weight: 700; font-style: normal; font-display: swap; }
69. <div style=" background-image:url(hero-image.webp)" />
71. ✅ ✅ ✅ ✅
72. Missing preloads for critical resources undiscoverable by the preload scanner
74. with errors
75. 6,162 Missing “as” attribute
77. • imgae • iamge • scipt • scrip • videp
79. <link rel="preload" as="font" href="image.jpg" >
80. Preload errors
82. everything everywhere all at once
87. Excessive or unnecessary preloading
91. Videos can be slooow…
92. <video src="video.mp4" poster="poster.jpg" > </video>
93. ✅ ✅ ✅ ✅
95. Missing poster on <video> elements
99. and many more...
101. HTML JS FETCH DATA RENDER
102. httparchive.org/reports/techreport/tech Origins with good CWV over time Shopify Wix Drupal WordPress React Vue.js Next.js Nuxt.js
103. JS - CSR & Hydration issues (use JS wisely!)
106. developer.chrome.com/docs/web-platform/early-hints
108. performance.shopify.com/blogs/blog/early-hints-at-shopify
109. ✅ ✅ ✅ ✅ 103 ✅ ✅ ✅ ✅ rel=”preconnect” ✅ ✅ ✅ ❌ rel=”preload”
110. developer.mozilla.org/en-US/docs/Web/API/PerformanceResourceTiming
111. TTFB = “Time To Early Hints” (firstInterimResponseStart)
112. treo.sh/sitespeed/
113. TTFB = “Time To Response” (finalResponseHeadersStart)
114. performance.shopify.com/blogs/blog/early-hints-at-shopify
115. performance.shopify.com/blogs/blog/early-hints-at-shopify
116. performance.shopify.com/blogs/blog/early-hints-at-shopify
120. Misuse of Early Hints
123. developer.chrome.com/docs/web-platform/implementing-speculation-rules <script type="speculationrules"> { "prerender": [ { "where": {"href_matches": "/*"}, "eagerness": "moderate" } ] } </script>
124. HTTP header: Speculation-Rules: "/speculationrules.json" developer.chrome.com/docs/web-platform/implementing-speculation-rulesa
125. ✅ ✅ ❌ ❌
126. performance.shopify.com/blogs/blog/speculation-rules-at-shopify
127. performance.shopify.com/blogs/blog/speculation-rules-at-shopify
129. Not leveraging Speculation Rules
132. 1. Uncompressed resources 2. Lack of TTFB optimization 3. Render-blocking resources 4. Lazy-loading the LCP image 5. Missing fetchpriority on LCP 6. Missing preloads for critical resources undiscoverable by the preload scanner 7. Preload errors 8. Excessive or unnecessary preloading 9. Missing poster on <video> 10. JS - CSR & Hydration issues BONUS TRACKS 11. Misuse of Early Hints 12. Not leveraging Speculation Rules
133. planetaberilis.com guaca.bsky.social toot.cafe/@guaca