Core Web Vitals in Next.js: a practical guide to passing

Core Web Vitals are user-experience metrics, not a checkbox. In Next.js most of the work is about what you ship to the browser and when.

The three metrics

• LCP — how fast the main content appears.
• INP — how quickly the page responds to interaction.
• CLS — how much the layout shifts while loading.

Get images and fonts right

Use the framework's image component so images are sized, lazy-loaded and served in modern formats. Load fonts with display swap and preconnect to avoid invisible text.

import Image from "next/image";

export function Hero() {
  return <Image src="/hero.jpg" alt="" width={1200} height={630} priority />;
}

Ship less JavaScript

• Keep heavy libraries out of client components.
• Split interactive widgets so static HTML arrives first.
• Reserve space for media and ads to protect CLS.

Measure before and after

Test on a throttled connection with real devices, not just your laptop. Fix the largest contributor first, then re-measure — good performance comes from iteration.

Performance is a feature you keep, not a task you finish.