Como você otimiza o desempenho e Core Web Vitals no Next.js?

Question

Accepted Answer

O Next.js oferece muitas ferramentas de desempenho; usá-las bem visa os Core Web Vitals — LCP (carregamento), CLS (estabilidade de layout) e INP (interatividade).

Minimize JavaScript do cliente (maior alavanca)

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

O superpoder do App Router é enviar menos JS. Lógica pesada e formatação de dados permanecem no servidor; apenas "ilhas" genuinamente interativas se tornam Client Components.

Otimize a imagem LCP

// priority = load eagerly (don't lazy-load the LCP image); width/height prevent CLS ``` ## Otimize fontes (CLS + carregamento) ```tsx import { Inter } from "next/font/google"; const inter = Inter({ subsets: ["latin"], display: "swap" }); // self-hosted, no layout shift ``` ## Divida o código de componentes de cliente pesados ```tsx import dynamic from "next/dynamic"; const Chart = dynamic(() => import("./Chart"), { ssr: false }); // load only when needed ``` Carregue lentamente componentes de cliente grandes e não críticos (gráficos, editores, modais) para que não inchem o pacote inicial. ## Transmita conteúdo lento ```tsx }> // ship the shell instantly, stream slow data → better TTFB/FCP ``` ## Armazene agressivamente em cache, revalide com precisão ```tsx fetch(url, { next: { revalidate: 3600, tags: ["x"] } }); // static speed + controlled freshness ``` ## A lista de verificação mapeada para métricas ```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 ``` ## Meça, não adivinhe ```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 ``` ## Por que isso importa O desempenho do Next.js é principalmente sobre **enviar menos JavaScript** (Server Components, code-splitting) e usar os otimizadores integrados (`next/image`, `next/font`, streaming, caching) — cada um mapeando diretamente para um Core Web Vital. Saber qual ferramenta corrige qual métrica (e medir com `next build`/Lighthouse em vez de adivinhar) é como você sistematicamente consegue boas pontuações de LCP/CLS/INP.