Hoe optimaliseer je performance en Core Web Vitals in Next.js?

Question

Accepted Answer

Next.js geeft je veel performance tools; ze goed gebruiken gericht op de Core Web Vitals — LCP (laden), CLS (layout stabiliteit) en INP (interactiviteit).

Minimaliseer client JavaScript (grootste hefboom)

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

De superpower van App Router is het verzenden van minder JS. Zware logica en gegevensformattering blijven op de server; alleen echt interactieve "eilanden" worden Client Components.

Optimaliseer de LCP afbeelding

// priority = load eagerly (don't lazy-load the LCP image); width/height prevent CLS ``` ## Optimaliseer lettertypen (CLS + laden) ```tsx import { Inter } from "next/font/google"; const inter = Inter({ subsets: ["latin"], display: "swap" }); // self-hosted, no layout shift ``` ## Code-split zware client componenten ```tsx import dynamic from "next/dynamic"; const Chart = dynamic(() => import("./Chart"), { ssr: false }); // load only when needed ``` Lazy-load grote, niet-kritieke client componenten (grafieken, editors, modals) zodat ze niet de initiële bundle opblazen. ## Stream traaginhoud ```tsx }> // ship the shell instantly, stream slow data → better TTFB/FCP ``` ## Cache agressief, revalideer nauwkeurig ```tsx fetch(url, { next: { revalidate: 3600, tags: ["x"] } }); // static speed + controlled freshness ``` ## De checklist toegewezen aan statistieken ```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 ``` ## Meet, gis niet ```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 ``` ## Waarom het belangrijk is Next.js performance gaat vooral om **minder JavaScript verzenden** (Server Components, code-splitting) en de ingebouwde optimizers gebruiken (`next/image`, `next/font`, streaming, caching) — elk direct gekoppeld aan een Core Web Vital. Weten welke tool welke metriek oplost (en meten met `next build`/Lighthouse in plaats van gokken) is hoe je systematisch goede LCP/CLS/INP scores bereikt.