Como reduzir o tempo de execução de Javascript com WP Rocket

14/02/2022 | Desenvolvimento

Reduzir tempo de execução js

Reduzir o tempo de execução do JavaScript é uma das recomendações mais importantes do PageSpeed ​​Insights. Como o JavaScript pode afetar enormemente o desempenho do seu site WordPress, é essencial gerenciar quaisquer problemas de JS que diminuam o tempo de carregamento.

Neste artigo, você primeiro entenderá o impacto da execução do JavaScript no desempenho. Em seguida, você aprenderá como medir e identificar os problemas do JS e como reduzir o tempo de execução do JS em seu site WordPress, tanto manualmente quanto com alguns plugins.

Qual é o impacto do tempo de execução do JS no desempenho?

Você pode ver como o tempo de execução do JS afeta o desempenho observando a métrica de Atraso da primeira entrada e a pontuação de desempenho do Lighthouse .

O tempo de execução do JavaScript está intimamente relacionado à pontuação do FID, que mede a interatividade e a capacidade de resposta da página. Se você tentar interagir com uma página e não obtiver nenhuma resposta, significa que o navegador está ocupado processando alguns arquivos JS. É por isso que você deve tentar reduzir o tamanho desses scripts JS o máximo possível.

A métrica FID está intimamente ligada ao Tempo total de bloqueio (TBT) , uma das métricas de desempenho do Lighthouse (com base em dados do laboratório). Como a pontuação TBT representa 25% da pontuação geral de desempenho do Lighthouse , você pode entender como a pontuação do PageSpeed ​​Insights será afetada por problemas de JavaScript.

Vamos ver com mais detalhes o que isso significa.

Como medir o tempo de execução do JavaScript e identificar os principais problemas do JS

Reduzir o tempo de execução do JS significa reduzir o tempo gasto pelo navegador para analisar, compilar e executar o JS após o download.

Analisar, compilar e executar são as três etapas que você deve gerenciar para reduzir o tempo de execução do JS.

Toda vez que a execução do JS for superior a 2 segundos, o Lighthouse o reportará como um problema a ser resolvido.

Você pode identificar e medir o tempo de execução do JS por meio do PageSpeed ​​Insights e do GTmetrix.

Medindo o tempo de execução do JS por meio do Pagespeed Insights

Se o seu URL tiver algum problema de tempo de execução do JS, o Google PageSpeed ​​Insights mostrará um aviso na seção Diagnóstico:

Reduza o tempo de execução do JavaScript - PSI
Reduza o tempo de execução do JavaScript – PSI

Como você pode ver, o PSI mostra o tempo de execução do JS por cada etapa:

  • Avaliação do script (é o estágio de compilação)
  • Análise de script (é o estágio de análise)
  • Tempo total de CPU (é o custo de memória, que pode congelar sua página completamente).

Conforme mencionado acima, a auditoria considera cada script JS que possui um tempo de execução superior a 2 segundos.

Medindo o tempo de execução do JS via GTmetrix

Ao testar o desempenho do seu URL, o GTmetrix mostra uma auditoria muito semelhante.

Vá para a guia Estrutura e procure o status do tempo de execução do JS. Você obterá as informações sobre cada estágio JS.

No exemplo abaixo, o tempo de execução do JS é superior a 2 segundos.

Tempo de execução do JavaScript – GTmetrix

Como reduzir o tempo de execução do JavaScript (manualmente e com plugins)

Existem três maneiras principais de reduzir o tempo de execução do JS:

  1. Atrasar JS e remover JS não utilizado
  2. Adiar JS
  3. Minimizar JS .

Vamos ver como você pode implementar cada uma dessas ações e abordar a recomendação do PageSpeed ​​Insights.

1. Atrasar JS e remover JS não utilizado

Você deve atrasar os arquivos JS para que nenhum deles seja carregado até a interação do usuário. Isso significa que, enquanto nenhum usuário clicar em um botão ou rolar o conteúdo de uma página, o navegador não executará nenhum script JS.

