Corrigir o aviso reduce unused JavaScript do Lighthouse

O que é o aviso 'reduce unused JavaScript' do Lighthouse?

O que é o aviso reduce unused JavaScript no Lighthouse? O Lighthouse sinaliza scripts que têm mais de 20kb de bytes não utilizados.

O aviso 'reduce unused JavaScript' impacta diretamente a pontuação do Lighthouse.

JavaScript não utilizado também é bastante importante para passar nos Core Web Vitals, já que JavaScript não utilizado tem um custo! Pode competir por recursos de rede e bloquear a thread principal. Isso vai diminuir os Core Web Vitals, especialmente o Largest Contentful Paint (LCP) e o Interaction to Next Paint (INP).

O que causa JavaScript não utilizado?

JavaScript não utilizado pode ter diversas razões. JavaScript não utilizado geralmente é causado por:

• Muitos  plugins no seu CMS.
• Código morto.
• Código mal escrito.
• Acesso irrestrito ao tag manager
• Importações desnecessárias
  
• Código que foi carregado imediatamente mas poderia ter sido carregado antes do uso.

Como o 'unused JavaScript' afeta o PageSpeed

JavaScript não utilizado impacta diretamente as métricas do Lighthouse. Torna a renderização de uma página desnecessariamente complicada, tornando quase impossível obter uma pontuação alta no Lighthouse. Seu navegador precisará fazer mais trabalho antes que a página possa ser exibida na tela. 

No entanto, tenha em mente que uma pontuação do Lighthouse não é uma pontuação de Core Web Vitals. Os Core Web Vitals são medidos com dados do CrUX.

Existem 2 problemas com JavaScript não utilizado.

• Primeiro, esse JavaScript precisa ser baixado. Esses scripts vão competir por recursos de rede. Isso pode ter um grande impacto no Largest Contentful Paint (LCP)
• Em segundo lugar, o navegador precisará executar todo esse JavaScript. Enquanto o navegador executa esse JavaScript, ele basicamente para de fazer qualquer outra coisa e não consegue responder à entrada do usuário nem continuar analisando a página. Isso vai afetar tanto o Largest Contentful Paint (LCP) quanto o Interaction to Next Paint (INP)

Como encontrar 'unused JavaScript'

Para encontrar 'unused JavaScript' você pode ler a auditoria do Lighthouse ou usar a 'Chrome Coverage Tool' para obter uma lista completa de todos os arquivos JavaScript e sua quantidade de bytes não utilizados.

Abra as ferramentas de desenvolvedor do Chrome com o atalho ctrl-shift-i. Em seguida, use o atalho ctrl-shift-p para abrir o menu de comandos e digite 'coverage'. Selecione 'Start instrumenting coverage and reload page'. Isso vai recarregar a página e mostrar a quantidade de bytes não utilizados para todos os arquivos que contêm código CSS ou JavaScript.

Como corrigir 'reduce unused JavaScript'

Para corrigir o aviso 'reduce unused JavaScript' você primeiro precisará rastrear suas origens. O Lighthouse vai indicar quais scripts têm uma grande quantidade de bytes não utilizados. Existem 5 suspeitos habituais:

1. Remova plugins desnecessários ou triviais. Se você está usando um CMS baseado em plugins como o WordPress, o método mais fácil e eficaz de limpar seu código não utilizado é remover plugins que você não precisa ou que podem ser facilmente substituídos por uma simples alteração de código (por exemplo, seu plugin de analytics, plugin de chat, plugin de compartilhamento social)
   
2. Remova código morto. Código morto é código que não é mais usado pelo site atual. Ele apenas ocupa espaço e largura de banda. Se você possui um site, sugiro agendar uma maratona de código morto pelo menos duas vezes por ano, onde você analisa seus scripts personalizados e remove código que não é mais necessário.
   
3. Reescreva scripts mal codificados.  Scripts mal codificados tendem a ter muitas verificações desnecessárias e instruções if/else. Essas verificações podem nunca ser usadas e certas condições if/else podem não ser necessárias. Se você tem muitos scripts antigos ou seu desenvolvedor JavaScript atual é melhor que o anterior, pode ser uma boa ideia revisitar scripts antigos.
   
4. Limpe seu tag manager e restrinja o acesso. O tag manager é uma fonte comum de código não utilizado, especialmente quando departamentos menos técnicos têm permissão para adicionar tags. Muitas vezes eles esquecem de remover suas tags não utilizadas e o tag manager se torna a principal fonte de JavaScript não utilizado.
5. Remova importações desnecessárias (NextJS, React, VUE etc). A maioria dos ambientes SPA importa componentes/funções demais. Verifique suas importações e remova código não utilizado. 
6. Carregue rotas ou componentes de forma lazy  (NextJS, React, VUE etc). O lazy loading de componentes vai importar esses componentes apenas quando forem necessários. Isso vai remover imediatamente o aviso do Lighthouse para JavaScript não utilizado nas páginas onde você faz lazy load de código não utilizado.
7. Adie o carregamento de scripts não críticos. Às vezes você precisa de um script (por exemplo, para enviar um formulário) mas não precisa dele imediatamente. E, sejamos honestos, 98% dos seus visitantes não vão se cadastrar de qualquer forma. Então, na maioria das vezes, esses scripts não são utilizados. Faria mais sentido carregar esse script quando o visitante interage com o formulário, e não durante o carregamento da página.

Solução alternativa para 'reduce unused JavaScript'

Às vezes não é possível corrigir todos os avisos de JavaScript não utilizado. Nesse caso, você pode tentar minimizar o impacto desses recursos não utilizados

- Carregue todos os recursos JavaScript do seu domínio principal (isso evita uma nova conexão de rede)
- Faça preload de recursos mais importantes como suas fontes e o elemento de imagem LCP.
- Adie o máximo de JavaScript possível
- Coloque JavaScript menos importante no final da página