Remover o JavaScript não utilizado

O JavaScript não usado pode diminuir a velocidade de carregamento da página:

  • Se o JavaScript estiver bloqueando a renderização, o navegador precisará fazer o download, analisar, compilar e avaliar o script antes de prosseguir com todo o outro trabalho necessário para renderizar a página.
  • Mesmo que o JavaScript seja assíncrono (não bloqueie a renderização), o código compete pela largura de banda com outros recursos durante o download, o que tem implicações significativas no desempenho. Enviar código não utilizado pela rede também é um desperdício para usuários de dispositivos móveis que não têm planos de dados ilimitados.

Como a auditoria de JavaScript não usado falha

O Lighthouse sinaliza todos os arquivos JavaScript com mais de 20 kibibytes de código não utilizado:

Uma captura de tela da auditoria.
Clique em um valor na coluna URL para abrir o código-fonte do script em uma nova guia.

Como remover o JavaScript não usado

Detectar JavaScript não usado

A guia Coverage no Chrome DevTools pode mostrar um detalhamento linha por linha do código não usado.

A classe Coverage no Puppeteer pode ajudar a automatizar o processo de detecção e extração de código não usado.

Ferramenta de build para suporte à remoção de código não utilizado

Confira os seguintes testes de Tooling.Report para descobrir se o bundler oferece suporte a recursos que facilitam a prevenção ou remoção de códigos não utilizados:

Orientações específicas para a pilha

Angular

Se você estiver usando a CLI Angular, inclua mapas de origem no build de produção para inspecionar seus pacotes.

Drupal

Remova os recursos do JavaScript não utilizados e anexe somente as bibliotecas Drupal necessárias à página ou ao componente relevante em uma página. Consulte a documentação do Drupal para mais detalhes. Para identificar bibliotecas anexas que estão adicionando JavaScript externo, execute a cobertura de código no Chrome DevTools. Você pode identificar o tema ou módulo responsável pelo URL do script quando a agregação do JavaScript está desativada no site Drupal. Procure temas ou módulos que tenham muitos scripts na lista, apresentando um nível alto de vermelho na cobertura do código. Um tema ou módulo só deve anexar uma biblioteca de script se ela for realmente usada na página. para mais detalhes.

Joomla

Reduza ou troque o número de extensões do Joomla que carregam JavaScript não utilizado na sua página.

Magento

Desative o agrupamento JavaScript integrado do Magento.

Reação

Se você não estiver renderizando no servidor, divida os pacotes JavaScript com React.lazy(). Caso contrário, divida o código usando uma biblioteca de terceiros, como loadable-components.

Vue

Se você não estiver renderizando no servidor e estiver usando o roteador Vue, divida os pacotes por rotas de carregamento lento.

WordPress

Reduza ou troque o número de plug-ins do WordPress que carregam JavaScript não utilizado na sua página.

Recursos