Engineering

Core Web Vitals in 2026: Fixing LCP, INP and CLS for Real

July 28, 2026 6 min read By GoGroww Team

A perfect Lighthouse score on a developer laptop proves very little. Core Web Vitals are assessed on field data — real people, real devices, real networks — which is why a site can score 98 in the lab and still fail in Search Console.

Here is what genuinely moves each metric.

Largest Contentful Paint: it is almost always the image

LCP measures when the biggest element in the viewport finishes rendering. On most marketing pages that is the hero image or the headline behind it.

Serve modern formats (AVIF or WebP) at the dimensions actually displayed, not a 3000px original scaled down in CSS
Preload the hero image and give it fetchpriority="high"; let everything below the fold load lazily
Make sure the hero is not waiting on a JavaScript bundle or a font to paint
Put static assets on a CDN close to your users, and cache aggressively

If your LCP element is text, the usual culprit is font loading. Preload the one weight used above the fold, and set font-display: swap so text is readable immediately instead of invisible while a webfont downloads.

Interaction to Next Paint: stop blocking the main thread

INP replaced First Input Delay because it measures every interaction through the visit, not just the first. It exposes exactly one thing: a main thread too busy to respond.

Audit third-party scripts ruthlessly. Chat widgets, heatmaps and tag managers routinely cost more than every image on the page.
Break long tasks up and defer anything not needed for the first screen
Move heavy work off the main thread, or out to the server entirely
Avoid layout thrashing — batch DOM reads and writes rather than interleaving them

`js // Animate on the compositor, not the layout engine element.style.transform = 'translate3d(0, -12px, 0)'; element.style.willChange = 'transform'; `

Animating top or left forces the browser to recalculate layout on every frame. transform and opacity are handled by the GPU and leave the main thread free to answer the user.

Cumulative Layout Shift: reserve the space

CLS is the easiest of the three to fix and the most commonly ignored. Every element whose size is not known before it loads will push the page around when it arrives.

Set explicit width and height (or aspect-ratio) on every image, video and embed
Reserve a fixed box for ads, banners and cookie notices before they render
Never insert content above existing content after load, unless the user triggered it
Match skeleton loaders to the exact final height of the content they stand in for

Measure the right thing

Lighthouse is a debugging tool. The scoreboard is the Core Web Vitals report in Search Console, which reflects the Chrome User Experience Report — real visitors over a rolling 28-day window.

That lag matters: a fix shipped today will not show up there for weeks. Instrument your own field measurement with the web-vitals library so you can see the effect of a deploy within a day, and treat the Search Console report as confirmation rather than as your feedback loop.