Blog

Performance en Next.js: reducir bundle size y mejorar Core Vitals

Cómo medir, diagnosticar y arreglar los problemas de rendimiento más comunes en aplicaciones Next.js.

#performance#next-js#frontend#optimizacion#seo

Las aplicaciones rápidas convierten mejor. Pero la performance no es un dato que puedas ignorar hasta el final. Necesita forma parte de la arquitectura desde el inicio.

Core Vitals de Google: qué son y por qué importan

Google mide Largest Contentful Paint (LCP), First Input Delay (FID) y Cumulative Layout Shift (CLS). Si son malos, tu SEO sufre. La buena noticia es que se pueden mejorar con decisiones arquitectónicas correctas.

LCP es el más fácil de arreglar si lo atacas bien: entrega el contenido crítico rápido, postergua el resto.

  • LCP: segundos hasta que el contenido principal se ve.
  • FID: retraso cuando el usuario interactúa.
  • CLS: movimiento inesperado de elementos.

Bundle size: corta peso sin sacrificar funcionalidad

Cada kilobyte que envías al navegador debe tener justificación. Revisa dependencias: quizá estés importando una librería entera cuando solo necesitas una función. Quizá haya una alternativa más ligera.

Code splitting automático en Next.js ya te ayuda, pero puedes hacer más con lazy loading y dynamic imports.

  1. Audita dependencias con npm ls o yarn why.
  2. Busca alternativas más ligeras.
  3. Usa dynamic imports para código no crítico.

Imágenes: el primer culpable de pagos lentas

Las imágenes sin optimizar suelen ser el 80% del peso. Next.js Image component es excelente: compresor automático, múltiples formatos, lazy loading. Si la usas bien, ganas puntos de LCP casi gratis.

  • Usa next/image para todo lo que puedas.
  • Define width y height explícitamente.
  • Prioriza imágenes Above the Fold.

Monitoreo continuo: mide lo que importa

No confíes en tu máquina local. Usa herramientas reales: Lighthouse, Web Vitals, Sentry. Establece alertas si Core Vitals empiezan a degradarse.

Cuando tienes datos reales, puedes tomar decisiones basadas en hechos, no en gut feeling.

Lo que no mides, se degrada lentamente hasta que de repente tu aplicación es un desastre.

Cambios que dan el mayor impacto rápido

Prioriza imágenes optimizadas, diferida de JavaScript no crítico y pre-rendering de rutas estáticas. Esos tres cambios suelen traer mejoras de 20-40% en métricas de performance.

Después, según qué veas en los datos, afina con más precisión.

04 / Contacto

¿Hablamos de tu próximo sistema?

Cuéntame el problema que quieres resolver. Respondo en un día laborable y planteo una ruta de acción en el primer mensaje.

Iniciar conversación →