Fundamentals of Core Web Vitals: LCP, INP and CLS Explained

Core Web Vitals are three Google metrics that measure real users’ experience of a web page.

• Largest Contentful Paint (LCP) measures loading speed.
• Interaction to Next Paint (INP) measures how quickly the page responds.
• Cumulative Layout Shift (CLS) measures visual stability.

A page passes when at least 75% of visits score 2.5 seconds or less for LCP, 200 milliseconds or less for INP, and 0.1 or less for CLS.

This guide explains what each metric means, how to test your pages and the fixes that make the biggest difference.

What are Core Web Vitals?

Core Web Vitals are part of Google’s Web Vitals initiative, a set of signals for a good experience on the web. Of all the Web Vitals, these three matter most because they cover the moments users notice:

• Is it loading? (LCP)
• Does it respond when I tap? (INP)
• Does the page stay still? (CLS)

Google confirms that Core Web Vitals are used by its ranking systems, as part of a wider page experience (Core Web Vitals and Google Search). Great content still matters most. But between similar pages, the one that’s faster and more stable has the edge, and visitors are more likely to stay.

Core Web Vitals thresholds at a glance

The 75th percentile rule: Google looks at the 75th percentile of real visits, on mobile and desktop separately. So at least three out of four visits need a “good” score, including visits from slower phones and networks.

1. Largest Contentful Paint (LCP)

LCP measures how long it takes for the largest visible element in the viewport to appear. That’s usually the hero image, a big heading or a video poster. It’s a good sign of when a visitor feels “the page has loaded”.

Common causes of slow LCP:

• Slow server response (time to first byte)
• A large, uncompressed hero image
• Render-blocking CSS and JavaScript
• The hero image being lazy-loaded or discovered late
• Content that only appears after JavaScript runs

How to improve LCP:

• Use good hosting, page caching and a CDN.
• Compress the hero image and serve WebP or AVIF in the right size.
• Never lazy-load the LCP image. Add fetchpriority="high" to it instead.
• Inline critical CSS and defer non-essential JavaScript.
• Preload key fonts and the hero image if they’re found late.

2. Interaction to Next Paint (INP)

INP measures how quickly the page responds visually after a user clicks, taps or types. It looks at interactions throughout the whole visit and reports one of the slowest.

INP replaced First Input Delay (FID) as a Core Web Vital on March 12, 2024. FID only measured the delay before the first interaction was handled. INP measures the full response time of all interactions, so it’s a much better reflection of how responsive a page feels. If an older guide still talks about FID, it’s out of date.

Common causes of poor INP:

• Long JavaScript tasks blocking the main thread
• Heavy third-party scripts, such as chat widgets, trackers and ads
• Large, complex pages (an excessive DOM size)
• Slow event handlers that do too much work at once

How to improve INP:

• Remove or delay third-party scripts you don’t need.
• Break long tasks into smaller ones, so the browser can respond between them.
• Show visual feedback immediately, then do the heavy work.
• Reduce the DOM size: fewer nested elements and fewer page-builder wrappers.
• On WordPress, remove unused plugins, and only load scripts on the pages that need them.

3. Cumulative Layout Shift (CLS)

CLS measures how much visible content moves unexpectedly while the page is in use. You’ve seen it: you go to tap a link, an image or ad loads above it, and you tap the wrong thing.

Common causes of high CLS:

• Images, videos and iframes without set width and height
• Ads, embeds and banners that load in with no reserved space
• Web fonts that swap in and change the text size
• Content added above existing content, like cookie bars that push the page down

How to improve CLS:

• Always set width and height (or aspect-ratio) on images and videos.
• Reserve space for ads, embeds and banners.
• Use font-display: swap with a fallback font of similar size.
• Show cookie notices and banners as overlays, not by pushing content down.
• Animate with transform, not by changing size or position.

Field data vs lab data

You’ll see two kinds of data, and it helps to know the difference.

