Wie optimieren Sie Performance und Core Web Vitals in Next.js?

Question

Accepted Answer

Next.js bietet viele Performance-Tools; ihre richtige Anwendung zielt auf die Core Web Vitals ab — LCP (Ladezeit), CLS (Layout-Stabilität) und INP (Interaktivität).

Client-JavaScript minimieren (größter Hebel)

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

Die Stärke des App Routers ist das Versenden von weniger JS. Schwere Logik und Datenformatierung bleiben auf dem Server; nur wirklich interaktive "Islands" werden zu Client Components.

Das LCP-Bild optimieren

// priority = load eagerly (don't lazy-load the LCP image); width/height prevent CLS ``` ## Schriftarten optimieren (CLS + Ladezeit) ```tsx import { Inter } from "next/font/google"; const inter = Inter({ subsets: ["latin"], display: "swap" }); // self-hosted, no layout shift ``` ## Code-Splitting für schwere Client Components ```tsx import dynamic from "next/dynamic"; const Chart = dynamic(() => import("./Chart"), { ssr: false }); // load only when needed ``` Lazy-laden Sie große, nicht kritische Client Components (Charts, Editoren, Modals), damit sie das initiale Bundle nicht aufblähen. ## Langsame Inhalte streamen ```tsx }> // ship the shell instantly, stream slow data → better TTFB/FCP ``` ## Aggressiv cachen, präzise revalidieren ```tsx fetch(url, { next: { revalidate: 3600, tags: ["x"] } }); // static speed + controlled freshness ``` ## Die Checkliste den Metriken zugeordnet ```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 ``` ## Messen, nicht raten ```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 ``` ## Warum es wichtig ist Next.js-Performance dreht sich hauptsächlich darum, **weniger JavaScript zu versenden** (Server Components, Code-Splitting) und die eingebauten Optimierer zu nutzen (`next/image`, `next/font`, Streaming, Caching) — jeder direkt einer Core Web Vital zugeordnet. Zu wissen, welches Tool welche Metrik behebt (und mit `next build`/Lighthouse zu messen, anstatt zu raten), ist der Weg, wie Sie systematisch gute LCP/CLS/INP-Werte erreichen.