Core Web Vitals, and the order that actually reduces them

What each metric actually measures

LCP — Largest Contentful Paint

When the biggest visible element finishes rendering. Almost always a hero image, a heading, or a block that cannot paint until a font or a script arrives. Target: under 2.5 seconds at the 75th percentile.

INP — Interaction to Next Paint

How long the page takes to visually respond to a real interaction, measured across the whole visit rather than the first click. Target: under 200 ms. This is where heavy JavaScript frameworks are punished.

CLS — Cumulative Layout Shift

How much content moves after it has been painted. Caused by images without dimensions, late-loading banners, and web fonts swapping in at a different metric size. Target: under 0.1.

LCP: find the blocking resource, not the slow one

LCP problems are rarely about total page weight. They are about the critical path: the chain of requests that must complete before the largest element can paint.

The pathological version, and one I have measured on a real site, is a client-rendered page where nothing paints until a JavaScript bundle downloads and executes, and where the fonts are not even requested until that render happens. The measured LCP was nine seconds on mobile — not because anything was large, but because four things had to happen in strict sequence before a single pixel could appear.

1. Identify the LCP element in field data, not in your own browser on office wifi
2. Make sure it is discoverable in the initial HTML rather than injected by script
3. Preload only what the LCP element needs — typically one font file and one image
4. Serve the image in a modern format at the size that viewport actually uses
5. Remove render-blocking scripts and stylesheets from the critical path
6. Only then look at server response time — it is a constant added to everything, but rarely the whole story

CLS: the cheapest points on the board

• Every img and video carries width and height, or an aspect-ratio in CSS
• Fonts declare font-display: swap with a metric-compatible fallback so the swap does not resize text
• Space is reserved for anything that loads late — banners, embeds, consent notices
• Nothing is inserted above existing content after paint
• Animations use transform and opacity, never top, left, width or height

INP: the metric you cannot reorder your way out of

LCP and CLS respond well to sequencing changes. INP does not, because it measures how long the main thread is busy when a user interacts — and the only durable fix is doing less work.

In practice that means: shipping less JavaScript, breaking long tasks so the browser can respond between them, avoiding layout reads inside high-frequency event handlers such as mousemove and scroll, and being ruthless about third-party tags whose cost nobody has measured since the day they were added.

The most effective INP fix available to most small sites is architectural: if the page does not need a framework at runtime, do not ship one. This site ships zero framework JavaScript on content pages, which is why its interaction cost is effectively the browser floor.

Why your lab score and your field data disagree

Lab tools run one page, on one simulated device, with no cache and no real user behaviour. Field data is what actual visitors experienced, on their own hardware and connections, across the whole session.

When they disagree, believe the field data — it is what search engines use. Lab tools are for diagnosis: they tell you which resource is on the critical path. They are not the score.

Questions people ask about this

Does a perfect Lighthouse score mean good Core Web Vitals?

No. Lighthouse is a lab simulation of one load on one device. Field data — real visitors, real devices — is what is used for assessment, and a site can score 100 in the lab while failing INP in the field because real users interact and simulations do not.

How long after a fix do the numbers move?

Field data is reported over a rolling 28-day window, so a fix deployed today shows up gradually and is only fully reflected after about a month. Lab measurements move immediately, which is why they are useful for verifying the fix landed.

Is an image CDN worth it?

If images are your LCP element and you serve many viewports, yes — correct sizing and format conversion is the single biggest lever. If your LCP is a heading blocked by a font, a CDN changes nothing.

Who wrote this

Anas Bin Masud builds e-commerce sites and does technical SEO for businesses in the UK, Canada and Pakistan — fifteen live client sites, six of them stores taking real payments. The examples in these guides come from those builds and from the audit that rebuilt this site, not from a content brief. More about how I work, or read the case studies.