Jak optimalizovat výkon a Core Web Vitals v Next.js?

Question

Accepted Answer

Next.js vám poskytuje mnoho nástrojů pro optimalizaci výkonu; jejich správné použití se zaměřuje na Core Web Vitals — LCP (načítání), CLS (stabilita rozvržení) a INP (interaktivita).

Minimalizujte JavaScript na straně klienta (největší páka)

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

Silou App Routeru je odeslání menšího JS. Těžká logika a formátování dat zůstávají na serveru; pouze skutečně interaktivní "ostrovy" se stanou Client Components.

Optimalizujte LCP obrázek

// priority = load eagerly (don't lazy-load the LCP image); width/height prevent CLS ``` ## Optimalizujte fonty (CLS + načítání) ```tsx import { Inter } from "next/font/google"; const inter = Inter({ subsets: ["latin"], display: "swap" }); // self-hosted, no layout shift ``` ## Rozdělujte do kódu těžké client komponenty ```tsx import dynamic from "next/dynamic"; const Chart = dynamic(() => import("./Chart"), { ssr: false }); // load only when needed ``` Lazy-načítejte velké, nekritické client komponenty (grafy, editory, modály), aby nezatěžovaly počáteční bundle. ## Streamujte pomalý obsah ```tsx }> // ship the shell instantly, stream slow data → better TTFB/FCP ``` ## Cachujte agresivně, revalidujte přesně ```tsx fetch(url, { next: { revalidate: 3600, tags: ["x"] } }); // static speed + controlled freshness ``` ## Checklist mapovaný na metriky ```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ěřte, neyhadujte ```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 ``` ## Proč to má smysl Výkon Next.js je především o **odeslání menšího JavaScriptu** (Server Components, code-splitting) a používání vestavěných optimizátorů (`next/image`, `next/font`, streaming, caching) — každý se mapuje přímo na Core Web Vital. Vědět, který nástroj opravuje kterou metriku (a měřit pomocí `next build`/Lighthouse místo hádání) je to, jak systematicky dosáhnete dobrých skóre LCP/CLS/INP.