Performance

Core Web Vitals in 2025: What Still Matters

Yuki Tanaka · · 17 views

LCP, INP, and CLS remain the primary ranking signals. This article breaks down what each metric measures and the highest-ROI optimisations you can make today.

The Three Vitals

Google's Core Web Vitals are:

  • LCP (Largest Contentful Paint) — measures loading performance. Target: ≤ 2.5 s
  • INP (Interaction to Next Paint) — measures responsiveness. Target: ≤ 200 ms
  • CLS (Cumulative Layout Shift) — measures visual stability. Target: ≤ 0.1

LCP Optimisations

The LCP element is almost always a hero image or an <h1>. Fix it by:

  1. Preloading the LCP image with <link rel="preload" as="image">
  2. Serving modern formats (AVIF, WebP)
  3. Using a CDN — Cloudflare Images handles format negotiation automatically
  4. Eliminating render-blocking resources in <head>

INP Optimisations

INP replaced FID as a Core Web Vital in 2024. It captures the worst interaction latency across the full page life. Fix it by:

  1. Breaking up long tasks with scheduler.yield() or setTimeout
  2. Avoiding synchronous layout (reading then writing DOM dimensions)
  3. Using content-visibility: auto to skip off-screen rendering

CLS Optimisations

Layout shifts are caused by content appearing without reserved space:

<!-- WRONG: image with no dimensions -->
<img src="hero.jpg" alt="Hero">

<!-- RIGHT: explicit aspect ratio -->
<img src="hero.jpg" alt="Hero" width="1200" height="630">

Also reserve space for ads, embeds, and dynamically injected banners.

Measuring in Production

Use the web-vitals npm package to report real user measurements to your analytics pipeline:

import { onLCP, onINP, onCLS } from "web-vitals";
onLCP(console.log);
onINP(console.log);
onCLS(console.log);
← Back to articles
17 views