Core Web Vitals in 2026: What LCP, INP, and CLS Mean for Your Rankings
Google's Core Web Vitals directly affect your search visibility. Here's what each metric means, the passing thresholds, and how to fix failures.
Core Web Vitals are three performance metrics Google uses as ranking signals: Largest Contentful Paint (LCP), Interaction to Next Paint (INP), and Cumulative Layout Shift (CLS).
Google confirmed Core Web Vitals as a ranking factor in 2021 and continues to use them as part of the Page Experience signal. A site failing all three metrics is at a measurable ranking disadvantage versus a comparable site that passes.
What Are Core Web Vitals?
Core Web Vitals measure how real users experience the performance of a web page — specifically, how fast the main content loads, how quickly it responds to interaction, and how stable the layout is while loading.
They were designed to move the industry away from synthetic benchmarks (lab scores) toward real-user experience data. Google collects field data from Chrome users via the Chrome User Experience Report (CrUX) and uses this real-user data — not just lab scores — in ranking decisions.
What Is LCP (Largest Contentful Paint)?
LCP measures how long it takes for the largest visible element on the page — typically a hero image, a large heading, or a video thumbnail — to fully render.
Thresholds:
- Good: LCP ≤ 2.5 seconds
- Needs improvement: 2.5–4 seconds
- Poor: > 4 seconds
Why it matters: LCP is the closest metric to "when does the page feel loaded?" A slow LCP means users are staring at an empty or partially-loaded page for too long. Google treats this as a poor user experience.
Common causes of slow LCP:
- Large, unoptimised hero images (not using WebP or AVIF)
- Images without explicit width and height attributes causing reflows
- Render-blocking JavaScript or CSS in the
<head> - Slow server response times (TTFB above 600ms)
- No image preloading for the above-the-fold hero
How to fix it:
- Convert all images to WebP or AVIF (Next.js
next/imagedoes this automatically) - Set explicit
widthandheighton all<img>elements - Preload the hero image with
<link rel="preload" as="image"> - Use a CDN with edge caching (Vercel's edge network handles this)
- Defer non-critical scripts
What Is INP (Interaction to Next Paint)?
INP measures the time between a user interaction (click, tap, or keyboard press) and the next visual update the browser produces in response.
Note: INP replaced First Input Delay (FID) as a Core Web Vital in March 2024. FID only measured the delay before the browser could begin processing an interaction; INP measures the entire duration until the visual response appears.
Thresholds:
- Good: INP ≤ 200ms
- Needs improvement: 200–500ms
- Poor: > 500ms
Why it matters: A page that feels slow to respond to taps and clicks is frustrating. On mobile devices, where touch responses are expected to feel instant, poor INP is particularly damaging to user experience.
Common causes of poor INP:
- Heavy JavaScript executing on the main thread
- Long tasks blocking the browser's ability to respond
- Excessive DOM size (pages with 5,000+ DOM nodes)
- Third-party scripts running on interaction events
How to fix it:
- Break long JavaScript tasks into smaller chunks using
setTimeoutorscheduler.yield() - Move heavy computation off the main thread using Web Workers
- Reduce DOM size — aim for under 1,500 nodes
- Audit and defer non-critical third-party scripts
What Is CLS (Cumulative Layout Shift)?
CLS measures the visual instability of a page — how much the layout unexpectedly shifts while content is loading.
A score of 0 means nothing moved. A score of 0.5 means significant unexpected shifts occurred (imagine clicking a button and the page jumping just before your finger lands).
Thresholds:
- Good: CLS ≤ 0.1
- Needs improvement: 0.1–0.25
- Poor: > 0.25
Why it matters: Layout shifts are disorienting and cause mis-clicks. Google treats high CLS as a signal that the page is poorly built.
Common causes of high CLS:
- Images without explicit
widthandheightattributes — the browser doesn't know how much space to reserve until the image loads - Web fonts causing a "flash of unstyled text" that reflows the layout
- Ad slots or dynamic content injected above existing content
- Animations that affect layout properties (avoid animating
width,height,top,left)
How to fix it:
- Always set explicit dimensions on images and video:
width="1200" height="630" - Use
next/image— it handles dimension reservation automatically - Self-host fonts via
next/font— eliminates layout shift from external font loading - Reserve space for dynamic content (ads, embeds) with
min-heightCSS
How Do Core Web Vitals Affect Google Rankings?
Google uses Core Web Vitals as a tiebreaker among pages of similar content quality. According to Google Search Central documentation, the Page Experience signal — which includes Core Web Vitals — is a ranking factor, but "great page experience doesn't override having great page content."
In practice, this means:
- A site with excellent content and poor Core Web Vitals will still rank — but may rank lower than a comparable site that passes
- A site with poor content and excellent Core Web Vitals will not rank well — performance doesn't compensate for content quality
- For competitive local service searches where multiple businesses have decent content, Core Web Vitals can be the differentiator
How to Test Your Core Web Vitals
Google PageSpeed Insights (pagespeed.web.dev): Tests both lab data and field data. Shows LCP, INP, and CLS with specific recommendations. Free, no account needed.
Google Search Console: The Core Web Vitals report shows field data for all pages on your site with sufficient traffic. Categorises pages as Good, Needs Improvement, or Poor based on real users.
Chrome DevTools: Performance panel shows detailed timing breakdowns for identifying LCP elements and long tasks affecting INP.
Lighthouse (built into Chrome DevTools): Lab-only scores. Useful for development and testing, but doesn't substitute for field data in Search Console.
All Social Dense projects are tested against real Lighthouse scores and verified in PageSpeed Insights before launch, with targets of LCP < 1.8s, INP < 100ms, and CLS < 0.05.
The Most Common Failures and How to Fix Them
Failure: LCP > 2.5s due to unoptimised hero image
Fix: Convert to WebP/AVIF, add explicit dimensions, use fetchpriority="high" on the hero <img>, serve from a CDN.
Failure: High CLS from images without dimensions
Fix: Every <img> tag must have width and height attributes. In Next.js, next/image handles this automatically.
Failure: Poor INP from heavy JavaScript
Fix: Audit JavaScript bundle size with @next/bundle-analyzer. Defer non-critical scripts. Split large bundles into smaller chunks.
Failure: Fonts causing layout shift
Fix: Self-host fonts using next/font — this eliminates FOUT (Flash of Unstyled Text) and the CLS it causes.
Frequently Asked Questions
Do Core Web Vitals directly affect my Google rankings? Yes. Google confirmed Core Web Vitals as a ranking signal in 2021. They are part of the Page Experience signal and affect rankings, particularly in competitive searches where content quality is similar across results.
What replaced FID in Core Web Vitals? INP (Interaction to Next Paint) replaced FID (First Input Delay) in March 2024. INP provides a more complete measure of interaction responsiveness — it measures the full duration from interaction to visual response, not just the delay before processing begins.
What is a good Lighthouse performance score? A score of 90–100 is considered excellent. Social Dense targets a minimum of 95 on desktop and 90 on mobile for all projects. Note that Lighthouse is a lab test — Google's ranking decisions use field data from real users, collected via Chrome UX Report.
How long does it take to improve Core Web Vitals? If the issues are straightforward (unoptimised images, missing dimensions, heavy JS), improvements can be deployed and measured within days. Building a new site from scratch with performance as a priority from day one typically produces passing scores immediately at launch.
Can I pass Core Web Vitals on a WordPress site? Yes, but it requires deliberate effort. WordPress sites often fail due to page builders adding excessive DOM nodes, unoptimised images, excessive plugins adding scripts, and poor caching configuration. A lean WordPress build with good hosting can pass.
Last updated: December 2025
Free with every enquiry
Want us to audit your digital presence?
We research your website, your competitors, and your local search landscape before we reply. No brief required — just tell us your business name.
Start a project →