Engrain by ByteRush

QLT.01.01 Mid-level· 11 minCore — asked often

Core Web Vitals: LCP, INP and CLS

What Largest Contentful Paint, Interaction to Next Paint and Cumulative Layout Shift measure, their good and poor thresholds at the 75th percentile, why INP replaced FID, the other metrics, and why field and lab data disagree.

Comes up in: Web fundamentals, Frontend system design, Recruiter screen

Learn#

Kunal’s team gets a Lighthouse score of 98, yet Google Search Console flags the page as “poor”. Both are right; they measure different things.

Core Web Vitals are three user-centered metrics:

  • LCP (Largest Contentful Paint): when the biggest image or text block in the viewport appears. Loading.
  • INP (Interaction to Next Paint): how long the page takes to show a response after clicks, taps and key presses, across the whole visit. Responsiveness.
  • CLS (Cumulative Layout Shift): how much visible content jumps around unexpectedly. Visual stability.

Thresholds apply at the 75th percentile of real visits: LCP ≤ 2.5 s, INP ≤ 200 ms, CLS ≤ 0.1 is good; LCP over 4.0 s, INP over 500 ms, CLS over 0.25 is poor, and anything between needs improvement.

Field data comes from real users (CrUX, your own monitoring). Lab data comes from one simulated load (Lighthouse). Lab data is repeatable, good for debugging; field data is the truth.

Why a green Lighthouse score can sit beside a poor field LCPStep 1 of 4

State

  • lab LCP 1.2 s

Lighthouse on a fast laptop: LCP 1.2 s, everything green. The team celebrates.

Read the steps as text
  1. Lighthouse on a fast laptop: LCP 1.2 s, everything green. The team celebrates.
  2. Real-user data from Chrome (CrUX) for the same page says LCP at the 75th percentile is 3.1 s.
  3. The difference: real users have slower phones, slower networks, cold caches, and pages they interact with.
  4. Google ranks and the team should judge by field data at p75: the value 75% of visits are better than.

Predict#

Predict first

Lighthouse reports no INP value for your page. Why?

Interview angle#

Say it like this — about 30 seconds

“Core Web Vitals are LCP for loading, INP for responsiveness and CLS for visual stability. At the 75th percentile of real visits, good is LCP within 2.5 seconds, INP within 200 milliseconds and CLS within 0.1. INP replaced First Input Delay in March 2024; it measures the full delay to the next paint for interactions across the whole visit, not just the input delay of the first one. Lighthouse is lab data from one simulated load, so it can disagree with field data from real devices and networks.”

Stays on your device. Nothing is uploaded.
Follow-up What are Core Web Vitals and their good thresholds?
LCP ≤ 2.5 s, INP ≤ 200 ms, CLS ≤ 0.1, measured at the 75th percentile of real page loads.
Follow-up What is INP? How do you debug a poor INP score?
The latency from an interaction to the next paint; find the slow interactions in field data, then profile them for long tasks, heavy handlers and rendering (QLT.01.03).
Follow-up Why do Lighthouse scores differ from real-user data?
Lighthouse uses one device and network profile with no real interactions; users have varied devices, networks, caches and behavior.

Practice#

Guided

Rate metric values, compute the 75th percentile, and decide whether a page passes.

Done when

  • Ratings follow the good and poor thresholds exactly, including the boundary values.
  • p75 uses the nearest-rank method.
  • A page passes only when all three p75 values are good.
Your solution
Ctrl/⌘ + Enter

Remember#

Try to answer each card before you open it. Then add them to your reviews.

What are the good thresholds for LCP, INP and CLS?

2.5 s, 200 ms and 0.1, at the 75th percentile.

When did INP replace FID?

March 2024.

Field vs lab data?

Field: real users (CrUX, RUM). Lab: one simulated load (Lighthouse).

Which lab metric stands in for INP in Lighthouse?

Total Blocking Time (TBT).

Go deeper

Four layers. Stop at the one your interview needs; each ends with a quick check.

The core ideaEvery round

The 75th percentile means three quarters of visits were at least that good. It ignores the slowest quarter’s outliers but still demands that most users have a good experience.

Check yourself: What does the 75th percentile mean here?

75% of visits had a better value; the page is judged by that value.

How it works underneathSenior rounds
First Input Delay measured only the wait before the first interaction’s handler. INP replaced it on 12 March 2024 and measures input delay, processing and presentation for all interactions, reporting roughly the worst one .
Check yourself: What did FID measure that INP improves on?

Only the input delay of the first interaction; INP covers all interactions and the full time to the next paint.

Edge cases and trapsWhere people slip
TTFB (time to first byte) and FCP (first contentful paint) are not Core Web Vitals but explain LCP. TBT is a lab-only proxy for INP. CLS counts shifts in session windows, so long pages are not punished for length.
Check yourself: Is TTFB a Core Web Vital?

No. It is a supporting metric that feeds into LCP.

In productionStaff-level answers

Get field data from CrUX (PageSpeed Insights, Search Console) and from your own real-user monitoring with the web-vitals library, split by page type and device (QLT.01.06) .

Check yourself: Name two sources of field data.

CrUX (via PageSpeed Insights or BigQuery) and your own RUM with the web-vitals library.

Finished the five steps? Mark it, and its cards join your reviews.

Last checked 2026-11-01. Spot a mistake? Use “Report an error” below — fixes are listed on the corrections page.

Interview questions this answers

  • What are Core Web Vitals and their "good" thresholds?
  • What is INP? How do you debug a poor INP score?
  • Why do Lighthouse scores differ from real-user data?