Remover o JavaScript não utilizado

O JavaScript não utilizado 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 os outros trabalhos necessários para renderizar a página.
  • Mesmo que o JavaScript seja assíncrono (sem bloqueio de renderização), o código compete por largura de banda com outros recursos durante o download, o que tem implicações significativas no desempenho. Enviar códigos não utilizados pela rede também é desnecessário para usuários de dispositivos móveis que não têm planos de dados ilimitados.

Como a auditoria de JavaScript não utilizada 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 utilizado

Detectar JavaScript não utilizado

A guia "Cobertura" no Chrome DevTools pode apresentar um detalhamento linha por linha do código não utilizado.

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

Ferramenta de build para suporte à remoção de códigos não utilizados

Confira os seguintes testes do Tooling.Report para descobrir se o bundler é compatível com recursos que facilitam evitar ou remover 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 JavaScript não utilizados e anexe apenas as bibliotecas Drupal necessárias à página ou ao componente relevante em uma página. Consulte Como definir uma biblioteca para mais detalhes.

Joomla

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

Magento

Desative o agrupamento de JavaScript integrado do Magento.

Reação

Se você não estiver renderizando do lado do 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 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