Hogyan optimalizálja a teljesítményt és a Core Web Vitals-t a Next.js-ben?

Question

Accepted Answer

A Next.js számos teljesítménnyövekedési eszközt biztosít; ezek helyes használata a Core Web Vitals célzására irányul — LCP (betöltés), CLS (elrendezés stabilitása) és INP (interaktivitás).

Minimalizálja az ügyfél JavaScriptjét (a legnagyobb tényező)

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

Az App Router szuperhatalmá kevesebb JS szállítása. A nehéz logika és az adatformázás a szerveren marad; csak az igazán interaktív "szigetek" válnak Client Components-re.

// priority = load eagerly (don't lazy-load the LCP image); width/height prevent CLS ``` ## Betűtípusok optimalizálása (CLS + betöltés) ```tsx import { Inter } from "next/font/google"; const inter = Inter({ subsets: ["latin"], display: "swap" }); // self-hosted, no layout shift ``` ## Nehéz ügyfélkomponensek kódfelosztása ```tsx import dynamic from "next/dynamic"; const Chart = dynamic(() => import("./Chart"), { ssr: false }); // load only when needed ``` Lassú betöltésű nagyobb, nem kritikus ügyfélkomponensek (diagramok, szerkesztők, modális ablakok), hogy ne fújják fel a kezdeti csomagot. ## Lassan feltöltödő tartalom streamelése ```tsx }> // ship the shell instantly, stream slow data → better TTFB/FCP ``` ## Aggresszív gyorsítótárazás, pontos újravalidálás ```tsx fetch(url, { next: { revalidate: 3600, tags: ["x"] } }); // static speed + controlled freshness ``` ## A metrikákra leképezett ellenőrzőlista ```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érjen, ne találgasson ```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 ``` ## Miért fontos A Next.js teljesítménye leginkább a **kevesebb JavaScript szállítása** (Server Components, kódfelosztás) és a beépített optimalizálók (`next/image`, `next/font`, streaming, gyorsítótárazás`) használata — mindegyik közvetlenül egy Core Web Vitalra képeződik le. Annak ismerete, hogy melyik eszköz melyik mérőszámot javítja (és a `next build`/Lighthouse segítségével mérni a találgatás helyett) az a módszer, ahogy szisztematikusan jó LCP/CLS/INP pontszámokat érhet el.

Minimalizálja az ügyfél JavaScriptjét (a legnagyobb tényező)

Az LCP kép optimalizálása

Betűtípusok optimalizálása (CLS + betöltés)

Nehéz ügyfélkomponensek kódfelosztása

Lassan feltöltödő tartalom streamelése

Aggresszív gyorsítótárazás, pontos újravalidálás

A metrikákra leképezett ellenőrzőlista

Mérjen, ne találgasson

Miért fontos