Core Web Vitals
debt(d5/e5/b5/t5)
Closest to 'specialist tool catches it' (d5). The detection_hints.tools list includes Lighthouse, PageSpeed Insights, CrUX, and web-vitals-js — all specialist tools rather than default linters or compilers. Issues like missing image dimensions or unpreloaded hero images won't surface in a standard build pipeline; a developer must deliberately run a performance audit to see them.
Closest to 'touches multiple files / significant refactor in one component' (e5). The quick_fix describes a triaged sequence across LCP, CLS, and INP — each requiring different interventions: server-side preloading, HTML attribute additions across templates, and JavaScript task-splitting. While individual fixes can be small, collectively addressing all three metrics touches images, markup, and JavaScript across multiple files.
Closest to 'persistent productivity tax' (b5). Web Vitals apply broadly to any user-facing web context (applies_to: web). Maintaining good scores requires ongoing discipline — every new feature that adds images, dynamic content, or JavaScript must be evaluated for LCP, CLS, and INP impact. This is a persistent overhead but does not fully define the system's architectural shape.
Closest to 'notable trap' (t5). The misconception field explicitly calls out that developers assume Core Web Vitals only matter for marketing sites, when in fact poor INP affects all interactive UIs. Additionally, the lab-vs-field discrepancy (optimising Lighthouse scores while CrUX field data stays poor) is a documented and common gotcha that many developers eventually learn the hard way.
Also Known As
TL;DR
Explanation
Core Web Vitals are measured in the field (real users) and in the lab (Lighthouse). LCP (Largest Contentful Paint) measures loading — target under 2.5s. INP (Interaction to Next Paint, replaced FID) measures responsiveness — target under 200ms. CLS (Cumulative Layout Shift) measures visual stability — target under 0.1. Poor scores hurt SEO rankings and user conversion rates directly. Each metric has specific technical causes and fixes.
Common Misconception
Why It Matters
Common Mistakes
- Optimising only for lab scores (Lighthouse) while field scores (CrUX) remain poor — real users have slower devices.
- Large hero images without responsive srcset causing poor LCP — the single most common LCP issue.
- Layout shifts from images without explicit width/height attributes — browsers cannot reserve space without dimensions.
- Long main-thread JavaScript tasks blocking INP — break up work with scheduler.yield() or setTimeout.
Code Examples
<!-- LCP killer — large unoptimised hero image:
<img src="hero.jpg"> <!-- No width/height (CLS), no srcset (LCP), not preloaded -->
<!-- CLS killer — element dimensions not specified:
<img src="avatar.jpg"> <!-- Jumps layout when loaded --><!-- Optimised for Core Web Vitals:
<link rel="preload" as="image" href="hero-800.webp"> <!-- LCP preload -->
<img
src="hero-800.webp"
srcset="hero-400.webp 400w, hero-800.webp 800w, hero-1200.webp 1200w"
sizes="(max-width: 600px) 400px, 800px"
width="800" height="400" <!-- CLS prevention -->
alt="Hero image"
fetchpriority="high"
>