Core Web Vitals
LCP, INP, and CLS are Google's user-centric performance metrics — know the targets and the fixes.
Core Web Vitals are Google's standardized, user-centric metrics for real-world page experience. The three pillars are LCP (loading), INP (interactivity), and CLS (visual stability). They are measured on real users (field data) and feed into search ranking, so improving them is both a UX and an SEO win.
Each metric maps to a perceptible problem: LCP asks 'when did the main content show up?', INP asks 'how snappy is the page when I tap or type?', and CLS asks 'does the layout jump around while loading?'. Each has a concrete target and a well-understood set of fixes.
| Metric | What It Measures | Target | How to Fix |
|---|---|---|---|
| LCP (Largest Contentful Paint) | When main content is visible | ≤ 2.5s | Optimize images (WebP/AVIF); preload critical resources; reduce JS bundle |
| INP (Interaction to Next Paint) | Responsiveness to user input | ≤ 200ms | Break long tasks; use requestIdleCallback; avoid blocking the main thread |
| CLS (Cumulative Layout Shift) | Visual stability (things jumping around) | ≤ 0.1 | Set dimensions on images/ads; avoid inserting content above existing content |
Core Web Vitals are the frontend equivalent of SLOs/SLIs with percentile latency targets. LCP and INP are like your p75 response-time SLOs (load and interaction latency), and CLS is a correctness/stability metric. Just as you'd watch p95 latency in production telemetry, these are measured on real users in the field, not only in a lab.
- Three vitals: LCP (loading ≤ 2.5s), INP (interactivity ≤ 200ms), CLS (stability ≤ 0.1).
- INP replaced FID as the responsiveness metric — it measures the latency of all interactions, not just the first.
- CLS is fixed by reserving space: set width/height (or aspect-ratio) on images and ads so nothing reflows when they load.
- Field data (real users) is what counts for ranking; lab tools like Lighthouse are a proxy for debugging.
Worked Code
<!-- Preload the LCP image so it loads early (improves LCP) -->
<link rel="preload" as="image" href="/hero.avif" fetchpriority="high" />
<!-- Always set dimensions so the browser reserves space (avoids CLS) -->
<img src="/hero.avif" width="1200" height="600" alt="Dashboard hero" />// Long, blocking work hurts INP. Defer non-urgent work off the
// critical interaction path with requestIdleCallback.
button.addEventListener('click', () => {
applyUrgentUiUpdate(); // keep the interaction snappy
requestIdleCallback(() => {
runExpensiveAnalytics(); // do heavy work when the main thread is idle
});
});Interview-Ready Q&A
LCP (Largest Contentful Paint) measures when the main content becomes visible, target ≤ 2.5s. INP (Interaction to Next Paint) measures responsiveness to user input, target ≤ 200ms. CLS (Cumulative Layout Shift) measures visual stability — how much the layout jumps — target ≤ 0.1. They cover loading, interactivity, and stability respectively.
- 1LCP ≤ 2.5s, INP ≤ 200ms, CLS ≤ 0.1 — memorize the three targets.
- 2INP replaced FID; it covers responsiveness across all interactions, not just the first.
- 3Set image/ad dimensions to reserve space — the single biggest CLS fix.