Core Web Vitals in 2025: The Complete Technical Guide

Why Core Web Vitals Still Matter in 2025

Google officially folded Core Web Vitals into its ranking signals in 2021, and the weight of those signals has only grown since. In 2025, the three metrics — Largest Contentful Paint (LCP), Interaction to Next Paint (INP), and Cumulative Layout Shift (CLS) — are no longer a tiebreaker. On competitive SERPs, they are often the difference.

More importantly, they correlate directly with revenue. A 100ms improvement in LCP is associated with a 1–2% lift in conversion rate. CLS issues cause accidental clicks, rage clicks, and abandoned sessions. Poor INP makes your UI feel broken even when it technically works.

Largest Contentful Paint (LCP)

LCP measures how long it takes for the largest visible element in the viewport to render. In most cases, this is a hero image, a large heading, or a background image.

Target: under 2.5 seconds

The most common causes of poor LCP:

**Unoptimised images** — serving JPEG/PNG when AVIF/WebP is available, or missing `width` and `height` attributes that cause layout recalculation

**Render-blocking resources** — CSS and JS loaded synchronously in `<head>` that delay the browser's first paint

**No resource hints** — failing to use `<link rel="preload">` for the LCP element

**Slow server response (TTFB)** — if your server takes 800ms to respond, LCP cannot be under 2.5s regardless of frontend optimisation

How to fix it in Next.js:

Use the component with priority on your above-the-fold hero image. This automatically adds and serves AVIF/WebP. Set explicit width and height to eliminate layout shift. If your LCP element is a CSS background, move it to an tag — CSS backgrounds cannot be preloaded as efficiently.

Interaction to Next Paint (INP)

INP replaced First Input Delay (FID) as the responsiveness metric in March 2024. Where FID only measured the first interaction, INP measures the worst interaction throughout the full page session.

Target: under 200ms

INP failures are almost always caused by:

**Long tasks on the main thread** — JavaScript that blocks the browser for more than 50ms prevents any interaction from being handled quickly

**Unoptimised event handlers** — click and input handlers that do expensive DOM work synchronously

**Third-party scripts** — analytics, chat widgets, and ad scripts that compete for the main thread

How to fix it:

Break long tasks using scheduler.yield() or setTimeout(..., 0) to yield to the browser. Audit your third-party scripts — even one poorly implemented analytics tag can blow your INP. In Next.js, use next/script with strategy="lazyOnload" for non-critical scripts.

Cumulative Layout Shift (CLS)

CLS measures how much the page layout shifts unexpectedly during load. A score of 0 means no shifting. Anything above 0.1 is flagged as needing improvement.

Target: under 0.1

The main culprits:

**Images without dimensions** — browser doesn't know how much space to reserve, so it collapses then expands

**Dynamically injected content** — banners, cookie notices, and ads inserted above existing content

**Web fonts causing FOUT** — text reflow when a web font loads and replaces the fallback

How to fix it:

Always set width and height on images. For web fonts, use font-display: optional or font-display: swap with a matched fallback. Reserve space for dynamic content with CSS min-height. In Next.js, the component handles image dimensions automatically.

Setting a Performance Budget

The most effective teams treat performance like a feature with a hard budget. Define maximum thresholds before development starts:

|--------|------|-------------------|

Run Lighthouse CI in your deployment pipeline and fail builds that exceed your budget. Vercel's built-in Speed Insights gives you field data (real user measurements) rather than lab data — use both.

The Fastest Wins

If you need to improve scores quickly, these changes typically have the highest return on time invested:

Add `priority` to your hero `<Image>`

Move all third-party scripts to `strategy="lazyOnload"`

Set explicit dimensions on every image

Enable AVIF/WebP in `next.config.ts` (already on by default in Next.js 14+)

Audit and defer any JavaScript above 50KB that runs on load

Core Web Vitals are not a one-time fix. Set up monitoring, track field data weekly, and treat regressions as bugs — because for your users, they are.