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
<!-- Preload critical resources -->
<link rel="preload" href="/hero.webp" as="image" fetchpriority="high">
<!-- Use fetchpriority for LCP images -->
<img src="/hero.webp" fetchpriority="high" width="1200" height="600" alt="Hero">
<!-- Inline critical CSS -->
<style>/* Critical above-the-fold styles */</style>
<link rel="stylesheet" href="/full.css" media="print" onload="this.media='all'">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
Measurement
import { onLCP, onINP, onCLS } from "web-vitals";
onLCP(console.log);
onINP(console.log);
onCLS(console.log);