JavaScript desnecessário consome transferência, análise e execução. O primeiro passo é descobrir quais arquivos e funções pesam numa página real, e não remover dependências só porque aparecem em uma auditoria. Código pode ser usado após a primeira tela ou em fluxos menos frequentes.
1. Registre um cenário de referência
Escolha página, dispositivo, rede e interações importantes. Use o painel Network para ver arquivos, tamanho e prioridade; use Lighthouse para localizar recursos e a aba Coverage do DevTools para observar código não executado durante o cenário. Uma sessão de Coverage não cobre automaticamente todos os caminhos possíveis.
2. Descubra a origem e o momento de uso
Agrupe scripts por recurso: busca, formulário, banner, widget externo, biblioteca ou analytics. Pergunte se o script é necessário nessa página, se pode carregar depois da interação e se outra dependência já oferece a mesma função. A orientação do Lighthouse para JavaScript não usado descreve a aba Coverage e opções como code splitting.
3. Escolha uma intervenção segura
| Situação | Ajuste a avaliar |
|---|---|
| Recurso usado em poucas rotas | Carregar somente nessas rotas |
| Recurso após clique | Importar quando a pessoa iniciar a ação |
| Código morto confirmado | Remover dependência e testes associados |
| Script de terceiros | Rever necessidade e efeito nos fluxos |
| Código essencial ao conteúdo | Preservar renderização e navegação sem bloqueio desnecessário |
Use defer, async ou divisão de código de acordo com dependências e ordem. Essas opções não são intercambiáveis; a execução precisa ser testada.
4. Repita testes funcionais e de desempenho
Valide primeira visita, retorno, teclado, formulário, consentimento e situações de erro. Compare cobertura, tamanho transferido, tempo de execução e métricas de laboratório. Uma queda de bytes não justifica quebrar conteúdo ou acessibilidade.
A investigação do diagnóstico de site lento ajuda a separar JavaScript de outras causas, como CSS bloqueante.