Otimizando Performance no Next.js: Como Atingir 100/100 no Lighthouse

Em 2024, a velocidade de carregamento não é apenas um luxo, é um requisito essencial. O Google prioriza sites rápidos (Core Web Vitals) e usuários abandonam páginas que demoram mais de 3 segundos para carregar.

Neste artigo, vou compartilhar as estratégias que utilizo para garantir pontuação máxima no Lighthouse.

1. Otimização de Imagens com next/image

O componente de imagem do Next.js é uma das ferramentas mais poderosas para performance. Ele automaticamente:

• Converte imagens para formatos modernos (WebP/AVIF).
• Redimensiona imagens para o tamanho exato da tela do usuário.
• Implementa Lazy Loading nativo.

import Image from "next/image";

<Image
  src="/hero.jpg"
  alt="Hero Image"
  width={1200}
  height={600}
  priority // Para imagens acima da dobra
/>;

2. Dynamic Imports e Code Splitting

Não carregue JavaScript que o usuário não precisa. Com next/dynamic, podemos carregar componentes pesados apenas quando necessário.

import dynamic from "next/dynamic";

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

3. Fontes Otimizadas com next/font

O Next.js 13+ removeu o Layout Shift causado por carregamento de fontes. Usando next/font/google, as fontes são hospedadas localmente no build time, eliminando requisições extras ao Google Fonts.

Conclusão

Performance é um trabalho contínuo. Monitorar regularmente seu site com ferramentas como PageSpeed Insights e WebPageTest é crucial para manter a vantagem competitiva.

Precisa de uma auditoria de performance no seu site? Entre em contato comigo.