Cum optimizezi performanța și Core Web Vitals în Next.js?

Question

Accepted Answer

Next.js ți oferă multe instrumente de performanță; utilizarea lor bună vizează Core Web Vitals — LCP (încărcare), CLS (stabilitate layout) și INP (interactivitate).

Minimizează JavaScript-ul client (cea mai mare pârghie)

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

Superputerea App Router este trimiterea mai puțin JS. Logica grea și formatarea datelor rămân pe server; doar "insulele" cu adevărat interactive devin Client Components.

Optimizează imaginea LCP

// priority = load eagerly (don't lazy-load the LCP image); width/height prevent CLS ``` ## Optimizează fonturile (CLS + încărcare) ```tsx import { Inter } from "next/font/google"; const inter = Inter({ subsets: ["latin"], display: "swap" }); // self-hosted, no layout shift ``` ## Divide codul componentelor client grele ```tsx import dynamic from "next/dynamic"; const Chart = dynamic(() => import("./Chart"), { ssr: false }); // load only when needed ``` Încarcă leneș componente client mari și necritice (grafice, editori, modale) pentru ca acestea să nu umfle bundle-ul inițial. ## Transmite continut lent în flux ```tsx }> // ship the shell instantly, stream slow data → better TTFB/FCP ``` ## Cache agresiv, revalidează precis ```tsx fetch(url, { next: { revalidate: 3600, tags: ["x"] } }); // static speed + controlled freshness ``` ## Lista de verificare mapată la metrice ```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ăsoară, nu ghici ```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 ``` ## De ce este important Performanța Next.js este în mare parte despre **trimiterea mai puțin JavaScript** (Server Components, code-splitting) și utilizarea optimizatoarelor încorporate (`next/image`, `next/font`, streaming, caching) — fiecare mapând direct la un Core Web Vital. Știi care instrument repară care metrică (și măsori cu `next build`/Lighthouse în loc să ghicești) este modul în care sistematic obții scoruri bune de LCP/CLS/INP.