Optimizando el Rendimiento en Next.js: Cómo Alcanzar 100/100 en Lighthouse

En 2024, la velocidad de carga no es solo un lujo, es un requisito esencial. Google prioriza sitios rápidos (Core Web Vitals) y los usuarios abandonan páginas que tardan más de 3 segundos en cargar.

En este artículo, compartiré las estrategias que utilizo para garantizar la máxima puntuación en Lighthouse.

1. Optimización de Imágenes con next/image

El componente de imagen de Next.js es una de las herramientas más poderosas para el rendimiento. Automáticamente:

• Convierte imágenes a formatos modernos (WebP/AVIF).
• Redimensiona imágenes al tamaño exacto de la pantalla del usuario.
• Implementa Lazy Loading nativo.

import Image from "next/image";

<Image
  src="/hero.jpg"
  alt="Hero Image"
  width={1200}
  height={600}
  priority // Para imágenes above the fold
/>;

2. Dynamic Imports y Code Splitting

No cargues JavaScript que el usuario no necesita. Con next/dynamic, podemos cargar componentes pesados solo cuando es necesario.

import dynamic from "next/dynamic";

const HeavyChart = dynamic(() => import("../components/HeavyChart"), {
  loading: () => <p>Cargando gráfico...</p>,
});

3. Fuentes Optimizadas con next/font

Next.js 13+ eliminó el Layout Shift causado por la carga de fuentes. Usando next/font/google, las fuentes se alojan localmente en tiempo de construcción, eliminando solicitudes adicionales a Google Fonts.

Conclusión

El rendimiento es un trabajo continuo. Monitorear regularmente tu sitio con herramientas como PageSpeed Insights y WebPageTest es crucial para mantener la ventaja competitiva.

¿Necesitas una auditoría de rendimiento en tu sitio? Contáctame.