How to Improve Core Web Vitals (LCP, INP and CLS)
To improve Core Web Vitals, measure real-user data in Search Console or PageSpeed Insights, then fix the metric that fails on your most important templates. Speed up Largest Contentful Paint by serving the main image or headline quickly; improve Interaction to Next Paint by reducing heavy JavaScript and third-party scripts; prevent Cumulative Layout Shift by reserving space for images, ads and embeds. Good scores are LCP 2.5 seconds or less, INP 200 milliseconds or less and CLS 0.1 or less, at the 75th percentile.
- Core Web Vitals are LCP (loading), INP (responsiveness) and CLS (visual stability).
- INP replaced First Input Delay as a Core Web Vital in March 2024.
- Google assesses the 75th percentile of real visits, separately for mobile and desktop.
- Lab tools like Lighthouse help diagnose issues, but field data from real users is what counts.
- Page experience is one ranking signal among many; it rarely outweighs relevance and content quality.
The Steps
- Check field data firstOpen the Core Web Vitals report in Search Console and run key URLs through PageSpeed Insights. Note which metric fails, on mobile or desktop, and which page templates are affected.
- Find the LCP elementIn PageSpeed Insights or Chrome DevTools, identify the largest element in the viewport, usually a hero image or headline, and see how long each phase takes before it renders.
- Speed up the LCP resourceServe the hero image in a modern format at the right size, do not lazy-load it, give it fetchpriority high, and reduce server response time with caching and a CDN.
- Remove render-blocking codeInline critical CSS, defer non-essential scripts, and load fonts efficiently so the browser can paint the main content without waiting on files it does not need yet.
- Reduce JavaScript for INPAudit third-party tags, chat widgets and trackers, remove what you do not use, delay the rest until after load, and break long tasks into smaller pieces.
- Reserve space to stop CLSSet width and height or aspect-ratio on images and videos, reserve fixed space for ads, embeds and banners, and avoid inserting content above what the user is reading.
- Test on a mid-range phoneUse Chrome DevTools throttling or a real mid-range Android phone on a mobile connection, since most failing scores come from mobile visitors on slower devices.
- Deploy and monitor for 28 daysField data in CrUX and Search Console covers a rolling 28-day window, so expect improvements to appear gradually. Use Validate Fix in Search Console once changes are live.
The Three Metrics and Their Thresholds
Core Web Vitals are Google's measures of how a page feels to real visitors. There are three:
- Largest Contentful Paint (LCP) measures loading: how long until the largest image or text block in the viewport appears. Good is 2.5 seconds or less; poor is over 4 seconds.
- Interaction to Next Paint (INP) measures responsiveness: how quickly the page visibly responds after a tap, click or key press, across the whole visit. Good is 200 milliseconds or less; poor is over 500 milliseconds. INP replaced First Input Delay in March 2024 because FID only measured the first interaction.
- Cumulative Layout Shift (CLS) measures visual stability: how much content jumps around as the page loads. Good is 0.1 or less; poor is over 0.25.
A page passes when at least 75% of real visits meet the good threshold for each metric, measured separately for mobile and desktop.
Field Data vs Lab Data
This distinction causes more confusion than anything else. Field data comes from real Chrome users through the Chrome UX Report (CrUX), and it is what Search Console and the top of PageSpeed Insights show. Lab data, such as a Lighthouse score, is a simulated test on one device and connection. A Lighthouse score of 65 does not mean your site fails Core Web Vitals, and a score of 98 does not mean it passes.
Use field data to decide what to fix and lab tools to work out why. Smaller sites may not have enough traffic for page-level field data; Search Console then groups similar URLs, and PageSpeed Insights may fall back to origin-level data. Lab testing on a throttled mobile profile is the practical substitute.
Work by template, not by URL. A service business site usually has a handful of templates: home, service page, location page, blog post, contact. If the service template fails LCP, fixing it once fixes every service page. Start with the templates that carry the most traffic and leads, and keep a short before-and-after log so you can tell which change moved which metric.
Fixing LCP
Most LCP problems on small-business sites come from the hero image. Common causes and fixes:
- Oversized images: a 4,000-pixel photo served to a phone. Resize, use modern formats such as WebP or AVIF, and serve responsive sizes with
srcset. - Lazy-loading the hero: many themes lazy-load every image, including the one at the top. Remove lazy loading from the LCP image and add
fetchpriority="high". - Slow server response: uncached pages on cheap shared hosting. Page caching, a CDN and fewer server-side plugins usually help most.
- Render-blocking CSS and fonts: large stylesheets and several font files delay the first paint. Trim unused CSS and limit font weights.
Fixing INP and CLS
INP problems come from JavaScript keeping the browser's main thread busy, so taps wait in a queue. The usual culprits on marketing sites are third-party scripts: chat widgets, heatmaps, multiple analytics and ad pixels, review carousels and A/B testing tools. Remove tags you no longer use, load the rest after the page is interactive, and ask developers to break long tasks into smaller chunks so the browser can respond in between. Heavy page builders and sliders also add a lot of script; simpler templates often fix INP outright.
CLS is usually the easiest to fix. Give every image and video explicit width and height (or an aspect-ratio), reserve space for ads, embeds and cookie banners, and avoid injecting promotional bars above content after load. Web fonts that swap in with different sizes can also cause shifts; matching fallback font metrics reduces them.
How Much Core Web Vitals Matter for Rankings
Google uses Core Web Vitals as part of its page experience signals, but it is clear that relevance and helpful content come first and that good page experience alone does not guarantee rankings. In practice, passing Core Web Vitals is a tie-breaker in search and a real factor in conversions: a page that loads quickly and does not jump around is easier to use and more likely to turn a visitor into a lead. Treat it as part of a broader technical SEO audit, and if your current platform makes good scores impossible, our comparison of WordPress, Webflow and custom websites covers the tradeoffs of rebuilding.
Sources and Further Reading
We link to the primary documentation so you can verify the details yourself.
- Web Vitals, web.dev (Google)
- Optimize Largest Contentful Paint, web.dev (Google)
- Optimize Interaction to Next Paint, web.dev (Google)
- Cumulative Layout Shift (CLS), web.dev (Google)
- Core Web Vitals report, Google Search Console Help
- Understanding page experience in Google Search results, Google Search Central
Related Questions
Why does PageSpeed Insights show a low score when my site passes Core Web Vitals?
The performance score comes from a simulated lab test, while the Core Web Vitals assessment uses real visitors' data. Real users may have faster devices or cached files. Pass or fail is based on field data, so prioritize that over the score.
How long does it take for Core Web Vitals improvements to show?
Field data uses a rolling 28-day window, so improvements appear gradually and fully reflect about four weeks after the fix. In Search Console, start validation once changes are live and Google will track the affected URLs.
Is FID still a Core Web Vital?
No. Interaction to Next Paint replaced First Input Delay as a Core Web Vital in March 2024. INP is stricter because it considers interactions throughout the visit, not just the first one, so sites that passed FID can fail INP.
Do Core Web Vitals affect Google Ads?
They are not a direct Google Ads metric, but landing page experience is part of Quality Score, and slow, unstable pages tend to convert worse. Faster landing pages usually improve both conversion rates and the efficiency of ad spend.