What is the difference between LCP, INP and CLS?

LCP is about initial loading: when the largest useful visible element is rendered. INP is about responsiveness: how long the page takes to show a response after a click, tap or typing action. CLS is about stability: whether content shifts unexpectedly while the user is looking at or using the page.

Why can a page feel slow with a good LCP?

A good LCP only says the main content appeared quickly. The page can still feel slow if later interactions are blocked by long JavaScript tasks, expensive handlers or main-thread contention. That is an INP problem, not a loading problem, so image or server tuning may not fix it.

How should I start debugging a failing Core Web Vital?

Start by identifying which metric is failing rather than treating speed as one generic issue. Bad LCP points to initial render, blocking resources or the largest visible asset. Bad INP points to interaction work and main-thread blocking. Bad CLS points to missing dimensions, late content, fonts, ads or injected UI.

Structure a Machine Can Read

04.03 · Walkthrough

Core Web Vitals: LCP, INP and CLS

Say what each of the three metrics measures, at which percentile and over what window, and diagnose which one a slow page is actually failing.

Core Web Vitals separate page speed into loading, responsiveness and visual stability. LCP tracks when the main visible content appears, INP tracks visible response after interaction, and CLS tracks unexpected layout movement. Field reports are judged at the 75th percentile over a rolling 28-day window, so diagnosis starts by naming the failing metric.

What this lesson answers

what do LCP INP and CLS measure
which Core Web Vital makes my page slow
how are Core Web Vitals field values judged

Notes

Core Web Vitals are three user-experience measurements that Google treats as the minimum performance vocabulary for the web. Largest Contentful Paint measures loading: how long it takes for the main visible content to appear. Interaction to Next Paint measures responsiveness: how long the page takes to visibly respond after a user interaction. Cumulative Layout Shift measures visual stability: how much the page unexpectedly moves around while the user is trying to read or act.

Think of a page load as a short production incident report from the user’s browser.

References

web.dev - Core Web Vitals

Common questions

What is the difference between LCP, INP and CLS?: LCP is about initial loading: when the largest useful visible element is rendered. INP is about responsiveness: how long the page takes to show a response after a click, tap or typing action. CLS is about stability: whether content shifts unexpectedly while the user is looking at or using the page.
Why can a page feel slow with a good LCP?: A good LCP only says the main content appeared quickly. The page can still feel slow if later interactions are blocked by long JavaScript tasks, expensive handlers or main-thread contention. That is an INP problem, not a loading problem, so image or server tuning may not fix it.
How should I start debugging a failing Core Web Vital?: Start by identifying which metric is failing rather than treating speed as one generic issue. Bad LCP points to initial render, blocking resources or the largest visible asset. Bad INP points to interaction work and main-thread blocking. Bad CLS points to missing dimensions, late content, fonts, ads or injected UI.

Short definition: what is Core Web Vitals: LCP, INP and CLS?

04.02 · Structure a Machine Can ReadStructured Data: What It Earns and Where It Is Not Required 04.04 · Structure a Machine Can ReadField vs Lab: CrUX, RUM and Lighthouse