How do you optimize performance and Core Web Vitals in Next.js?

Question

Accepted Answer

Next.js gives you many performance tools; using them well targets the Core Web Vitals — LCP (loading), CLS (layout stability), and INP (interactivity).

Minimize client JavaScript (biggest lever)

tsx

// ✅ Keep components as Server Components; ship "use client" only at interactive leaves
// A Server Component sends ZERO JS for itself → smaller bundle → better INP/load

The App Router's superpower is shipping less JS. Heavy logic and data formatting stay on the server; only genuinely interactive "islands" become Client Components.

Optimize the LCP image

// priority = load eagerly (don't lazy-load the LCP image); width/height prevent CLS ``` ## Optimize fonts (CLS + load) ```tsx import { Inter } from "next/font/google"; const inter = Inter({ subsets: ["latin"], display: "swap" }); // self-hosted, no layout shift ``` ## Code-split heavy client components ```tsx import dynamic from "next/dynamic"; const Chart = dynamic(() => import("./Chart"), { ssr: false }); // load only when needed ``` Lazy-load large, non-critical client components (charts, editors, modals) so they don't bloat the initial bundle. ## Stream slow content ```tsx }> // ship the shell instantly, stream slow data → better TTFB/FCP ``` ## Cache aggressively, revalidate precisely ```tsx fetch(url, { next: { revalidate: 3600, tags: ["x"] } }); // static speed + controlled freshness ``` ## The checklist mapped to metrics ```text LCP ↓ : next/image + priority, streaming, CDN/static caching, preconnect CLS ↓ : image width/height, next/font, reserve space for dynamic content INP ↓ : less client JS (Server Components), code-splitting, avoid heavy effects ``` ## Measure, don't guess ```text next build → see per-route JS sizes Lighthouse / PageSpeed Insights, the Web Vitals lib, Vercel Analytics → real metrics @next/bundle-analyzer → find what's bloating the bundle ``` ## Why it matters Next.js performance is mostly about **shipping less JavaScript** (Server Components, code-splitting) and using the built-in optimizers (`next/image`, `next/font`, streaming, caching) — each mapping directly to a Core Web Vital. Knowing which tool fixes which metric (and measuring with `next build`/Lighthouse rather than guessing) is how you systematically hit good LCP/CLS/INP scores.