Performance em Next.js: Otimizações que fazem a diferença

Por que Core Web Vitals importam

O Google usa Core Web Vitals como fator de ranqueamento. Sites lentos perdem posição no SEO e perdem usuários — cada segundo de carregamento aumenta a taxa de rejeição em ~32%.

As três métricas que você precisa dominar:

1. Imagens otimizadas

O Next.js tem o componente Image com lazy loading automático. Nunca use a tag img diretamente. Use sempre next/image com width, height e a prop priority para imagens above the fold.

No next.config.js, adicione formatos modernos: image/avif e image/webp para reduzir o tamanho dos arquivos automaticamente.

2. Dynamic imports para componentes pesados

Componentes que só são usados após interação não precisam estar no bundle inicial. Use next/dynamic com uma skeleton de loading para carregar o componente apenas quando necessário.

3. React Server Components

Com o App Router do Next.js 14, componentes são server-side por padrão. Só adicione "use client" quando realmente necessário (interatividade, hooks, eventos do browser).

Componentes server-side não aumentam o bundle JS do cliente e são mais rápidos para renderizar.

4. Fontes otimizadas

Nunca carregue fontes do Google diretamente no HTML. Use next/font/google com display swap para evitar o Flash of Invisible Text (FOIT).

5. Cache e revalidação

Use o parâmetro next.revalidate no fetch para definir quanto tempo os dados ficam em cache. Combinar cache estático com revalidação incremental é a estratégia mais eficiente.

Ferramentas de medição

Conclusão

Performance não é um item do backlog — é parte do produto. Com Next.js 14 e estas técnicas, atingir 90+ no Lighthouse é plenamente possível.

Quer um site que carrega rápido e converte mais? Conheça nossos serviços.