Hvordan optimaliserer du ytelse og Core Web Vitals i Next.js?

Question

Accepted Answer

Next.js gir deg mange ytelsesverktøy; å bruke dem godt sikter mot Core Web Vitals — LCP (lasting), CLS (layout stabilitet) og INP (interaktivitet).

Minimer client JavaScript (største spak)

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

App Router sin superkraft er å sende mindre JS. Tung logikk og dataformatering blir på serveren; kun virkelig interaktive "øyer" blir Client Components.

Optimaliser LCP-bildet

// priority = load eagerly (don't lazy-load the LCP image); width/height prevent CLS ``` ## Optimaliser skrifttyper (CLS + lasting) ```tsx import { Inter } from "next/font/google"; const inter = Inter({ subsets: ["latin"], display: "swap" }); // self-hosted, no layout shift ``` ## Code-split tunge klientkomponenter ```tsx import dynamic from "next/dynamic"; const Chart = dynamic(() => import("./Chart"), { ssr: false }); // load only when needed ``` Fasilast store, ikke-kritiske klientkomponenter (diagrammer, redigerer, modaler) slik at de ikke oppblåser det innledende pakken. ## Stream sakte innhold ```tsx }> // ship the shell instantly, stream slow data → better TTFB/FCP ``` ## Cache aggressivt, revalidér presist ```tsx fetch(url, { next: { revalidate: 3600, tags: ["x"] } }); // static speed + controlled freshness ``` ## Sjekklisten kartlagt til målinger ```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 ``` ## Mål, ikke gjett ```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 ``` ## Hvorfor det er viktig Next.js ytelse handler stort sett om **å sende mindre JavaScript** (Server Components, code-splitting) og å bruke de innebygde optimisatorene (`next/image`, `next/font`, streaming, caching) — hver direkte knyttet til en Core Web Vital. Å vite hvilket verktøy som fikser hvilken metrikk (og måle med `next build`/Lighthouse i stedet for å gjette) er hvordan du systematisk oppnår gode LCP/CLS/INP-score.