What Are Core Web Vitals — LCP, FID/INP, and CLS?
Learn Core Web Vitals — LCP, INP (replacing FID), and CLS — what they measure, good thresholds, and how to improve each.
Expected Interview Answer
Core Web Vitals are Google's three user-centric metrics for real-world page quality — Largest Contentful Paint (LCP) measures loading speed of the biggest visible element, Interaction to Next Paint (INP, which replaced First Input Delay) measures responsiveness to user interactions, and Cumulative Layout Shift (CLS) measures visual stability by quantifying unexpected layout movement.
LCP tracks the render time of the largest image, video, or text block visible in the viewport, and a good score is under 2.5 seconds — it is typically hurt by slow servers, render-blocking resources, or unoptimized images, so fixes include preloading the hero image, using a CDN, and minimizing critical-path blocking JavaScript/CSS. INP measures the latency from any user interaction (click, tap, key press) to the next visual frame the browser paints in response, capturing the worst or near-worst interaction over the page's lifetime rather than just the first one like the older FID metric did, and a good score is under 200ms — long JavaScript tasks that block the main thread are the usual culprit, fixed by breaking up long tasks and deferring non-essential work. CLS sums up every unexpected layout shift's impact fraction times distance fraction across the page's lifetime, and a good score is under 0.1 — it is typically caused by images or ads without explicit width/height reserving space, or content injected above existing content, fixed by always specifying dimensions/aspect-ratio for media and reserving space for dynamically loaded content. These three together approximate what a real user actually experiences: how fast the page looked done, how responsive it felt, and how much it visually jumped around.
- LCP directly measures perceived loading speed for the most prominent content
- INP captures true interaction responsiveness across the whole session, not just first input
- CLS quantifies the frustration of unexpected content jumping around
- Together they form a measurable, actionable definition of real-world page quality
AI Mentor Explanation
LCP is like timing how long it takes for the main scoreboard's biggest panel — the total score — to actually appear after the gates open; a slow paint job there frustrates fans even if smaller side panels loaded instantly. INP is like measuring the delay between a fan pressing the “replay” button and the big screen actually showing the replay, capturing the worst lag across the whole match, not just the first press. CLS is like the annoyance of the scoreboard's ad banner suddenly resizing and pushing the score panel down just as a fan was about to read it. All three together capture how fast, responsive, and visually stable the stadium's display actually felt to the crowd.
Step-by-Step Explanation
Step 1
Measure LCP
Track when the largest visible element (image/video/text block) finishes rendering; target under 2.5s.
Step 2
Measure INP
Track the latency from any interaction to the next painted frame across the whole session; target under 200ms.
Step 3
Measure CLS
Sum unexpected layout shift impact × distance fractions across the page lifetime; target under 0.1.
Step 4
Fix the dominant offender
Optimize images/critical path for LCP, break up long tasks for INP, reserve space for media/dynamic content for CLS.
What Interviewer Expects
- Correct definitions and rough good-score thresholds for LCP, INP, and CLS
- Understanding that INP replaced FID because it measures all interactions, not just the first
- Concrete, specific fixes tied to each metric's common root cause
- Awareness that these are field/real-user metrics, distinct from purely synthetic lab metrics
Common Mistakes
- Confusing FID (first input delay only) with INP (full-session interaction responsiveness)
- Assuming CLS only cares about images, ignoring dynamically injected content like ads or banners
- Not knowing the approximate “good” thresholds for each metric
- Optimizing only for lab tools (Lighthouse) without considering real-user field data
Best Answer (HR Friendly)
“Core Web Vitals are three numbers that describe how a real visitor experiences a page: how fast the biggest piece of content shows up (LCP), how quickly the page responds when they click or tap something (INP), and how much the page unexpectedly jumps around while loading (CLS). Keeping all three low means the site feels fast, responsive, and stable.”
Code Example
import { onLCP, onINP, onCLS } from 'web-vitals'
function sendToAnalytics(metric) {
const body = JSON.stringify({ name: metric.name, value: metric.value, id: metric.id })
navigator.sendBeacon('/analytics/web-vitals', body)
}
onLCP(sendToAnalytics) // Largest Contentful Paint, target < 2.5s
onINP(sendToAnalytics) // Interaction to Next Paint, target < 200ms
onCLS(sendToAnalytics) // Cumulative Layout Shift, target < 0.1Follow-up Questions
- Why did Google replace FID with INP as a Core Web Vital?
- What specific techniques reduce LCP for an image-heavy hero section?
- How would you debug a high CLS score caused by a third-party ad script?
- What is the difference between lab data (Lighthouse) and field data (CrUX) for Web Vitals?
MCQ Practice
1. What does Largest Contentful Paint (LCP) measure?
LCP tracks how long the largest image/video/text block takes to render, approximating perceived load speed.
2. Why did INP replace First Input Delay (FID) as a Core Web Vital?
FID only measured the delay before the first interaction was processed; INP evaluates the full session's worst interactions.
3. What commonly causes a high Cumulative Layout Shift (CLS) score?
Elements that load without reserved space push existing content around, causing unexpected layout shifts.
Flash Cards
What does LCP measure and its good threshold? — Largest visible element render time; good is under 2.5 seconds.
What does INP measure and its good threshold? — Interaction-to-next-paint latency across the session; good is under 200ms.
What does CLS measure and its good threshold? — Cumulative unexpected layout shift; good is under 0.1.
Why did INP replace FID? — FID only measured the first interaction; INP measures responsiveness across the whole session.