Core Web Vitals: LCP, INP and CLS Explained
What are Core Web Vitals?
core web vitals = a set of metrics measuring website loading performance, interactivity, and visual stability.
Core Web Vitals are essential metrics that help measure and improve website performance. They focus on three key aspects: loading speed, interactivity, and visual stability. These metrics are crucial for ensuring a good user experience, which is increasingly important for search engine optimization (SEO). Understanding and optimising them lets you improve a site's page speed, leading to better SEO results and user engagement. As search engines prioritise user-centric performance, they are an effective way to protect a site's visibility.
What are the three Core Web Vitals?
They are Largest Contentful Paint (LCP), which measures how long the main content takes to appear and should be 2.5 seconds or less; Interaction to Next Paint (INP), which measures how quickly the page responds to interactions and should be 200 milliseconds or less; and Cumulative Layout Shift (CLS), which measures how much the layout moves while loading and should be 0.1 or less. Google scores each of them at the 75th percentile of real visits over the previous 28 days, so a page passes only when roughly three quarters of its visits clear the threshold. Interaction to Next Paint replaced First Input Delay on 12 March 2024; FID is no longer a Core Web Vital and no longer counts toward anything.
A simple illustration
Imagine your website as a smooth-running train. Core Web Vitals are like the tracks, signals, and seating arrangements that ensure a comfortable, timely, and safe journey for passengers. If the tracks are bumpy (slow loading), signals are delayed (poor interactivity), or seats are unsteady (visual instability), passengers won’t enjoy the ride. Similarly, optimising them ensures visitors have a pleasant experience navigating your site, improving satisfaction and SEO.
What good looks like, metric by metric
To understand how these metrics apply in the real world, here is what each one asks of a page. This will help improve user experience and elevate page speed SEO.
- Largest Contentful Paint (LCP): Imagine a client's website where images and videos are the main attractions. To optimize LCP, it's important to ensure these elements load within 2.5 seconds. This means compressing images and using modern file formats like WebP, swiftly delivering the content.
- Interaction to Next Paint (INP): On an e-commerce site, users frequently interact by adding items to a cart or submitting forms. Improving INP involves breaking up long JavaScript tasks, offloading work to web workers, and letting the browser paint between steps. INP measures every interaction on the page, not just the first one, and a good score keeps the slowest of them under 200 milliseconds.
- Cumulative Layout Shift (CLS): Consider a blog page that frequently updates with new posts. If elements shift unexpectedly as these posts load, it disrupts reading. Achieving a stable CLS involves assigning size attributes to media and using CSS to reserve space for dynamic content, keeping the layout consistent and stable.
Implementing these strategies does not only lift the scores; it also produces a seamless user experience. This translates to higher satisfaction and potentially better search engine rankings.
Common Mistakes
Neglecting image optimization, leading to slow load times for Largest Contentful Paint (LCP).
Overloading the site with unoptimized scripts, causing long tasks and a poor Interaction to Next Paint (INP).
Failing to define size attributes, resulting in unwanted Cumulative Layout Shift (CLS).
Still optimising for First Input Delay. FID was retired on 12 March 2024 and no longer counts toward anything.
Judging the page on a single lab test instead of the field data Google actually scores.
The three metrics in detail
These are the specific factors that Google considers important in a webpage's user experience. They include three primary metrics: Largest Contentful Paint (LCP), Interaction to Next Paint (INP), and Cumulative Layout Shift (CLS). Each of these metrics looks at a different aspect of the page - how fast it shows up, how quickly it answers you, and how still it holds - which together make up a smooth online experience.
- Largest Contentful Paint (LCP): This measures the time it takes for the largest visible content, such as images or blocks of text, to load. A good LCP should occur within 2.5 seconds after the page starts loading.
- Interaction to Next Paint (INP): This gauges how long the page takes to show a visible response after a user interacts with it - clicking a link, tapping a button, typing into a field. INP looks at every interaction across the whole visit and reports close to the worst one, so a single slow menu can set the score. A good INP is 200 milliseconds or less.
- Cumulative Layout Shift (CLS): This checks how much the layout of a webpage shifts unexpectedly when elements load. A stable page should have a CLS score of less than 0.1, preventing any disruptive movements that can confuse users.
By focusing on these three measurements, a website enhances its user experience, leading to improved satisfaction and potentially better rankings in search engine results.
How to improve Core Web Vitals
-
Optimize Images:
- Use formats like WebP or JPEG XR to reduce image size without losing quality. This enhances LCP by speeding up load times.
-
Minimize JavaScript:
- Limit the use of heavy JavaScript to improve INP. Break long tasks into shorter ones and defer non-critical scripts so the main thread is free to respond.
-
Implement Lazy Loading:
- Only load images and iframes when they are needed. This technique can enhance LCP and overall load speed.
-
Set Proper Dimensions:
- Always define width and height for images and videos. This helps reduce CLS by preventing unexpected layout shifts.
-
Use a Content Delivery Network (CDN):
- A CDN distributes your content across multiple locations, giving faster access to users wherever they are, which helps every one of the three metrics.
-
Leverage Browser Caching:
- Enable caching to allow pages to load faster on repeat visits. This helps with LCP and overall page speed.
-
Evaluate Third-Party Scripts:
- Audit and remove unnecessary third-party scripts slowing down your site. Keeping them to a minimum improves INP, because third-party tags are a common source of long tasks.
-
Optimize Fonts:
- Choose fast-loading web-safe fonts, preload the critical ones, and set font-display so text paints immediately. This helps LCP and prevents the layout shift a late font swap causes.
Applying these strategies can significantly improve all three scores, providing a smoother, more enjoyable experience for users and potentially enhancing your page speed SEO rankings.
Core Web Vitals SEO: how much do they actually move rankings?
It is worth getting right, but it is worth being honest about the size of the effect. Google has described page experience as a tiebreaker rather than a primary ranking factor: it will not lift a page above a more relevant result, and a fast page with thin content still loses to a slow page that answers the question better. Where Core Web Vitals earn their keep is between pages that are already close on relevance and authority, and in the behaviour they change - a page that paints quickly and holds still keeps more of the people who arrive on it.
That makes the sensible order of work clear. Fix relevance and content first, then treat page speed SEO as the layer that stops you losing traffic you have already earned. If your Core Web Vitals are failing, the cost is rarely a ranking penalty; it is the visitors who leave before the page settles.
Which Core Web Vital should you fix first?
Does page speed affect SEO enough to justify the work? On its own, rarely - but the order you tackle the three metrics decides how much you get back for the effort. Start with the metric that is failing at the 75th percentile, not the one with the ugliest lab score, and work on one at a time so you can tell which change moved the number.
In practice the order that pays best is CLS, then LCP, then INP. Cumulative Layout Shift is usually the cheapest to fix and the most visible to a reader: reserving space for images, ads and embeds removes most of it in an afternoon. Largest Contentful Paint is next, because the usual causes - an oversized hero image, a render-blocking stylesheet, a slow server response - are well understood and each has a standard remedy. Interaction to Next Paint comes last because it means auditing JavaScript, which is the slowest and most invasive work of the three.
Treat site speed SEO as maintenance rather than a project. A page that passes today can fail next quarter after a new embed, a tag manager script or a redesigned hero, and a monthly read of the Search Console report catches that drift while it is still one page rather than a whole template. Core Web Vitals optimization done this way is a habit, not a sprint, and it belongs alongside the wider technical SEO checklist you should already be running.
How to measure Core Web Vitals
There are two kinds of data here and only one of them is scored. Field data is collected from real Chrome users and published in the Chrome UX Report; it is what the Core Web Vitals report in Google Search Console shows, and it is what Google uses. Lab data comes from a single simulated load in a tool such as Lighthouse or PageSpeed Insights. Lab data is far better for diagnosing a cause, because it can point at the specific script or image responsible, but it cannot tell you whether you pass - one test is one bar on the chart above.
A workable routine is to read Search Console monthly to see which URL groups fail and on which metric, then run PageSpeed Insights on one representative URL from a failing group to find out why. Note that INP can only be measured properly in the field, because it needs real interactions; a lab tool substitutes Total Blocking Time as a proxy for it.
Frequently asked questions
Is First Input Delay still a Core Web Vital?
No. Google retired First Input Delay on 12 March 2024 and replaced it with Interaction to Next Paint. FID only measured the delay before the browser started processing your very first interaction, which meant a page could score well while every later interaction felt slow. INP measures the full time from an interaction to the next visible paint, across every interaction in the visit. If a guide or an audit still lists FID, it predates the change.
What is a good Core Web Vitals score?
A page passes when all three metrics are in the good band at the 75th percentile of real visits: LCP at 2.5 seconds or less, INP at 200 milliseconds or less, and CLS at 0.1 or less. Between those thresholds and the poor thresholds - 4 seconds, 500 milliseconds and 0.25 - the metric reads "needs improvement". There is no partial credit: failing one metric fails the assessment.
Do Core Web Vitals affect rankings?
Yes, but modestly and indirectly. They are part of Google's page experience signals, which act as a differentiator between results of similar relevance rather than as a way to outrank more useful content. The larger and more reliable return is behavioural: fewer people abandon a page that paints quickly and does not move under their thumb.
How do I improve Core Web Vitals on a slow page?
Work one metric at a time and start with the one that is failing. For LCP, find the largest element above the fold and make it arrive sooner - compress it, serve it in a modern format, preload it, and remove anything blocking the render ahead of it. For INP, find the long tasks and break them up. For CLS, reserve space: set width and height on every image and iframe, and never insert content above something the reader is already looking at.
Why do my PageSpeed Insights and Search Console scores disagree?
Because they are measuring different things. Search Console reports field data from real visits over 28 days, which is what Google scores. PageSpeed Insights shows that same field data at the top of the report but its familiar 0-100 performance number comes from a single lab run on a simulated device. A lab score of 95 and a failing field assessment are entirely compatible, and when they disagree the field data is the one that counts.
What is Interaction to Next Paint?
Interaction to Next Paint measures how long a page takes to show a visual response after someone interacts with it - a tap, a click or a key press. It looks at the slowest interactions across the whole visit rather than only the first one, and a page passes when that figure is 200 milliseconds or less at the 75th percentile. It replaced First Input Delay in March 2024.
How to fix Largest Contentful Paint
Identify the LCP element first - PageSpeed Insights names it, and it is usually a hero image, a heading or a background. Then remove what delays it: compress and correctly size that image, serve it in a modern format, preload it, and cut render-blocking CSS and fonts loading above it. If the server's first response is slow, no front-end fix will rescue the metric.
How to reduce Cumulative Layout Shift
Reserve the space every element will occupy before it loads. Set explicit width and height attributes on images and video, give ad slots and embeds a fixed container, and avoid inserting banners above content that has already rendered. Web fonts are the other common cause: use font-display: optional, or match the fallback metrics, so text does not reflow when the custom font arrives.
What is a good LCP score?
2.5 seconds or less at the 75th percentile of real visits is good. Between 2.5 and 4 seconds needs improvement, and anything above 4 seconds is poor. The threshold is read from field data over a rolling 28-day window, so a single fast lab run does not mean the page passes.
See where your site stands. The free AI-powered SEO audit is your first telemetry read.
Request your free auditSEO pricing calculatorBook a strategy call
Keep exploring this topic
This guide is part of our Technical SEO cluster.