Web Performance & SEO Guide
How to Improve Core Web Vitals: LCP, INP & CLS Fixes That Actually Work
A practical, jargon-free guide to passing Google's page experience signals, climbing search rankings, and turning visitors into customers.
3 Key Facts Every Site Owner Should Know
- Sites that pass all Core Web Vitals thresholds rank an average of 2.3 positions higher in Google search results than sites that fail even one metric, according to a 2024 analysis of over 107,000 pages.
- A one-second mobile page load delay can cut conversion rates by up to 20%. Vodafone saw an 8% increase in sales just from a 31% improvement in their LCP score.
- More than 50% of websites worldwide still fail Core Web Vitals, which means getting your scores into the "Good" range is a real competitive advantage, not just a technical checkbox.
| Metric | What It Measures | Good Threshold | Primary Fix |
|---|---|---|---|
| LCP (Largest Contentful Paint) | Loading speed of main content | Under 2.5 seconds | Optimize images, use a CDN, reduce TTFB |
| INP (Interaction to Next Paint) | Responsiveness to all user interactions | Under 200 ms | Reduce JavaScript execution, defer third-party scripts |
| CLS (Cumulative Layout Shift) | Visual stability of page elements | Under 0.1 | Set explicit dimensions for images and ads |
What Are Core Web Vitals and Why Do They Matter for SEO?
Core Web Vitals are a set of three user experience metrics that Google uses as ranking signals to measure real-world page performance. They are not abstract lab numbers. They are collected from actual Chrome users visiting your site and fed into the Chrome User Experience Report (CrUX). Google uses these signals as part of its Page Experience ranking system, meaning they directly affect where your pages appear in search results.
The three metrics are Largest Contentful Paint (LCP), Interaction to Next Paint (INP), and Cumulative Layout Shift (CLS). All three must reach the "Good" threshold to pass. Two "Good" scores and one "Poor" still counts as a failure. It is a pass/fail system with no partial credit.
2.3
Average position gain for sites passing all CWV thresholds
50%+
Of websites worldwide still fail Core Web Vitals
20%
Drop in conversions from a 1-second mobile load delay
28
Days for improvements to appear in Google Search Console
One thing worth understanding: Google evaluates Core Web Vitals separately for mobile and desktop. Since the majority of searches happen on mobile, and most sites perform worse on mobile, this is where CWV has the largest impact on your rankings. If your site passes on desktop but fails on mobile, you are still losing ranking potential on the searches that matter most.
Important: Google needs at least 28 days of real user data to reflect your improvements in Search Console. Make your fixes, then wait a full reporting cycle before judging the results.
How to Improve LCP (Largest Contentful Paint)
Largest Contentful Paint measures how long it takes for the largest visible element on the page to appear on a user's screen. This is usually a hero image, a large heading, or a video thumbnail. The good threshold is under 2.5 seconds. Anything above 4 seconds is classified as "Poor" and actively hurts your rankings.
LCP is the metric with the strongest observed correlation to ranking position, and it is also the one most site owners struggle with. The root causes almost always fall into one of four categories:
1. Slow Server Response Time (TTFB)
Time to First Byte (TTFB) is the foundation of a good LCP score. If the server is slow to deliver the initial HTML, everything downstream is delayed. The fastest fix here is switching to a faster hosting provider, implementing server-side caching, or adopting a Content Delivery Network (CDN). A CDN stores cached versions of your pages on servers around the world, so visitors get content from the nearest location rather than waiting for your origin server to respond.
2. Render-Blocking Resources
Render-blocking JavaScript and CSS prevent the browser from painting your page content until those files finish downloading and executing. Defer any JavaScript that is not needed for the initial render using the defer or async attribute on script tags. Move non-critical CSS to load after the main content. Minify and compress all stylesheets to reduce their file size.
3. Unoptimized Images
If your LCP element is an image, its file size is the single biggest factor. Convert images to modern formats like WebP or AVIF, which offer the same visual quality at 25 to 50 percent smaller file sizes compared to JPEG. Always set explicit width and height attributes, and use the fetchpriority="high" attribute on your LCP image so the browser loads it before anything else on the page. Do not lazy-load your hero image. That is one of the most common mistakes that tanks LCP scores.
4. Excessive JavaScript Execution
Heavy JavaScript frameworks delay LCP by keeping the browser's main thread occupied. Code splitting, tree shaking, and deferred loading of non-critical scripts are the standard solutions. If you are on WordPress, a plugin like WP Rocket or LiteSpeed Cache can handle most of this automatically without touching code.
Quick win: Add
rel="preload" to your LCP image in the <head> of your HTML. This one line tells the browser to fetch that image at the highest priority, often cutting LCP by 300 to 500 milliseconds.
How to Improve INP (Interaction to Next Paint)
Interaction to Next Paint replaced the old First Input Delay (FID) metric in March 2024 and is significantly harder to pass. While FID only measured the delay before the browser started processing the first click, INP measures the delay for every interaction a user makes throughout their entire visit, from clicking buttons to typing in forms to opening menus. The "Good" threshold is under 200 milliseconds.
Third-party scripts are responsible for 54% of INP problems. Analytics platforms, chat widgets, ad scripts, and social sharing buttons all run JavaScript that competes with your page for the browser's main thread. Auditing and removing non-essential third-party scripts is often the fastest way to bring INP into the "Good" range.
Practical INP Fixes
Break up long JavaScript tasks into smaller chunks so the browser can respond to user input between them. Use setTimeout or the Scheduler API to yield control back to the browser after each chunk. If you are running a React or Vue application, consider using web workers to move heavy computation off the main thread entirely. Heavy JavaScript frameworks increase INP by an average of 120 to 180 milliseconds, so evaluate whether every library you import is truly necessary.
Tool to use: Open Chrome DevTools, go to the Performance panel, record an interaction, and look for tasks highlighted in red. Those are your "long tasks" blocking INP. Fix the longest ones first.
How to Fix Cumulative Layout Shift (CLS)
Cumulative Layout Shift measures how much your page content unexpectedly moves around while it loads. The "Good" threshold is a CLS score under 0.1. A score above 0.25 is "Poor." If you have ever tapped a button on your phone only to have an ad load and push everything down so you tap the wrong thing, that is CLS causing a bad experience.
The most common causes of high CLS are images without explicit dimensions, ads and embeds without reserved space, and web fonts that cause a flash of unstyled text that shifts the layout when they load.
How to Eliminate Layout Shift
Always set explicit width and height attributes on every image and video element. This one change lets the browser allocate the correct space in the layout before the image downloads, preventing any shift. For ad slots, reserve the maximum ad size in your CSS rather than letting the ad expand into undefined space. For web fonts, use font-display: optional or font-display: swap in your CSS and preload your critical fonts in the page head. For any content that loads dynamically (carousels, pop-ups, cookie banners), place it below the fold or use CSS transforms instead of properties that trigger layout recalculation.
Best Tools to Measure and Monitor Core Web Vitals
Knowing your scores before and after making changes is the only way to confirm your fixes are working. These are the tools professionals use for Core Web Vitals measurement and monitoring:
| Tool | Data Type | Best For | Cost |
|---|---|---|---|
| Google PageSpeed Insights | Lab + Field (CrUX) | Quick page-level audits, diagnostics | Free |
| Google Search Console | Field (CrUX) | Site-wide monitoring, group URLs by status | Free |
| Chrome DevTools | Lab | Deep debugging of LCP, INP, long tasks | Free |
| GTmetrix | Lab | Waterfall charts, historical tracking | Free / Paid |
| WebPageTest | Lab | Advanced multi-location testing, film strips | Free |
| Lighthouse (CLI / DevTools) | Lab | Automated audits with specific recommendations | Free |
Always confirm your improvements using field data from Google Search Console or PageSpeed Insights, not just lab scores. Lab tools simulate a single visit under controlled conditions. Field data reflects real users on real devices and real network speeds, which is what Google actually uses for ranking. A 90+ Lighthouse score does not guarantee you pass CWV in the field.
Why Landing Pages Need Core Web Vitals Optimization More Than Any Other Page
Most businesses run paid ads and SEO campaigns that drive traffic to landing pages. If those landing pages are slow, every dollar you spend on traffic is partly wasted. A visitor who bounces in 2 seconds because your page was still loading never had a chance to become a customer.
Landing page speed optimization directly affects your Google Ads Quality Score, which in turn determines your cost per click and your ad placement. A faster, better-experience landing page means you pay less for each click and rank higher in paid results. On the organic side, a landing page that passes Core Web Vitals has a measurable edge over a competitor's page with similar content.
The math is simple: Renault found that every one-second improvement in LCP reduced their bounce rate by 14% and increased conversions by 13%. eBay discovered that just 100 milliseconds of faster load time led to 0.5% more "Add to Cart" actions. These are not marginal gains. At scale, they represent serious revenue.
Built for Performance from Day One
Get a Landing Page That Passes Core Web Vitals Out of the Box
We build fast, conversion-optimized landing pages with clean code, optimized images, and performance architecture that scores green on PageSpeed Insights without extra plugins or patches.
See Our Landing Page ServiceAffordable pricing | Fast delivery | Performance guaranteed
Common Core Web Vitals Mistakes That Developers Make
Lazy-loading the hero image. This is probably the single most widespread LCP mistake. Lazy loading tells the browser to delay loading an image until it is near the viewport. Your hero image is already in the viewport. Lazy-loading it guarantees a slow LCP. Remove loading="lazy" from any above-the-fold image.
Not testing on real mobile devices. Emulated mobile in DevTools is useful but not identical to how a mid-range Android phone performs on a 4G connection. Use PageSpeed Insights field data to understand what real users experience.
Fixing desktop and ignoring mobile. Google uses mobile-first indexing. Your mobile Core Web Vitals scores carry more weight for rankings than your desktop scores. Always check both, but prioritize mobile.
Treating Core Web Vitals as a one-time fix. Adding new features, fonts, third-party scripts, and images over time will degrade your scores. Set up monitoring in Google Search Console to catch regressions before they affect rankings.
Expecting instant ranking changes. Google takes up to 28 days to refresh CrUX data. Make your changes, then monitor over a full reporting period. If you see improvement in PageSpeed Insights field data, ranking improvements typically follow within 4 to 8 weeks.
Frequently Asked Questions
Do Core Web Vitals directly affect Google search rankings?
Yes, Core Web Vitals are a confirmed Google ranking factor since the Page Experience Update rolled out in 2021. That said, content relevance and authority still carry more weight overall. Think of Core Web Vitals as a tiebreaker: when two pages have equally strong content, the one with better page experience signals and passing CWV scores will rank higher. For competitive niches, this tiebreaker can be the difference between page one and page two.
What is a good LCP score and how do I improve it fast?
A good Largest Contentful Paint score is 2.5 seconds or under. The fastest wins are: (1) add fetchpriority="high" to your hero image, (2) remove loading="lazy" from above-the-fold images, (3) enable a CDN if you are not using one, and (4) switch to a faster hosting environment with lower TTFB. These four changes alone can move an LCP from 4 seconds to under 2 seconds on many sites.
What replaced First Input Delay and why does it matter?
Interaction to Next Paint (INP) replaced First Input Delay (FID) in March 2024. FID only measured the first interaction on a page. INP measures the worst interaction across a user's entire visit, making it much harder to pass. Sites that had excellent FID scores have sometimes found their INP in the "Needs Improvement" or "Poor" range. The main culprits are heavy JavaScript, third-party scripts (analytics, chat, ads), and long tasks blocking the browser's main thread.
How do I fix Cumulative Layout Shift on my website?
To fix Cumulative Layout Shift (CLS), start by adding explicit width and height to every image, video, and iframe on the page. This reserves space in the layout before the element loads. For ads, set a minimum height on the ad container. For web fonts, use font-display: swap and preload your fonts. Avoid inserting content above existing content after the page loads. Most CLS problems come from a small number of elements, so use Chrome DevTools to identify exactly which elements are shifting.
How long does it take to see improvements in Core Web Vitals after making changes?
Google updates the Chrome User Experience Report (CrUX) data used for Core Web Vitals every 28 days. This means there is a built-in delay between making technical improvements and seeing them reflected in Google Search Console or PageSpeed Insights field data. Lab tools like Lighthouse will show improvement immediately. Real ranking effects typically become visible 4 to 8 weeks after your CrUX data stabilizes in the "Good" range.
Does a high PageSpeed Insights score guarantee passing Core Web Vitals?
No. PageSpeed Insights shows two types of data: lab data (simulated) and field data (real users). Your Lighthouse score in the lab can be 95 while your field LCP is still "Poor" because real users are on different devices, different networks, and interact with your page differently than a lab simulation. Google uses field data for ranking. Always check the "Field Data" section at the top of your PageSpeed Insights report, not just the Lighthouse score at the bottom.
Are Core Web Vitals important for landing pages and paid ads?
Landing page speed optimization is critical for both organic SEO and paid campaigns. For Google Ads, page experience is a component of Quality Score, which determines your cost per click and ad rank. A landing page that is slow or unstable gets penalized twice: once in organic rankings and once in paid search efficiency. Building landing pages with performance-first architecture, optimized images, minimal render-blocking scripts, and stable layouts gives you an edge in both channels.
What tools should I use to monitor Core Web Vitals on an ongoing basis?
For ongoing Core Web Vitals monitoring, Google Search Console is the most important tool because it shows field data across your entire site and groups URLs by status (Good, Needs Improvement, Poor). PageSpeed Insights lets you check individual URLs. For automated alerts when scores drop, consider setting up a monitoring solution like SpeedCurve or Calibre. GTmetrix and WebPageTest are useful for diagnosing the cause of regressions before and after changes.
Stop Losing Conversions to a Slow Page
Your Landing Page Should Work as Hard as Your Ads Do
We design and build landing pages that load fast, look sharp, and convert. Performance-optimized code, no bloated page builders, and scores that stay green.
Get Your High-Performance Landing PageNo long-term contracts | Transparent pricing | Results-focused
