Performance: code-splitting, lazy loading e Core Web Vitals

"Carregou rápido pra mim" não diz nada sobre performance real — você provavelmente está numa máquina boa, numa conexão boa, com o site em cache. Performance de verdade se mede com métricas padronizadas, e é isso que o Core Web Vitals do Google formaliza.

Code-splitting e dynamic import

O Next.js já divide o JavaScript por rota automaticamente — quem visita /login não baixa o código de /dashboard. Mas dentro de uma mesma rota, um componente pesado que só é usado às vezes (um editor de texto rico, um modal complexo, um gráfico) pode ser carregado sob demanda com next/dynamic, em vez de entrar no bundle inicial da página inteira.

import dynamic from "next/dynamic";

const GraficoDeVendas = dynamic(() => import("./grafico-de-vendas"), {
  loading: () => <p>Carregando gráfico...</p>,
  ssr: false, // o gráfico só faz sentido no navegador
});

export default function RelatoriosPage() {
  return (
    <div>
      <h1>Relatórios</h1>
      <GraficoDeVendas />
    </div>
  );
}

Lazy loading de imagem

O componente next/image já adia (lazy-load) o carregamento de imagens fora da tela visível por padrão. O cuidado inverso importa tanto quanto: a imagem que aparece acima da dobra (o banner principal, por exemplo) deveria usar priority, pra não competir por prioridade de rede com conteúdo menos importante.

import Image from "next/image";

// Acima da dobra — carrega com prioridade, não espera lazy load
<Image src="/banner.jpg" alt="Banner" width={1200} height={400} priority />

// Mais abaixo na página — lazy load automático, não compete pela rede logo de cara
<Image src="/produto-relacionado.jpg" alt="Produto relacionado" width={300} height={300} />

CSS crítico

CSS que bloqueia a renderização (o navegador precisa baixar e processar antes de mostrar qualquer coisa) atrasa a primeira pintura da página. A ideia de CSS crítico é isolar só o estilo necessário pro conteúdo visível imediatamente e entregá-lo o mais rápido possível, deixando o resto do CSS carregar sem bloquear.

Core Web Vitals, em uma frase cada

• LCP (Largest Contentful Paint) — tempo até o maior elemento visível da tela terminar de carregar, geralmente uma imagem grande ou um bloco de texto no topo da página.
• CLS (Cumulative Layout Shift) — o quanto elementos da página se deslocam inesperadamente enquanto ela ainda está carregando, como quando uma imagem sem dimensão reservada empurra o texto abaixo dela.
• INP (Interaction to Next Paint) — tempo entre uma interação do usuário (clique, toque) e a próxima atualização visual na tela; é a métrica de responsividade que substituiu o antigo FID.