Auditoria de performance web: o checklist item a item do Lighthouse que uso para destravar sites lentos

1. Servidor e cache (TTFB)

• O HTML vem do cache? Confira os cabeçalhos de resposta.
• Compressão (gzip/brotli) e HTTP/2 ou HTTP/3 ativos.
• Cache longo para arquivos com hash no nome; HTML sem cache ou com revalidação.
• Banco de dados: slow query log, índices e consultas repetidas.

2. LCP: o maior elemento da tela

• Descubra qual é o elemento do LCP (o próprio relatório mostra).
• Se for imagem: formato AVIF/WebP, tamanho certo para cada tela, width/height e fetchpriority="high".
• Nunca aplique lazy loading na imagem da primeira dobra.
• Se for texto: a fonte precisa chegar cedo (preload e font-display adequados).

3. Bloqueio de renderização

• CSS crítico pequeno; o resto pode esperar.
• Scripts com defer ou carregados depois da interação.
• Fontes locais, subsetadas, só com os pesos usados.
• Menos origens externas: cada domínio novo custa conexão.

4. JavaScript e árvore de dependências

Aqui mora o INP ruim. O Lighthouse aponta tarefas longas e código não usado:

• Remova bibliotecas inteiras usadas para uma função.
• Divida o código por página; carregue widgets sob demanda.
• Em Magento: revise a cadeia do RequireJS e componentes Knockout que renderizam de novo sem necessidade.
• Terceiros (chat, pixels, testes A/B) depois do conteúdo e, se possível, após a primeira interação.

5. CLS: nada pode pular

• Toda imagem, vídeo e iframe com dimensões declaradas.
• Espaço reservado para banners, avisos de cookies e avaliações.
• Fontes com métricas de fallback ajustadas para não mudar o tamanho do texto.

6. Validar e repetir

Depois de cada lote de correções, rodo o Lighthouse várias vezes (a nota mobile oscila alguns pontos) e acompanho os dados de campo do Core Web Vitals. O relatório final mostra o antes, o depois e o que ainda vale atacar.