Core Web Vitals explained: LCP, CLS and INP

The three metrics

Metric	Measures	Good	Poor
Largest Contentful Paint (LCP)	When the largest image or text block in view is painted	2.5 s or less	over 4 s
Cumulative Layout Shift (CLS)	How much visible content moves while the page loads	0.1 or less	over 0.25
Interaction to Next Paint (INP)	The delay between an interaction and the next frame	200 ms or less	over 500 ms

Google assesses each metric at the 75th percentile of real page loads: three out of four visits must be good for the page to pass.

Lab data and field data

Field data comes from real Chrome users and is published in the Chrome UX Report, which Search Console and PageSpeed Insights show. It is what Google uses. It needs traffic, and it lags by 28 days.

Lab data comes from loading the page once in a controlled browser, as the page speed test does. It is repeatable and available for any page, which makes it the tool for finding causes and checking fixes. It cannot measure INP, which needs real interactions, so lab tests report Total Blocking Time as a stand in.

Improving LCP

LCP is the sum of four parts: the server response, the delay before the LCP resource starts loading, its load time and the render delay.

1. Fast server response. Aim for a time to first byte under 0.8 seconds. Cache pages at a CDN, cache database queries, avoid redirects.
2. Start the hero early. If the LCP element is an image, reference it in the HTML with a plain <img> and fetchpriority="high", not as a CSS background or a lazily loaded image.
3. Make it small. Serve the hero in WebP or AVIF at the size it is displayed.
4. Unblock rendering. Inline the critical CSS, defer the rest, and load scripts with defer or async.

Improving CLS

Layout shift happens when something appears or resizes above content that is already visible.

• Give every image and video width and height attributes, or an aspect-ratio.
• Reserve space for ads, embeds and banners before they load.
• Load web fonts with font-display: swap and a fallback with matching metrics, or preload them.
• Never insert content above existing content unless the visitor asked for it.

Improving INP

INP suffers when the main thread is busy when someone clicks or types.

• Ship less JavaScript. Remove unused libraries and third party tags.
• Break long tasks into smaller ones and yield to the browser between them.
• Do less work in event handlers. Show feedback first, then do the heavy part.
• Avoid rendering huge DOM trees at once.

Measure, fix, monitor

1. Run the page speed test on your key templates: home, category, article, product.
2. Fix the biggest cause first. The test lists page weight, compression, caching, image formats and render blocking resources.
3. Re-test to confirm the fix.
4. Watch the field data in Search Console over the following month.
5. Keep a monitor running, because a new script or a plugin update can undo the work silently.