When Google folded page experience into its ranking systems in 2021, the SEO industry had its usual split reaction: half dismissed it as minor signal noise, half over-corrected into treating every millisecond as critical. The truth, as ever, sits in the middle — but it leans closer to 'this matters more than most sites treat it'. Core Web Vitals failures are costing rankings. The question is which failures, on which pages, and how urgently you need to fix them.
The Three Metrics You're Actually Being Ranked On
Core Web Vitals are three field metrics drawn from real user data in the Chrome User Experience Report (CrUX). They measure load performance, visual stability, and interactivity respectively. The current set: Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS), and Interaction to Next Paint (INP) — which replaced First Input Delay in March 2024. All three are now live ranking signals.
LCP — Largest Contentful Paint
LCP measures how long it takes for the largest visible element — typically a hero image, a large heading, or a video thumbnail — to render in the viewport. The threshold: under 2.5 seconds is Good, 2.5–4.0 seconds needs improvement, over 4 seconds is Poor. In practice, the vast majority of sites that fail LCP do so in the 3–6 second range, and nearly all of them have the same root causes.
What causes LCP to fail
- Slow Time to First Byte (TTFB) — a slow server response delays everything downstream
- Render-blocking resources — CSS or JavaScript in the <head> that blocks paint
- Unoptimised images — hero images served in JPEG at 4× their display size
- Client-side rendering — frameworks that send an empty HTML shell and build the page in JavaScript
How to fix LCP
Start at the server. A TTFB above 800ms almost always points to a hosting problem — upgrade your plan, move to a CDN, or implement server-side caching. Next, preload your LCP element: add <link rel="preload"> for the hero image so the browser fetches it as a priority before it discovers it in the HTML. Serve images in WebP or AVIF at the exact display dimensions, use srcset for responsive sizing, and ensure the image has a defined width and height attribute to prevent layout shifts during load.
CLS — Cumulative Layout Shift
CLS measures visual stability — how much the page layout shifts unexpectedly as content loads. A score under 0.1 is Good. It's the metric most likely to affect real user experience negatively: you've clicked a button, the page shifted, and you accidentally triggered something else. Search engines care because it signals a chaotic, unpolished experience.
Common culprits
- Images and embeds without explicit width/height attributes — the browser doesn't know how much space to reserve
- Ad slots that inject content above existing page elements
- Web fonts causing FOUT (Flash of Unstyled Text) that changes text dimensions on load
- Dynamically injected banners or cookie notices that push content down
The fix hierarchy: set explicit dimensions on every image and embed. Use CSS aspect-ratio containers for dynamic content. Add font-display: swap and preload your primary web font. Reserve space for ads and banners before they load. CLS is usually fixable in a focused two-day sprint — and unlike LCP, it rarely requires infrastructure changes.
INP — Interaction to Next Paint
INP replaced First Input Delay in March 2024 and is the metric most sites are currently failing without realising it. Where FID only measured the delay before the browser started processing an input, INP measures the full duration from interaction to the next visible frame — including processing time and rendering. Threshold: under 200ms is Good, 200–500ms needs improvement, over 500ms is Poor.
What causes INP failures
The main culprit is long tasks on the main thread — JavaScript that runs for more than 50ms without yielding. This is particularly common on content-heavy sites that load large third-party scripts (analytics, chat widgets, marketing tags) that compete with user interactions for the main thread. Event handlers with expensive DOM operations are the other primary cause.
Fix strategy: audit your third-party scripts in Chrome DevTools Performance tab and identify long tasks. Defer non-critical scripts with async or defer. Break up long event handlers using scheduler.yield() or setTimeout to yield back to the browser. If you're running a React or Angular app, check for expensive re-renders triggered by interactions.
How to Prioritise When Everything Is Failing
If your CrUX data shows Poor across all three metrics, sequence your remediation effort like this:
- Fix LCP first. It affects your pages' ability to enter the 'Good URL' threshold in Page Experience signals. Server-side and image fixes also often improve INP as a side effect.
- Fix CLS next. It's usually the quickest win and has a direct negative UX impact. Getting CLS into the Good range is typically achievable in days, not weeks.
- Address INP last. It often requires deeper JavaScript profiling and architectural changes. Prioritise your highest-traffic page templates first — typically homepage, category pages, and article templates.
The Connection to Rankings Is Real — But Not the Whole Story
Core Web Vitals are a tiebreaker signal, not a primary ranking factor. Two pages with equivalent relevance and authority will see the one with better page experience signals rank higher. But a technically excellent page with weak content and no authority won't outrank a slower page that comprehensively covers the topic. The case for fixing Core Web Vitals isn't just SEO — it's conversion rate, bounce rate, and user trust. Better scores mean more users see your content. Fix the vitals, then compete on the signal that actually drives position: content relevance and topical authority.