Core Web Vitals: LCP, INP and CLS

What it means

Largest Contentful Paint (LCP) is a loading milestone concerning the largest eligible visible content element. Interaction to Next Paint (INP) describes interaction responsiveness across the observed visit under its measurement rules. Cumulative Layout Shift (CLS) describes layout instability with a unitless score.

They answer different questions: when important visible content appears, how responsive interactions are and how stable the layout is. A page can perform well in one dimension and poorly in another. The example below keeps those dimensions separate rather than producing one combined score.

Try it

Example: inspect the synthetic baseline, then change LCP (ms) from 2200 to 5000. Read which label changes and why. Select Compare with baseline to show the baseline and current outcomes together. Editing an input clears that comparison; Reset restores the starting inputs, errors and comparison state. No real website is tested or changed.

LCP good; INP good; CLS good. Compare LCP 2200ms, INP 180ms and CLS 0.080 independently; field guidance uses distributions and eligibility rules.

Keep INP (ms) at 180 and CLS × 1000 at 80. Only LCP changes, so you can attribute the changed classification to that input crossing its boundary.

Reset restores LCP to 2200 ms, INP to 180 ms and CLS × 1000 to 80, removes input errors and clears the comparison. It preserves your independent choices to open or close FAQ answers and About this model.

How it works

The classifier first interprets each input in its own units, then compares it with that metric’s boundaries. LCP and INP are entered in milliseconds. CLS has no time unit; this interface takes CLS × 1000, so an input of 80 becomes 0.080 before it is explained to you.

Equality matters. Values of 2500 ms, 200 ms and CLS 0.100 are still good. Values of 4000 ms, 500 ms and CLS 0.250 are still needs improvement; poor begins strictly above those boundaries. Each comparison stands on its own. Adding milliseconds to a unitless score, or letting one good label compensate for another poor label, would lose that distinction.

Field assessment adds a separate step: obtain eligible observations and evaluate the 75th percentile for each metric within the relevant device class. The percentile describes where roughly three quarters of those observations fall; it is not the average and cannot be calculated from this scene’s single supplied value. Threshold classification and evidence collection answer different questions.

Worked example

The synthetic baseline is LCP = 2200 ms, INP = 180 ms and CLS × 1000 = 80, meaning CLS = 0.080. These are teaching inputs, not captured production observations.

The intermediate comparisons explain the outcome: 2200 is below the LCP good limit of 2500 ms; 180 is below the INP good limit of 200 ms; and 0.080 is below the CLS good limit of 0.100. Each independent comparison therefore returns good. No visitor distribution has been evaluated, so the three good sample labels do not establish a field assessment.

What changes when the condition changes

Change LCP (ms) to 5000 while leaving INP at 180 and CLS × 1000 at 80.

LCP poor; INP good; CLS good. Compare LCP 5000ms, INP 180ms and CLS 0.080 independently; field guidance uses distributions and eligibility rules.

The LCP value has moved from below the good boundary to above the 4000 ms poor boundary. That changes only its classification: the other two inputs have not changed, so their labels remain good. Good responsiveness and visual stability do not cancel a poor loading value. Editing the number demonstrates this classification rule; it does not make a real page slower.

In practice

Before interpreting a report, record what was measured: the page or scope, device class, collection method, observation population and collection period. Keep a controlled lab result separate from a field percentile. This makes it possible to distinguish a changed measurement context from a changed experience.

Use a poor metric to choose what to investigate, not to guess a fix. Seek diagnostic evidence tied to the affected loading milestone, interaction or layout instability. A threshold label identifies a category; it does not identify the responsible resource or code.

Stop short of a diagnosis if the value’s origin, units or observation scope are unknown. Do not change hosting, caching or production code solely because this scene shows a poor label. This page explains interpretation, not a deployment procedure.

Limits and unknowns

This scene is a local Example, not a live check. It classifies the numbers you enter; it does not observe your website, browser, visitors or deployment. It cannot establish a real-user 75th percentile, diagnose a cause, predict the effect of a fix or award a WCAG score. Successful task completion and accessibility require their own evidence.

The input ranges are 1–30000 ms for LCP, 1–10000 ms for INP and 0–5000 for CLS × 1000. These are teaching-interface limits, not definitions of which values can occur on the web. An empty, nonnumeric or out-of-range input is invalid: no calculated outcome applies until you correct it or use Reset, and comparison is unavailable while it is invalid.

Valid numbers receive threshold labels even when their measurement origin is unknown. That does not resolve the unknown site-level conclusion. Without JavaScript, the initial example remains readable, but the interactive controls are inactive.

What to carry forward

Read each metric as an answer to a different performance question, not as a substitute for the others. A threshold label tells you how a value compares with guidance; its measurement context tells you whether it supports a claim about your visitors. When that context is missing, establish the evidence before choosing a fix.