Core Web Vitals in 2026: How to Pass LCP, INP and CLS

Core Web Vitals are Google's way of measuring whether a page feels fast, responsive and stable to real people. They matter twice: as part of Google's page experience signals, and because slow, jumpy pages lose visitors before they ever read your offer. This guide explains the three metrics and the fixes that usually deliver the biggest gains.

The three metrics and their targets

Google assesses each metric at the 75th percentile of real user visits, split by mobile and desktop. To be rated "good", a page needs:

• Largest Contentful Paint (LCP): 2.5 seconds or less. How quickly the main content, usually a hero image or headline, becomes visible.
• Interaction to Next Paint (INP): 200 milliseconds or less. How quickly the page responds visually after clicks, taps and key presses throughout the visit. INP replaced First Input Delay in March 2024.
• Cumulative Layout Shift (CLS): 0.1 or less. How much visible content jumps around while loading.

How to measure properly

Use two kinds of data, because they answer different questions:

1. Field data from real visitors: the Core Web Vitals report in Google Search Console and the Chrome UX Report, also shown in PageSpeed Insights. This is what Google uses.
2. Lab data from a controlled test: Lighthouse and the Performance panel in Chrome DevTools. Use it to find and fix causes, since it is repeatable.

A good score in the lab does not guarantee a good field score, so always check both.

Fixing LCP

LCP is usually an image or a large text block. Work through the delay in order:

• Find the LCP element in DevTools, then make sure it is in the HTML and discoverable early, not injected late by JavaScript.
• Never lazy-load the LCP image. Load it eagerly and consider a high fetch priority hint.
• Serve right-sized, modern images in AVIF or WebP with responsive `srcset` sizes.
• Reduce server response time with caching, a content delivery network and efficient hosting.
• Remove render-blocking resources: inline critical CSS, defer non-essential scripts and preload key fonts.
• Pre-render or statically generate pages so the browser receives real content immediately instead of an empty shell.

Fixing INP

Poor INP almost always comes from the main thread being busy when the user interacts.

• Break up long tasks so the browser can respond between chunks of work.
• Ship less JavaScript: split bundles by route, remove unused dependencies and load heavy features only when needed.
• Audit third-party scripts such as chat widgets, tag managers and trackers, which are frequent offenders. Delay or remove any that do not earn their cost.
• Keep event handlers light and avoid forcing large layout recalculations on every interaction.
• Provide immediate visual feedback such as a pressed state or loading indicator, then do the heavy work.

Fixing CLS

Layout shift is caused by content appearing without reserved space.

• Set width and height (or an aspect ratio) on every image, video and embed.
• Reserve space for ads, banners, cookie notices and late-loading widgets.
• Load fonts carefully with `font-display` and size-adjusted fallbacks so text does not jump when the web font arrives.
• Never insert content above existing content after load unless it is a response to user input.

A simple order of work

1. Test your key templates in PageSpeed Insights and note the failing metric.
2. Fix the single largest cause first, usually the hero image, a heavy script or missing dimensions.
3. Re-test, deploy and wait for field data to update, which can take several weeks.
4. Add performance budgets to your build so regressions are caught before release.

Why it pays off

Faster, steadier pages tend to convert better, reduce bounce and make the whole site feel more trustworthy. Our Growth website package includes a Core Web Vitals pass as standard. If your site is failing, our web development team can audit it and fix the root causes, or you can get in touch for a quick review.