¿Cómo optimizas el rendimiento y Core Web Vitals en Next.js?

Question

Accepted Answer

Next.js te proporciona muchas herramientas de rendimiento; usarlas bien apunta a los Core Web Vitals — LCP (carga), CLS (estabilidad del diseño) e INP (interactividad).

Minimizar JavaScript del cliente (la mayor palanca)

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 superioridad del App Router es enviar menos JS. La lógica pesada y el formateo de datos permanecen en el servidor; solo los "islands" genuinamente interactivos se convierten en Client Components.

// priority = load eagerly (don't lazy-load the LCP image); width/height prevent CLS ``` ## Optimizar fuentes (CLS + carga) ```tsx import { Inter } from "next/font/google"; const inter = Inter({ subsets: ["latin"], display: "swap" }); // self-hosted, no layout shift ``` ## Dividir el código de componentes cliente pesados ```tsx import dynamic from "next/dynamic"; const Chart = dynamic(() => import("./Chart"), { ssr: false }); // load only when needed ``` Carga perezosa de componentes cliente grandes y no críticos (gráficos, editores, modales) para que no inflen el bundle inicial. ## Transmitir contenido lento ```tsx }> // ship the shell instantly, stream slow data → better TTFB/FCP ``` ## Cachear agresivamente, revalidar precisamente ```tsx fetch(url, { next: { revalidate: 3600, tags: ["x"] } }); // static speed + controlled freshness ``` ## La lista de verificación asignada a 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 ``` ## Mide, no adivines ```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 qué es importante El rendimiento de Next.js se trata principalmente de **enviar menos JavaScript** (Server Components, code-splitting) y usar los optimizadores incorporados (`next/image`, `next/font`, streaming, caching) — cada uno asignado directamente a un Core Web Vital. Saber qué herramienta corrige qué métrica (y medir con `next build`/Lighthouse en lugar de adivinar) es cómo sistemáticamente logras buenos puntajes de LCP/CLS/INP.

Minimizar JavaScript del cliente (la mayor palanca)

Optimizar la imagen de LCP

Optimizar fuentes (CLS + carga)

Dividir el código de componentes cliente pesados

Transmitir contenido lento

Cachear agresivamente, revalidar precisamente

La lista de verificación asignada a métricas

Mide, no adivines

Por qué es importante