• Field data comes from real Chrome users, through the Chrome UX Report. This is what Google uses for ranking. It covers the last 28 days, so changes take a few weeks to show.
• Lab data comes from a simulated test, for example Lighthouse. It’s great for debugging, but it isn’t what Google ranks on.

If the two disagree, trust the field data for how users actually experience the page, and use the lab data to find the cause.

How to measure Core Web Vitals

• PageSpeed Insights: enter any URL to see field data (if there’s enough traffic) and lab data, with suggested fixes.
• Google Search Console: the Core Web Vitals report groups your URLs into Good, Needs improvement and Poor for mobile and desktop.
• Lighthouse and Chrome DevTools: run lab tests, and use the Performance panel to find exactly what’s slow.
• The web-vitals JavaScript library: collects real-user data from your own visitors, if you want your own reporting.

You’ll find these and more in our list of the top 10 free SEO tools.

Quick wins for WordPress sites

Many sites on this blog run WordPress, so here’s where to start:

• Use a fast host, page caching and a CDN.
• Use a lightweight theme and fewer page-builder sections.
• Remove unused plugins, and delay chat, tracking and social scripts.
• Compress images, use WebP and set image dimensions.
• Exclude the hero image from lazy loading.
• Limit fonts to one or two families.

Step-by-step guides: speed up WordPress in 2026 and WordPress speed optimization.

Do Core Web Vitals affect SEO rankings?

Yes, but they’re one part of the picture. Google uses Core Web Vitals in its ranking systems and recommends good scores for success in search. It also says that great Core Web Vitals don’t guarantee top rankings, and that relevant, helpful content comes first.

The practical takeaway: don’t chase a perfect 100 Lighthouse score. Get all three metrics into the “good” range for real users, then put your effort back into content. A faster, more stable page also tends to keep visitors longer and convert better, which helps your business whether or not rankings move.

Design choices drive most of these scores. Our guide to SEO web page design covers the layout side, and mobile-first indexing factors explains why your mobile scores matter most.

Core Web Vitals checklist

• LCP 2.5s or less on mobile and desktop
• INP 200ms or less
• CLS 0.1 or less
• Hero image compressed, correctly sized and not lazy-loaded
• Width and height set on all images, videos and embeds
• Unused plugins and third-party scripts removed or delayed
• Page caching and a CDN enabled
• Fonts limited, with font-display: swap
• Search Console’s Core Web Vitals report checked monthly

For images, see our full guide on image SEO optimization, and check your site for these common technical SEO mistakes. Pair this with the on-page SEO checklist for the content side.

FAQ

What are the three Core Web Vitals?

Largest Contentful Paint (LCP) for loading, Interaction to Next Paint (INP) for responsiveness, and Cumulative Layout Shift (CLS) for visual stability.

What is a good Core Web Vitals score?

LCP of 2.5 seconds or less, INP of 200 milliseconds or less, and CLS of 0.1 or less, for at least 75% of visits.

Is FID still a Core Web Vital?

No. Google replaced First Input Delay with Interaction to Next Paint on March 12, 2024.

Why are my PageSpeed Insights and Search Console results different?

PageSpeed Insights shows one URL’s data, while Search Console groups similar URLs. Field data also covers the last 28 days, so recent fixes take a few weeks to appear.

How long does it take to see improvements?

Lab scores change as soon as you fix something. Field data, which Google uses, takes up to 28 days to fully reflect the change.

Do Core Web Vitals affect rankings?

Yes, as part of Google’s page experience signals. But content relevance and quality matter more, so aim for “good” scores rather than a perfect 100.

Final thoughts

Core Web Vitals come down to three questions: does the page load fast, does it respond quickly, and does it stay still? Measure with PageSpeed Insights and Search Console, fix the biggest issue first (usually the hero image, heavy scripts or missing image sizes), and give field data a few weeks to catch up.

If you’d rather have an expert find and fix the issues, our technical SEO audit covers Core Web Vitals in depth. Get in touch with our team today.

Saurabh K. has been working in SEO and digital marketing for 10+ years, helping businesses grow their search traffic.