Come ottimizzi le prestazioni e i Core Web Vitals in Next.js?

Question

Accepted Answer

Next.js ti fornisce molti strumenti per le prestazioni; usandoli correttamente miri ai Core Web Vitals — LCP (caricamento), CLS (stabilità del layout) e INP (interattività).

Minimizzare il JavaScript lato client (leva più importante)

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

La superiorità dell'App Router è spedire meno JS. La logica pesante e la formattazione dei dati rimangono sul server; solo le vere "isole" interattive diventano Client Components.

// priority = load eagerly (don't lazy-load the LCP image); width/height prevent CLS ``` ## Ottimizzare i font (CLS + caricamento) ```tsx import { Inter } from "next/font/google"; const inter = Inter({ subsets: ["latin"], display: "swap" }); // self-hosted, no layout shift ``` ## Suddividere il codice dei componenti client pesanti ```tsx import dynamic from "next/dynamic"; const Chart = dynamic(() => import("./Chart"), { ssr: false }); // load only when needed ``` Caricare in modo lazy i componenti client grandi e non critici (grafici, editor, modal) in modo che non gonfi il bundle iniziale. ## Trasmettere contenuti lenti ```tsx }> // ship the shell instantly, stream slow data → better TTFB/FCP ``` ## Memorizzare aggressivamente, convalidare con precisione ```tsx fetch(url, { next: { revalidate: 3600, tags: ["x"] } }); // static speed + controlled freshness ``` ## La checklist mappata sulle metriche ```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 ``` ## Misurare, non indovinare ```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 ``` ## Perché è importante Le prestazioni di Next.js riguardano principalmente lo **spedire meno JavaScript** (Server Components, code-splitting) e l'uso degli ottimizzatori incorporati (`next/image`, `next/font`, streaming, caching) — ognuno mappato direttamente a un Core Web Vital. Sapere quale strumento risolve quale metrica (e misurare con `next build`/Lighthouse anziché indovinare) è il modo in cui raggiungi sistematicamente buoni punteggi di LCP/CLS/INP.

Minimizzare il JavaScript lato client (leva più importante)

Ottimizzare l'immagine LCP

Ottimizzare i font (CLS + caricamento)

Suddividere il codice dei componenti client pesanti

Trasmettere contenuti lenti

Memorizzare aggressivamente, convalidare con precisione

La checklist mappata sulle metriche

Misurare, non indovinare

Perché è importante