What are Core Web Vitals, and how do you optimize LCP, FID/INP, and CLS in a production application?

Core Web Vitals

MetricWhat It MeasuresGoodPoor

LCP (Largest Contentful Paint)Loading speed< 2.5s> 4s
INP (Interaction to Next Paint)Interactivity< 200ms> 500ms
CLS (Cumulative Layout Shift)Visual stability< 0.1> 0.25

LCP Optimization (Loading)

// ❌ Slow LCP: Image loads lazily
<Image src="/hero.jpg" />

// ✅ Fast LCP: Preload + priority
<Image src="/hero.jpg" priority placeholder="blur" />

// Critical CSS inline (above fold)
<link rel="preload" as="style" href="/critical.css" />

// Preload fonts
<link rel="preload" as="font" href="/fonts/inter.woff2" crossorigin />

INP Optimization (Interactivity)

// ❌ Slow INP: Heavy work blocks main thread
button.addEventListener("click", () => {
  heavyComputation(); // Blocks for 500ms
  updateUI();
});

// ✅ Fast INP: Break up with scheduler
button.addEventListener("click", () => {
  updateUI(); // Instant feedback
  requestIdleCallback(() => heavyComputation()); // Defer heavy work
});

// ✅ React: useTransition for non-urgent updates
const [isPending, startTransition] = useTransition();
startTransition(() => setSearchResults(heavyFilter(query)));

CLS Optimization (Visual Stability)

// ❌ CLS: No dimensions → layout jumps when image loads
<img src="/banner.jpg" />

// ✅ CLS: Set explicit dimensions
<Image src="/banner.jpg" width={1200} height={400} />

// ✅ CLS: Aspect ratio container
<div style={{ aspectRatio: "16/9" }}>
  <Image src="/video.jpg" fill />
</div>

// ✅ CLS: Reserve space for dynamic content
<div style={{ minHeight: "400px" }}>
  {loading ? <Skeleton /> : <Content />}
</div>

// ✅ CLS: Fonts
font-display: optional; // Use system font if custom font not cached

Measuring

// Real User Monitoring
import { onLCP, onINP, onCLS } from "web-vitals";

onLCP(console.log);  // 2.1s ✅
onINP(console.log);  // 120ms ✅
onCLS(console.log);  // 0.05 ✅