Hur optimerar du prestanda och Core Web Vitals i Next.js?

Question

Accepted Answer

Next.js ger dig många prestandaverktyg; när du använder dem väl riktar du in dig på Core Web Vitals — LCP (laddning), CLS (layoutstabilitet) och INP (interaktivitet).

Minimera klient-JavaScript (största spaken)

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:s styrka är att skicka mindre JS. Tung logik och dataformatering stannar på servern; endast genuint interaktiva "öar" blir Client Components.

Optimera LCP-bilden

// priority = load eagerly (don't lazy-load the LCP image); width/height prevent CLS ``` ## Optimera teckensnitt (CLS + laddning) ```tsx import { Inter } from "next/font/google"; const inter = Inter({ subsets: ["latin"], display: "swap" }); // self-hosted, no layout shift ``` ## Koddelning av tunga klientkomponenter ```tsx import dynamic from "next/dynamic"; const Chart = dynamic(() => import("./Chart"), { ssr: false }); // load only when needed ``` Försenad laddning av stora, icke-kritiska klientkomponenter (diagram, redigerare, modaler) så att de inte blåser upp det initiala paketet. ## Strömma långsamt innehål ```tsx }> // ship the shell instantly, stream slow data → better TTFB/FCP ``` ## Cache aggressivt, revalidera precist ```tsx fetch(url, { next: { revalidate: 3600, tags: ["x"] } }); // static speed + controlled freshness ``` ## Checklistan mappad till mätvärden ```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ät, gissa inte ```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 ``` ## Varför det är viktigt Next.js-prestanda handlar mestadels om **att skicka mindre JavaScript** (Server Components, koddelning) och att använda de inbyggda optimerarna (`next/image`, `next/font`, streaming, caching) — varje mappar direkt till ett Core Web Vital. Att veta vilket verktyg som åtgärdar vilket mätvärde (och mäta med `next build`/Lighthouse snarare än att gissa) är hur du systematiskt når bra LCP/CLS/INP-poäng.