Core Web Vitals are a set of three specific metrics that Google uses to measure how users experience your website. They became a ranking factor in 2021 and have only grown in importance since. If your site has poor Core Web Vitals, you're likely losing rankings to competitors who've optimized theirs.
The three Core Web Vitals in 2026 are Largest Contentful Paint (LCP), Interaction to Next Paint (INP), and Cumulative Layout Shift (CLS). INP officially replaced First Input Delay (FID) in March 2024 as Google's responsiveness metric, so if you're still optimizing for FID, it's time to update your approach.
In this guide, we'll explain each metric in plain English, share the exact thresholds Google uses, identify common causes of poor scores, and give you specific fixes. No vague advice. Just actionable steps you can implement today.
What Are Core Web Vitals?
Think of Core Web Vitals as Google's report card for user experience. They answer three fundamental questions about your website:
- LCP (Largest Contentful Paint): How fast does the main content load?
- INP (Interaction to Next Paint): How quickly does the page respond when you interact with it?
- CLS (Cumulative Layout Shift): Does the page layout jump around unexpectedly?
Google measures these metrics using real user data from Chrome browsers (called "field data" or CrUX data). This means your scores reflect how actual visitors experience your site, not just lab tests. You can see your Core Web Vitals in Google Search Console, PageSpeed Insights, or by running a TrackSEO audit report that includes CWV scores alongside 140+ other SEO checks.
Largest Contentful Paint (LCP): Loading Speed
What Does LCP Measure?
LCP measures how long it takes for the largest visible element on the page to fully render. This is usually a hero image, a large heading, or a video poster image. It's Google's way of answering: "When did the page look like it was done loading?"
LCP Thresholds
| Rating | LCP Time | What It Means |
|---|---|---|
| Good | 2.5 seconds or less | Users perceive the page as fast |
| Needs Improvement | 2.5 to 4.0 seconds | Noticeable delay, some users will leave |
| Poor | Over 4.0 seconds | Significant ranking penalty risk |
Common Causes of Poor LCP
- Slow server response time (TTFB): If your server takes 1+ seconds to respond, LCP can't possibly be under 2.5s.
- Unoptimized hero images: A 2MB hero image will tank your LCP, especially on mobile.
- Render-blocking CSS and JavaScript: The browser can't paint the page until it downloads and parses critical CSS/JS.
- Client-side rendering: SPAs that rely on JavaScript to render content will have poor LCP because the browser has to download, parse, and execute JS before any content appears.
How to Fix LCP
- Optimize your server: Use a CDN, enable caching, and choose quality hosting. Your TTFB should be under 200ms. See our WordPress page speed guide for hosting recommendations.
- Preload your LCP image: Add
<link rel="preload" as="image" href="hero.webp">in your HTML head so the browser starts downloading it immediately. - Use modern image formats: Convert hero images to WebP or AVIF. A 500KB JPEG might be 150KB as WebP.
- Inline critical CSS: Inline the CSS needed for above-the-fold content and defer the rest. WP Rocket and Critical CSS tools handle this automatically.
- Set fetchpriority="high": Add this attribute to your LCP image element so the browser prioritizes downloading it.
Interaction to Next Paint (INP): Responsiveness
What Does INP Measure?
INP measures how quickly your page responds to user interactions like clicks, taps, and key presses. Unlike the old FID metric (which only measured the first interaction), INP considers all interactions throughout the entire page lifecycle and reports the worst one (roughly the 98th percentile). This makes it a much more realistic measure of responsiveness.
INP Thresholds
| Rating | INP Time | What It Means |
|---|---|---|
| Good | 200 milliseconds or less | Interactions feel instant |
| Needs Improvement | 200 to 500 milliseconds | Noticeable lag on interactions |
| Poor | Over 500 milliseconds | Page feels unresponsive |
Common Causes of Poor INP
- Heavy JavaScript execution: Long-running JavaScript tasks block the main thread, preventing the browser from responding to user input.
- Third-party scripts: Analytics, chat widgets, ad scripts, and social media embeds often run expensive JavaScript on every interaction.
- Excessive DOM size: Pages with 1,500+ DOM elements take longer to update when interactions trigger visual changes.
- Layout thrashing: Reading layout properties and then immediately writing to the DOM forces the browser to recalculate layout repeatedly.
How to Fix INP
- Break up long tasks: Use
requestAnimationFrame()orsetTimeout()to split JavaScript tasks longer than 50ms into smaller chunks, allowing the browser to process user input between chunks. - Defer third-party scripts: Load analytics, chat widgets, and social scripts after the page is interactive. Use
deferorasyncattributes, or load them after a user interaction. - Reduce DOM size: Keep your page under 1,500 DOM elements. Remove hidden elements, simplify layouts, and use virtualization for long lists.
- Use
content-visibility: auto: This CSS property tells the browser to skip rendering off-screen content, dramatically reducing the work needed when users interact with the page. - Audit with Chrome DevTools: Open DevTools > Performance > Record interactions. Look for long tasks (red bars) and trace them to specific scripts.
Cumulative Layout Shift (CLS): Visual Stability
What Does CLS Measure?
CLS measures how much the page layout shifts unexpectedly while loading. You've experienced this: you're about to click a link, and suddenly an ad loads above it, pushing everything down. You end up clicking the wrong thing. That's layout shift, and it's one of the most frustrating user experiences on the web.
CLS Thresholds
| Rating | CLS Score | What It Means |
|---|---|---|
| Good | 0.1 or less | Layout is stable |
| Needs Improvement | 0.1 to 0.25 | Some noticeable shifts |
| Poor | Over 0.25 | Severe layout instability |
Common Causes of Poor CLS
- Images without dimensions: When images don't have width and height attributes, the browser doesn't know how much space to reserve. When the image loads, everything below it jumps.
- Ads and embeds: Dynamically injected ads and iframes resize after loading, pushing content around.
- Web fonts: When a custom font loads and replaces the fallback font, text reflows because the fonts have different sizes. This is called Flash of Unstyled Text (FOUT).
- Dynamically injected content: Cookie banners, newsletter popups, and notification bars that load after the page renders push content down.
How to Fix CLS
- Always set image dimensions: Add explicit
widthandheightattributes to every<img>tag, or use CSSaspect-ratioto reserve space. - Reserve space for ads: Use CSS to set a minimum height on ad containers so they don't push content when they load.
- Optimize font loading: Use
font-display: swapcombined with a size-adjusted fallback font. Or usefont-display: optionalif you'd rather skip the custom font than cause a layout shift. - Preload fonts: Add
<link rel="preload" as="font" type="font/woff2" href="font.woff2" crossorigin>to load fonts before they're needed. - Pin overlay elements: Cookie banners and notification bars should use
position: fixedorposition: stickyso they overlay content instead of pushing it down.
How to Check Your Core Web Vitals
There are several ways to check your CWV scores, and it's important to understand the difference between lab data and field data:
- Field data (real users): Google Search Console, CrUX Dashboard, PageSpeed Insights (top section). This is what Google actually uses for rankings.
- Lab data (simulated): Lighthouse, PageSpeed Insights (bottom section), GTmetrix. Useful for debugging but not used directly for rankings.
- TrackSEO: Our $2.99 audit reports include Core Web Vitals alongside technical SEO checks, backlink analysis, and content recommendations. It's the quickest way to see CWV in context with everything else affecting your SEO.
For a complete list of what to check beyond Core Web Vitals, see our website audit checklist.
Do Core Web Vitals Actually Affect Rankings?
Yes, but with a caveat. Core Web Vitals are a confirmed ranking signal, but they're not the strongest one. Content relevance, backlinks, and search intent still carry more weight. Think of CWV as a tiebreaker: when two pages have similar content quality and authority, the one with better Core Web Vitals tends to rank higher.
That said, the impact is growing. Google's John Mueller has repeatedly stated that page experience signals are becoming more important over time. And beyond SEO, good Core Web Vitals directly improve conversion rates and user engagement, which creates indirect ranking benefits through better user signals.
A Prioritized Approach to Fixing Core Web Vitals
If all three vitals need work, here's the order we recommend:
- Fix CLS first. It's usually the quickest to fix (adding image dimensions, reserving ad space) and has an outsized impact on user experience.
- Fix LCP second. This typically requires image optimization, server improvements, and caching. The fixes overlap heavily with general page speed optimization.
- Fix INP last. This is often the hardest to fix because it requires JavaScript optimization. Start with deferring third-party scripts, then move to breaking up long tasks.
Want to know exactly where your site stands? Run a TrackSEO report for $2.99 and get your Core Web Vitals scores plus a prioritized list of fixes across 140+ SEO factors. No subscription, no commitment.
FAQ: Core Web Vitals
What replaced FID in Core Web Vitals?
Interaction to Next Paint (INP) officially replaced First Input Delay (FID) in March 2024. INP is a more comprehensive metric because it measures responsiveness across all interactions, not just the first one. If your site had good FID scores, that doesn't necessarily mean INP will be good too.
How long does it take for CWV improvements to affect rankings?
Google uses a rolling 28-day average of field data from the Chrome User Experience Report (CrUX). After you make improvements, it typically takes 28-30 days for the new data to be fully reflected, and then another crawl cycle for Google to factor it into rankings. Expect 4-8 weeks total.
Do Core Web Vitals matter for mobile and desktop separately?
Yes. Google evaluates mobile and desktop Core Web Vitals independently. Since Google uses mobile-first indexing, mobile scores are more important. It's common for a site to pass CWV on desktop but fail on mobile, so always prioritize mobile optimization.
What's a good overall PageSpeed Insights score?
A PageSpeed Insights score of 90+ is considered good for desktop, and 80+ for mobile. However, the individual CWV metrics matter more than the overall score. A site can score 75 overall but still pass all Core Web Vitals. Focus on the three CWV metrics first, then optimize for the overall score. Learn more about interpreting these scores in our guide to what is a good SEO score.