Core Web Vitals Explained: What LCP, INP and CLS Mean and How to Fix Them

Core Web Vitals are Google's three measures of how a page feels to the people using it. You don't need to be a developer to understand them, and knowing what they mean makes it much easier to brief one.

The three metrics and their targets

• LCP (Largest Contentful Paint): loading. How long until the main content, usually a hero image or headline, appears. Good is 2.5 seconds or less. Above 4 seconds is poor.

• INP (Interaction to Next Paint): responsiveness. How quickly the page reacts when someone taps, clicks or types. Good is 200 milliseconds or less. Above 500 is poor. It replaced First Input Delay in March 2024.

• CLS (Cumulative Layout Shift): stability. How much things jump around while loading, like the button that moves just as you tap it. Good is 0.1 or less. Above 0.25 is poor.

Each is judged at the 75th percentile of real visits, separately for mobile and desktop. Google explains how the thresholds were set. In practice, a page has to work for your slowest quarter of visitors, not just on your office Wi-Fi.

Lab data and field data

This confuses a lot of people. Field data comes from real Chrome users and is what Google's assessment is based on. Lab data is one simulated test. Lab results are useful for debugging and for pages without enough traffic for field data, but a single Lighthouse score isn't your Core Web Vitals result.

Our free audit runs your site through Google's PageSpeed Insights on mobile and desktop and turns the results into a fix list.

How to fix a slow LCP

• Shrink the hero image. Serve WebP or AVIF, sized for the screen. A 4MB photo is the most common culprit.

• Don't lazy-load the main image. Lazy loading suits images further down the page and delays the one at the top.

• Speed up the server. Caching and a CDN help, because nothing can paint until the first response arrives.

• Keep text visible. Content that stays hidden until JavaScript runs can't count as painted.

How to fix a poor INP

• Cut third-party scripts. Chat widgets, trackers and tag managers all compete for the same main thread. Remove what nobody reads.

• Load less JavaScript up front. Delay anything that isn't needed for the first view.

• Break up long tasks, so the browser can respond between them.

How to fix a high CLS

• Give images and videos dimensions, so the browser reserves the space before they load.

• Reserve room for ads and embeds that arrive late.

• Don't insert banners above existing content after the page has rendered.

How much does this matter for rankings?

Page experience is one signal among many, and relevant content still comes first. The stronger business case is what speed does to people, which we cover in our post on speed and conversions.

Frequently Asked Questions

Why does my score change every time I test?

Lab tests vary with network and server conditions. Field data is a rolling 28-day view, so it moves slowly, and a fix can take weeks to show fully.

Do I need a score of 100?

No. Passing the three field metrics is what counts. Chasing the last few Lighthouse points rarely pays.

Can a plugin fix this?

Plugins can help with caching and image compression. They can't fix a heavy theme or too many scripts. For that, performance work has to go into the site itself.