Core Web Vitals directly impact search rankings and user experience. At Google, we obsess over these metrics.
The Three Vitals
LCP (Largest Contentful Paint) — Target: < 2.5s
Measures when the largest visible element finishes rendering. Usually a hero image, heading, or video poster.
INP (Interaction to Next Paint) — Target: < 200ms
Measures responsiveness. The time from user interaction to the next visual update. Replaced FID in 2024.
CLS (Cumulative Layout Shift) — Target: < 0.1
Measures visual stability. How much visible content shifts unexpectedly during page load.
LCP Optimization
INP Optimization
- Break long tasks with
scheduler.yield()orsetTimeout(0) - Use
requestIdleCallbackfor non-critical work - Virtualize long lists (react-window, tanstack-virtual)
- Debounce input handlers, not the visual feedback
CLS Optimization
- Always set
widthandheighton images and videos - Use
aspect-ratioCSS for responsive containers - Reserve space for dynamic content (ads, embeds)
- Avoid inserting content above the fold after initial render
- Use
font-display: optionalfor web fonts to prevent FOIT