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, pois JavaScript não utilizado tem um custo! Pode competir por recursos de rede e bloquear a thread principal. Isso vai atrasar 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 pouco antes do uso.

Como o 'JavaScript não utilizado' afeta o pagespeed

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

No entanto, tenha em mente que uma pontuação do Lighthouse não é uma pontuação dos Core Web Vitals. Os Core Web Vitals são medidos com dados 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 pode responder a entradas do usuário nem continuar analisando a página. Isso afetará tanto o Largest Contentful Paint (LCP) quanto o Interaction to Next Paint (INP)

Como encontrar 'JavaScript não utilizado'

Para encontrar 'JavaScript não utilizado' 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 desenvolvimento 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 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 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 WordPress, de longe 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. 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 ao ano, onde você analisa bem 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 declaraçõ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 mais 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 está importando 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 carregamento lazy de componentes só importará esses componentes quando forem necessários. Isso removerá imediatamente o 'aviso do Lighthouse para JavaScript não utilizado' para as páginas onde você carrega de forma lazy o 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 este 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 o 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