Você também deve remover arquivos JS não utilizados. Em outras palavras, todos os scripts JS inúteis ou não incluídos no conteúdo acima da página devem ser carregados somente após a renderização da página. É uma maneira de permitir que o navegador renderize apenas o conteúdo essencial sem ficar preso a arquivos JS desnecessários.

Vários plugins podem ajudá-lo a atrasar o JS e remover o JS não utilizado:

Você também pode aproveitar o recurso de execução de atraso JavaScript fornecido pelo WP Rocket. É a maneira mais fácil de atrasar a execução do JavaScript em apenas alguns cliques.

Vá para a guia Otimização de arquivo e marque a opção Atrasar execução de JavaScript. O plugin atrasará automaticamente o carregamento dos arquivos JS até a interação do usuário. Fácil e rápido, certo?

Atrasar a execução do JavaScript - WP Rocket
Atrasar a execução do JavaScript – WP Rocket

Obtenha o WP Rocket agora e teste as melhorias do seu site imediatamente!

2. Adiar JS

Outra maneira eficaz de lidar com o tempo de execução do JS é adiar os arquivos JS.

Ao adiar o JavaScript em seus sites WordPress , o navegador os carregará somente quando a renderização da página estiver concluída.

Você tem maneiras diferentes de adiar arquivos JS, tanto manualmente quanto com plugins.

Se você deseja implementar o atributo defer por conta própria, primeiro identifique os scripts JS a serem adiados e, em seguida, adicione o atributo defer.

Aqui está um exemplo do atributo defer:

<script adiar src=”/example-js-script”></script>

Se preferir usar um plugin, você pode usar o Asset CleanUp.

Você também pode aproveitar outro recurso poderoso do WP Rocket: Load Javascript Deferred.

Na guia Otimização de arquivo, você encontrará a opção de Carregar JS adiado e excluir quaisquer arquivos JS específicos de serem adiados também. Em poucos cliques, você cuidará de uma técnica crucial de otimização de desempenho da web!

Carregar JavaScript adiado – WP Rocket

3. Minimizar JS

A terceira opção para resolver problemas de JS é através da minificação. A minificação remove as quebras de linha, espaços em branco e comentários incluídos no código. Como resultado, o código é mais leve e o tamanho do arquivo é mais rápido.

Como a minificação é uma atividade demorada e sempre há o risco de perder algo, recomendamos o uso de um plug-in.

Várias ferramentas de minificação de JavaScript para WordPress ajudarão você a fazer o trabalho.

Mais uma vez, o WP Rocket oferece uma maneira fácil de reduzir arquivos JS. Vá para a guia File Optimization e ative a opção Minify JS files. Fácil e rápido assim!

Minimizar arquivos JS – WP Rocket

Outras recomendações do WordPress para reduzir o tempo de execução do JS

Como usuário do WordPress, existem outras recomendações úteis a serem lembradas.

No geral, você deve evitar o uso de funcionalidades – como plugins e widgets – exigindo muito JavaScript quando uma solução mais simples pode substituí-lo. Por exemplo:

  • Use uma imagem estática em vez de um controle deslizante (especialmente se o slide estiver na parte superior da página)
  • Evite o uso excessivo de widgets como redes sociais (por exemplo, os widgets sociais em sua barra lateral)
  • Evite o uso excessivo de recursos de terceiros (por exemplo, anúncios, rastreadores, camadas de personalização, testes A/B).

Precisa de ajuda para melhorar seus principais elementos vitais da Web?

As folhas de dicas do Core Web Vitals são a maneira mais fácil e rápida de aprender como otimizar LCP, FID e CLS. Economize seu tempo e descubra como priorizar suas tarefas de desempenho!

Comece a reduzir o tempo de execução do JS hoje

Reduzir o tempo de execução do JS é uma etapa crucial para melhorar a pontuação do FID e aumentar sua pontuação de desempenho do PageSpeed ​​Insights. No geral, é uma maneira essencial de fornecer aos usuários uma excelente experiência de usuário.

Graças ao WP Rocket, você pode gerenciar todos os principais problemas do JS em apenas alguns cliques. Você vai economizar tempo e esforço!

Agora é a sua vez!

Compartilhe sua opinião e deixe seu comentário no post. Queremos ouvir o que você pensa!

0 comentários

Enviar um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *