Cómo optimizamos el rendimiento de una app Next.js al 98 en Lighthouse

Cuando un cliente nos trajo su plataforma e-commerce con una puntuación de 52 en Lighthouse, sabíamos que había trabajo por hacer. En este artículo detallamos el proceso completo de optimización.

El punto de partida

La aplicación cargaba más de 8MB de JavaScript en el bundle inicial, imágenes sin optimizar y sin ningún tipo de code splitting. El tiempo hasta interactivo (TTI) superaba los 12 segundos en conexiones 3G.

Técnicas aplicadas

Las principales optimizaciones que aplicamos fueron:

• next/image: Migramos todas las imágenes al componente optimizado de Next.js, reduciendo el peso total en un 65%.
• Dynamic imports: Dividimos los componentes pesados con dynamic() para cargar solo lo necesario.
• Route prefetching: Configuramos correctamente el prefetching de Next.js para mejorar la navegación.
• Font optimization: Usamos next/font para eliminar el layout shift causado por las fuentes.

Resultados

Después de aplicar estas técnicas, la puntuación de Lighthouse pasó de 52 a 98. El tiempo de carga principal bajó de 4.2s a 0.8s y el TTI de 12s a 2.1s.

La lección más importante: la optimización no es un paso final, es una parte integral del proceso de desarrollo.