Core Web Vitals: Understanding LCP, INP and CLS and How to Fix Them

Core Web Vitals are a set of three metrics defined by Google to measure the loading, interactivity and visual stability experience of a web page. They are part of the page experience signals used by Google Search, and above all they reflect what your visitors actually feel.

The three metrics are LCP (Largest Contentful Paint) for how fast the main content is displayed, INP (Interaction to Next Paint) for responsiveness to interactions, and CLS (Cumulative Layout Shift) for visual stability. INP replaced FID (First Input Delay) in March 2024.

Google evaluates each metric on field data, collected from real Chrome users, and considers the value at the 75th percentile of page loads. In other words, a page is "good" if at least three quarters of its loads meet the threshold.

Each metric has three ranges: good, needs improvement, poor. The thresholds are published and documented by Google on web.dev, and are the same for mobile and desktop, even though measured values often differ strongly between the two types of device.

A page must be "good" on all three metrics to pass the assessment. In practice, LCP on mobile fails most often, followed by INP on JavaScript-heavy sites. CLS is usually the simplest to fix once the cause has been identified.

Field data comes from the Chrome User Experience Report (CrUX) and is visible in Search Console, through the Core Web Vitals report, and in PageSpeed Insights. This is the data that counts for Google. It is only available if the site receives enough traffic.

Lab data (Lighthouse, WebPageTest, DevTools) simulates a load under fixed conditions. It is essential for diagnosing and reproducing, but it does not measure real INP, which depends on user interactions. A good Lighthouse score does not guarantee good Core Web Vitals.

For precise tracking, install Google's web-vitals library on your site and send the measurements to your analytics tool. You will know which pages, which devices and which elements cause problems, with a granularity that aggregated reports do not offer.

The LCP element is usually a hero image, a video shown as a poster image or a large block of text. Start by identifying that element, then make sure the browser discovers it as early as possible: image in the initial HTML, neither injected by JavaScript nor set as a CSS background, with high priority and no lazy loading.

Reduce server response time: page cache, CDN, optimised database. A high TTFB condemns LCP before the browser has even started to display anything. Then eliminate render-blocking resources, such as synchronous CSS and scripts in the head, which delay the first paint.

Finally, optimise the image itself: modern format (AVIF, WebP), dimensions suited to the screen, reasonable compression, and web fonts with font-display so that text does not stay invisible while waiting for the font.

INP measures the delay between an interaction (click, tap, keypress) and the next paint on screen, across the whole visit. A high value means the main thread is busy running JavaScript at the moment the user acts, and the interface feels frozen.

The usual causes are third-party scripts (advertising, tracking, chat, consent), heavy event handlers, massive DOM updates and frameworks that re-render entire trees. Break up long tasks, defer non-urgent work and prioritise immediate visual feedback.

Audit third-party scripts one by one and remove those that bring no measurable value. On React, Vue or Angular applications, profile renders and avoid unnecessary recomputation; server-side rendering and partial hydration also reduce the initial load.

CLS measures unexpected content movement during the life of the page: an image that appears and pushes the text down, a banner inserted at the top, a font that changes size as it loads. These shifts are particularly irritating on mobile, where they cause accidental taps.

Always reserve space: width and height attributes on images and videos, fixed dimensions for ad slots and embeds, and a fallback font whose metrics are adjusted to match the final font.

Never insert content above existing content without a user action, and prefer transform-based animations, which do not trigger layout recalculation, over animations of height or position.

Start with the pages that receive the most traffic and that fail in Search Console: home page, categories, product pages, articles. Tackle LCP first, whose fixes are often the most cost-effective, then INP, then CLS.

Measure after each fix with lab data, then wait for field data to update, which takes several weeks since it covers a rolling 28-day window. Continuous monitoring prevents regressions from settling in over successive deployments.