Core Web Vitals

The three metrics at a glance

LCP, Largest Contentful Paint, measures how quickly the largest visible content element has loaded. Target: under 2.5 seconds. Typical heavyweights are hero images, background videos or a large block of text.

INP, Interaction to Next Paint, measures how the page responds to user interactions such as a click or a key press. Target: under 200 milliseconds. Since March 2024, INP has replaced the previous metric, FID.

CLS, Cumulative Layout Shift, measures how much content visually shifts while the page loads. Target: under 0.1. Classic CLS killers are images without width/height attributes and ad banners that appear late.

How Google collects the data

Google uses two data sources. First, real user data from the Chrome User Experience Report, CrUX for short. These are the values that feed into rankings. Second, lab measurements via Lighthouse, which let you test a page in a simulated environment.

Important: CrUX data are 28-day aggregates. A performance optimisation therefore only shows up in rankings with a delay, even if Lighthouse shows better values straight away.

What you can actually influence

You usually improve LCP via the hero image: WebP instead of JPEG, fetchpriority="high" on the LCP element, and the image sized appropriately. For this one image, lazy loading must not be active.

INP is often slowed down by JavaScript libraries. Fewer third-party scripts, no blocking analytics snippet, lean event handlers. That is why we at bytebrise avoid WordPress and its plugin stack and write the code ourselves.

You keep CLS low when all images have fixed dimensions, web fonts are adjusted with size-adjust and ads load into boxes reserved in advance.

Related terms

If you want to dig deeper, the detail pages on LCP, INP and CLS are the next step. If you want to measure a page with Lighthouse: Lighthouse explained.