Measure and optimize Core Web Vitals (LCP, INP, CLS). Use when implementing CWV tracking or debugging performance.
Measure the three metrics Google uses to assess user experience.
| Metric | Measures | Good | Poor |
|---|---|---|---|
| LCP | Loading - Largest Contentful Paint | ≤2.5s | >4.0s |
| INP | Interactivity - Interaction to Next Paint | ≤200ms | >500ms |
| CLS | Visual Stability - Cumulative Layout Shift | ≤0.1 | >0.25 |
| Without | With |
|---|---|
| "LCP is 3.2s" | "LCP is 3.2s, caused by hero-image.jpg" |
| Can't fix | Actionable |
See templates/web-vitals.ts for production-ready code.
Use Read tool to load template when generating implementation.
See references/anti-patterns.md for:
skills/hydration-performance - SSR impact on LCPskills/bundle-performance - JS impact on INPreferences/core-web-vitals.md - Deep dive