How to Fix Core Web Vitals: A Practical Guide to LCP, INP and CLS

Where do you find your real Core Web Vitals data?

Start with field data, which comes from real Chrome users. The Core Web Vitals report in Google Search Console groups URLs by template and status, and PageSpeed Insights shows field data for a single URL or origin when enough traffic exists. Lab tools such as Lighthouse are useful for debugging, but Google uses field data, so a perfect Lighthouse score doesn’t guarantee a passing report.

Fix by template, not page by page. If one product page fails, they probably all do, and the fix belongs in the shared template.

How do you fix a slow Largest Contentful Paint (LCP)?

LCP is usually a hero image, a banner or a large heading. First identify the LCP element in PageSpeed Insights or Chrome DevTools. Then work through four stages: how long the server takes to respond, how long before the browser discovers the resource, how long it takes to download, and how long before it is rendered.

The highest-impact fixes are: serve the hero image in a modern format (WebP or AVIF) at the right size for each screen; don’t lazy-load the LCP image, and give it fetchpriority="high"; make sure it is in the initial HTML rather than injected by JavaScript or set as a CSS background discovered late; reduce server response time with caching or a CDN; and remove render-blocking CSS and fonts from the critical path.

How do you fix a poor Interaction to Next Paint (INP)?

INP replaced First Input Delay as a Core Web Vital in March 2024. It measures how quickly the page visibly responds after a click, tap or key press, across the whole visit. Poor INP almost always means the main thread is busy running JavaScript when the user interacts.

Find the slow interactions with the Performance panel in Chrome DevTools or a real-user monitoring tool. Then break up long tasks, defer or remove third-party scripts (chat widgets, heatmaps, tag managers with many tags), avoid re-rendering large parts of the page on every keystroke, and show immediate visual feedback before doing heavy work. On React sites, heavy client components and large hydration costs are frequent causes.

How do you fix Cumulative Layout Shift (CLS)?

Layout shift happens when something appears late and pushes content down. The usual culprits are images and embeds without width and height, ads and banners inserted above content, cookie notices that push the page instead of overlaying it, and web fonts that swap in with different metrics.

Always set dimensions or an aspect ratio on images, videos and iframes. Reserve space for ad slots and dynamic components. Use overlays for banners. Preload key fonts and use font metric overrides or a similar fallback font to minimise the swap. Avoid animations that change layout properties; animate transform and opacity instead.

Which fixes deliver the biggest wins fastest?

In our experience, four changes fix most failing sites: optimising and prioritising the hero image, removing or delaying unnecessary third-party scripts, adding dimensions to media, and adding proper caching at the server or CDN. On WordPress sites, replacing a heavy page builder theme or removing overlapping plugins often has an even bigger effect.

Prioritise templates with the most organic traffic, such as service pages, product pages and blog posts, rather than the homepage alone.

How long until Search Console shows the improvement?

Field data is based on a rolling 28-day window, so improvements appear gradually. After deploying fixes, use the “Validate fix” button in Search Console and expect the report to update over the following weeks. Keep monitoring: new scripts, images and features can quietly undo the gains, which is why performance works best as part of regular maintenance.

Do Core Web Vitals really affect rankings?

They are part of Google’s page experience signals, but relevance and content quality matter much more. Think of Core Web Vitals as a tie-breaker between otherwise similar pages, and as a conversion factor: faster, more stable pages lose fewer visitors, whatever their ranking.