Web Performance: Core Web Vitals Optimization Guide

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() or setTimeout(0)
• Use requestIdleCallback for non-critical work
• Virtualize long lists (react-window, tanstack-virtual)
• Debounce input handlers, not the visual feedback

CLS Optimization

• Always set width and height on images and videos
• Use aspect-ratio CSS for responsive containers
• Reserve space for dynamic content (ads, embeds)
• Avoid inserting content above the fold after initial render
• Use font-display: optional for web fonts to prevent FOIT

Measurement