Skip to content
All articles
Technical SEOMay 15, 202614 min read

Core Web Vitals in 2025: How to Optimize LCP, CLS & INP for SEO

Core Web Vitals are Google's page experience signals that directly impact rankings. This guide breaks down exactly how to measure, diagnose, and fix LCP, CLS, and INP so your site passes the threshold and gains a competitive edge.

Google's Core Web Vitals aren't a checkbox. They're a ranking signal that separates technically sound sites from the rest. In 2025, with INP officially replacing FID, the rulebook has changed — and most sites haven't caught up.

This guide covers what each metric measures, what the current passing thresholds look like, and — most importantly — the exact fixes that move the needle. Whether you're managing a content site, an ecommerce store, or a service brand, the principles are the same.

What Are Core Web Vitals (and Why They Still Matter in 2025)

Core Web Vitals are a set of real-world performance metrics that measure how users actually experience your page — not lab simulations. Google uses field data from the Chrome User Experience Report (CrUX) to evaluate your site's performance across real users on real devices.

There are three active metrics: Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS), and Interaction to Next Paint (INP). Each targets a distinct dimension of user experience — loading speed, visual stability, and responsiveness.

Google confirmed Core Web Vitals are a ranking signal within the Page Experience update. Sites that consistently fail thresholds are at a disadvantage, especially in competitive niches where on-page quality is already high.

LCP — Largest Contentful Paint

What It Measures

LCP measures the time it takes for the largest visible content element to render in the viewport. This is typically a hero image, an H1, or a large block of text. It's the most visible performance indicator to a user — the moment the page looks 'loaded.'

Threshold: Good ≤ 2.5s | Needs Improvement ≤ 4s | Poor > 4s

How to Fix Poor LCP

The most common LCP culprits are unoptimized hero images, render-blocking resources, and slow server response times (TTFB). Start by identifying your LCP element in PageSpeed Insights — it's highlighted in the filmstrip view. Then apply these fixes in order of impact:

First, preload the LCP image using <link rel="preload"> in the document head. This tells the browser to fetch it immediately rather than waiting for the parser to discover it. Second, serve images in next-gen formats (WebP or AVIF) and use responsive srcset attributes so mobile devices don't download desktop-sized images. Third, eliminate render-blocking JavaScript and CSS. Use Chrome DevTools Coverage tab to identify unused code. Defer non-critical scripts and inline critical CSS.

Quick win: Add fetchpriority="high" to your hero image tag. This single attribute can shave 300–600ms off LCP on image-heavy pages without any architectural changes.

CLS — Cumulative Layout Shift

What It Measures

CLS measures visual instability — how much the layout shifts unexpectedly while the page is loading. When elements pop in and push content down (a classic symptom of ads loading late or fonts swapping), your CLS score spikes. A high CLS score means users click the wrong thing, get frustrated, and bounce.

Threshold: Good ≤ 0.1 | Needs Improvement ≤ 0.25 | Poor > 0.25

How to Fix Poor CLS

Reserve explicit width and height attributes on every image and video element. This lets the browser allocate space before the media loads, preventing content from jumping. For web fonts, use font-display: optional or font-display: swap with a well-matched fallback font to minimize FOUT-induced shifts. For ads and embeds, always pre-allocate their container dimensions even if the ad hasn't loaded yet.

INP — Interaction to Next Paint

What It Measures

INP replaced FID in March 2024 and is now the responsiveness metric Google measures. Where FID only measured the delay to the first input, INP measures the latency of all interactions — clicks, taps, keyboard inputs — throughout the entire page lifecycle. It takes the worst-performing interaction (with outlier protection) as the score.

Threshold: Good ≤ 200ms | Needs Improvement ≤ 500ms | Poor > 500ms

How to Fix Poor INP

Poor INP is almost always caused by long tasks on the main thread. Use Chrome DevTools Performance panel to record an interaction and look for long tasks (>50ms). Break long tasks into smaller chunks using scheduler.postTask() or setTimeout chunking. Reduce JavaScript execution time by code-splitting aggressively — load only what's needed for the current interaction. For React/Next.js sites, use React.lazy() and Suspense to defer heavy component trees.

Many sites that pass LCP and CLS still fail INP due to heavy third-party scripts (chat widgets, tag managers, analytics). Audit every third-party tag and defer or async-load anything that doesn't need to block interaction.

The Right Tools for Core Web Vitals Measurement

Lab data (from tools like Lighthouse) is useful for debugging but doesn't reflect what Google actually sees. Google uses field data from real users via CrUX. Here's the tool stack we use for CWV audits:

PageSpeed Insights combines both lab and field data for any URL. Google Search Console's Core Web Vitals report shows your performance across all pages grouped by URL pattern. CrUX Dashboard (via Looker Studio) lets you track field data over time. Web Vitals Chrome Extension gives instant metric readings while browsing. For continuous monitoring, integrate with tools like Calibre, SpeedCurve, or Datadog Synthetics.

A Prioritization Framework: Where to Start

Not every page needs the same level of optimization. Prioritize pages that: (1) drive the most organic traffic, (2) have the highest commercial intent, and (3) are currently borderline — already close to passing. The Search Console CWV report groups URLs by pattern, making it easy to spot entire templates that are failing.

Fix the template first. If your blog post template has a 3.8s LCP, fixing one post won't help — fix the template and every post improves at once. This is the highest-leverage optimization you can make.

Frequently Asked Questions About Core Web Vitals

Do Core Web Vitals directly affect Google rankings?

Yes. Core Web Vitals are a confirmed ranking signal within Google's Page Experience system. However, they're a tiebreaker — strong content and relevance signals outweigh a slightly poor LCP. For competitive niches where content quality is already high, CWV can be the edge that determines positions 1–3.

How long does it take for CWV improvements to show in rankings?

CrUX data is collected over a 28-day rolling window. Once your fixes are deployed, it takes roughly 4–6 weeks of real user data before your field scores update and Google re-evaluates your page experience status.

My Lighthouse score is 95 but my CrUX data is poor. Why?

Lighthouse runs in a controlled lab environment on a simulated device with throttled network. CrUX collects data from real users on real devices — including low-end Android phones on 3G connections. A site can score perfectly in Lighthouse but still fail in the field if it uses heavy JavaScript that degrades on real mobile hardware.

Can third-party scripts cause Core Web Vitals failures?

Absolutely — this is one of the most underdiagnosed causes of poor CWV. Chat widgets, tag managers, video embeds, and ad scripts can all block the main thread, delay LCP, and trigger CLS. Audit every third-party script with the PageSpeed Insights Third Party Summary report and defer anything non-critical.

If your Core Web Vitals are holding back your rankings, SEO Mothra's Technical SEO service covers full CWV audits, template-level fixes, and continuous monitoring. Get a free audit to see exactly where your pages stand.

Core Web VitalsTechnical SEOPage SpeedLCPCLSINPGoogle Rankings

Put it to work

Want this applied to your site instead of your reading list?

Book a strategy call