Comment optimisez-vous les performances et les Core Web Vitals dans Next.js ?

Question

Accepted Answer

Next.js vous donne de nombreux outils de performance ; les utiliser bien cible les Core Web Vitals — LCP (chargement), CLS (stabilité de la mise en page) et INP (interactivité).

Minimiser le JavaScript client (le levier principal)

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 superpower du App Router est d'envoyer moins de JS. La logique lourde et le formatage des données restent sur le serveur ; seules les véritables « îles » interactives deviennent des Client Components.

// priority = load eagerly (don't lazy-load the LCP image); width/height prevent CLS ``` ## Optimiser les polices (CLS + chargement) ```tsx import { Inter } from "next/font/google"; const inter = Inter({ subsets: ["latin"], display: "swap" }); // self-hosted, no layout shift ``` ## Code-split les heavy client components ```tsx import dynamic from "next/dynamic"; const Chart = dynamic(() => import("./Chart"), { ssr: false }); // load only when needed ``` Chargez lentement les gros client components non critiques (graphiques, éditeurs, modales) pour qu'ils ne gonflent pas le bundle initial. ## Streamer le contenu lent ```tsx }> // ship the shell instantly, stream slow data → better TTFB/FCP ``` ## Cacher agressivement, revalider précisément ```tsx fetch(url, { next: { revalidate: 3600, tags: ["x"] } }); // static speed + controlled freshness ``` ## La checklist mappée aux métriques ```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 ``` ## Mesurer, ne pas deviner ```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 ``` ## Pourquoi c'est important La performance Next.js consiste surtout à **envoyer moins de JavaScript** (Server Components, code-splitting) et utiliser les optimiseurs intégrés (`next/image`, `next/font`, streaming, caching) — chacun se mappant directement à un Core Web Vital. Savoir quel outil corrige quelle métrique (et mesurer avec `next build`/Lighthouse plutôt que de deviner) est comment vous atteignez systématiquement de bons scores LCP/CLS/INP.

Minimiser le JavaScript client (le levier principal)

Optimiser l'image LCP

Optimiser les polices (CLS + chargement)

Code-split les heavy client components

Streamer le contenu lent

Cacher agressivement, revalider précisément

La checklist mappée aux métriques

Mesurer, ne pas deviner

Pourquoi c'est important