Core Web Vitals: LCP, INP and CLS

Updated in 2025 · ~8 min read

Core Web Vitals are a set of three metrics Google uses to measure the real user experience of a page: how fast the main content loads, how responsive it is to input, and how visually stable it stays. The data is collected from real users (field data) and affects both usability and search ranking.

The three metrics and their thresholds

Each metric has three zones: good, needs improvement and poor. The convention is the 75th percentile — the score should be "good" for at least 75% of visits.

Metric	Good	Poor
LCP	≤ 2.5 s	> 4.0 s
INP	≤ 200 ms	> 500 ms
CLS	≤ 0.1	> 0.25

LCP — Largest Contentful Paint

Measures how long it takes to render the largest visible element (usually the main image or heading). In practice, it's the moment a user feels the page has "loaded".

How to improve

Optimize the server response (TTFB): caching, CDN, a fast backend.
Preload the key resource: <link rel="preload"> for the LCP image or font.
Don't hide the main image behind JavaScript — serve it in the HTML.
Compress images and use modern formats (AVIF, WebP).

INP — Interaction to Next Paint

In 2024, INP replaced the older FID metric. It measures the delay between a user action (click, tap, key press) and the visible response of the UI — across all interactions in a session, not just the first one.

How to improve

Break up long JavaScript tasks and yield back to the browser.
Defer non-critical code: defer, dynamic import, requestIdleCallback.
Reduce hydration in SPA/SSR apps.
Avoid heavy synchronous event handlers.

CLS — Cumulative Layout Shift

Measures visual stability: how much elements "jump" while loading. The annoying shift is when you aim for a button and the content moves away.

How to improve

Set media dimensions: width/height attributes or aspect-ratio.
Reserve space for ads and embeds ahead of time.
Load fonts with font-display: optional/swap to avoid reflow.
Don't insert content above visible content, except in response to a user action.

How to measure

In the lab — Lighthouse and WebPageTest. From real users — the Chrome User Experience Report (CrUX) and PageSpeed Insights; in production it's convenient to collect metrics with the web-vitals library and send them to your own analytics.

← All articles