Você executou o seu site WordPress através de um ferramenta de teste de desempenho apenas para ser atendido com uma instrução para adiar a análise de JavaScript no WordPress?
A implementação desta mudança pode ter um impacto positivo nos tempos de carregamento de páginas do seu site, especialmente para visitantes móveis. Mas o aviso pode ser um pouco difícil de entender, e é por isso que vamos explicar exatamente o que significa adiar a análise do JavaScript e como você pode implementar essa mudança em seu site WordPress.
Prefere assistir à versão em vídeo?
O que significa adiar a análise do JavaScript no WordPress?
Se você já executou seu site WordPress através de Google PageSpeed Insights, GTmetrix ou outras ferramentas de teste de velocidade de página, você provavelmente se deparou com a sugestão de adiar a análise do JavaScript.
Mas… o que significa isso realmente? E porque é que é uma importante consideração de desempenho?
Basicamente, quando alguém visita o seu Site WordPress, o servidor do seu site fornece o conteúdo HTML do seu site para o navegador do visitante.
O navegador do visitante então começa no topo e atravessa o código para renderizar seu site. Se, ao mover-se de cima para baixo, ele encontra qualquer JavaScript, ele irá parar de renderizar o resto da página até que ele possa buscar e analisar o arquivo JavaScript.
Ele fará isso para cada script que encontrar, o que pode ter um efeito negativo no tempo de carregamento da página do seu site porque o visitante precisa olhar para uma tela em branco enquanto seu navegador baixa e analisa todo o JavaScript.
Se um determinado script não é necessário para o funcionamento central do seu site (pelo menos na carga inicial da página), você não quer que ele atrapalhe o carregamento de partes mais importantes do seu site, e é por isso que aqueles As ferramentas de teste de velocidade de página sempre lhe dizem para adiar a análise do JavaScript.
Então o que significa adiar a análise do JavaScript?
Essencialmente, o seu site irá dizer aos navegadores dos visitantes para esperarem para baixar e/ou analisar o JavaScript até que o conteúdo principal do seu site já tenha terminado de carregar. Nesse ponto, os visitantes já podem ver e interagir com sua página, então os tempos de espera para baixar e analisar que o JavaScript já não tem um efeito tão negativo.
Por acelerando os tempos de carregamento acima da dobra do seu conteúdo, você deixa o Google feliz e cria uma experiência melhor e mais rápida para os seus visitantes.
Como dizer se você precisa adiar a análise do JavaScript
Para testar se o seu site WordPress precisa adiar a análise do JavaScript, você pode executar o seu site através de GTmetrix.
O GTmetrix lhe dará uma nota e também listará scripts específicos que precisam ser diferidos:
Os diferentes métodos para adiar a análise do JavaScript
Existem algumas maneiras diferentes de adiar a análise do JavaScript. Primeiro, há dois atributos que você pode adicionar aos seus scripts:
- Async
- Defer
Ambos os atributos permitem que os navegadores dos visitantes baixem JavaScript sem pausar a análise HTML. No entanto, a diferença é que enquanto async não pausar a análise de HTML para buscar o script (como o comportamento padrão faria), ele pausará o analisador de HTML para executar o script uma vez que ele tenha sido buscado.
Com o adiamento, os navegadores dos visitantes ainda irão baixar os scripts enquanto analisam o HTML, mas eles irão esperar para analisar o script até que a análise do HTML tenha sido completada.
Este gráfico de Growing with the Web faz um ótimo trabalho de explicar a diferença:
Outra opção, recomendada por Patrick Sexton da Varvy, usa um script para chamar um arquivo JavaScript externo somente após a carga inicial da página ter terminado. Isto significa que os navegadores dos visitantes não irão baixar ou executar qualquer JavaScript até que a carga inicial da página seja finalizada.
Finalmente, outra abordagem que você verá é simplesmente mover seu JavaScript para a parte inferior da página. No entanto, este método não é uma grande solução porque, mesmo que a sua página seja visível mais cedo, os navegadores dos visitantes continuarão a exibir a página como carga até que todos os scripts terminem. Isso pode impedir que alguns visitantes interajam com sua página porque eles acham que o conteúdo não está totalmente carregado.
Como adiar a análise do JavaScript no WordPress (4 métodos)
Para adiar a análise do JavaScript no WordPress, existem três rotas principais que você pode tomar:
- Plugin – existem alguns plugins WordPress gratuitos e premium para diferir a análise do JavaScript. Vamos mostrar-lhe como fazê-lo com dois plugins populares.
- Método Varvy – se você é experiente em tecnologia, você pode editar o código do seu site diretamente e usar o trecho de código do Varvy.
- Arquivo Functions.php – você pode adicionar um trecho de código ao arquivo functions.php do seu tema filho para diferir automaticamente os scripts.
Você pode clicar acima para saltar direto para o seu método preferido ou ler todas as técnicas para encontrar o que é melhor para você.
1. Plugin JavaScript Assíncrono Livre
Async JavaScript é um plugin WordPress gratuito de Frank Goossens, o mesmo cara por trás do popular Auto-timizar o plugin.
Ele lhe dá uma maneira simples de adiar a análise de JavaScript usando async ou deferir.
Para começar, você pode instalar e ativar o plugin gratuito do WordPress.org. Em seguida, vá para Configurações → Async JavaScript para configurar o plugin.
No topo, você pode habilitar a funcionalidade do plugin e escolher entre async e deferir. Lembra-te:
- Async baixa JavaScript enquanto ainda analisa HTML, mas então pausa a análise HTML para executar o JavaScript.
- Deferir downloads de JavaScript enquanto ainda analisando HTML e espera para executá-lo até que a análise de HTML seja concluída.
Mais abaixo, você também pode escolher como lidar com jQuery. Um monte de temas e plugins dependem fortemente de jQuery, então se você tentar adiar a análise dos scripts jQuery você pode quebrar algumas das funcionalidades do núcleo do seu site. A abordagem mais segura é excluir jQuery, mas você pode experimentar com o adiamento. Apenas certifique-se de testar o seu site completamente.
Mais abaixo, você também pode incluir ou excluir manualmente scripts específicos de serem diferidos, incluindo um recurso amigável para permitir que você direcione temas específicos ou plugins que estão ativos em seu site:
2. Use o Plugin de Foguetão WP
Enquanto não permitirmos que a maioria caching plugins em Kinsta, nós permitem que o plugin WP Rocket plugin porque ele inclui uma integração embutida para jogar bem com o Caching a nível de servidor do Kinsta.
Além de um monte de outras técnicas de otimização de desempenho, o WP Rocket pode ajudá-lo a adiar a análise do JavaScript na guia Otimização de arquivos do painel de controle do WP Rocket. Procure a opção Carregar JavaScript diferido na seção Arquivos JavaScript.
Utilizamos nosso conhecimento em gerenciamento efetivo de sites em escala e transformamos em um ebook e curso em vídeo. Clique para baixar o Guia de Gerenciamento de mais de 60 sites WordPress!
Como o plugin Async JavaScript, WP Rocket também permite que você exclua jQuery para evitar problemas com o conteúdo do seu site:
3. Use o Método Recomendado (Código) da Varvy
Anteriormente, mencionamos que Patrick Sexton da Varvy recomenda o uso de um trecho de código que espera para baixar e executar JavaScript até que seu site complete sua carga inicial de página.
Você pode implementar esse método ajustando o trecho de código que o Varvy fornece e adicionando o script ao seu tema imediatamente antes do fechamento da tag </body>.
Aqui está o código do Varvy:
function downloadJSAtOnload() {
var element = document.createElement("script");
element.src = "defer.js";
document.body.appendChild(element);
}
if (window.addEventListener)
window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
Certifique-se de substituir “defer.js” pelo nome do arquivo real/caminho do arquivo JavaScript que você deseja diferir. Então, é possível usar o wp_footer hook para injetar o código através do arquivo functions.php do seu tema filho.
Com esta abordagem, você embrulharia o código do Varvy em algo assim:
/**
Defer parsing of JavaScript with code snippet from Varvy
*/
add_action( 'wp_footer', 'my_footer_scripts' );
function my_footer_scripts(){
?>
REPLACE_WITH_VARVY_SCRIPT
<?php
}4. Deferir JavaScript via functions.php Arquivo
Finalmente, você também pode adicionar o atributo deferir aos seus arquivos JavaScript sem a necessidade de um plugin, adicionando o seguinte trecho de código ao seu arquivo functions.php:
function defer_parsing_of_js( $url ) {
if ( is_user_logged_in() ) return $url; //don't break WP Admin
if ( FALSE === strpos( $url, '.js' ) ) return $url;
if ( strpos( $url, 'jquery.js' ) ) return $url;
return str_replace( ' src', ' defer src', $url );
}
add_filter( 'script_loader_tag', 'defer_parsing_of_js', 10 );Essencialmente, este trecho diz ao WordPress para adicionar o atributo deferir a todos os seus arquivos JavaScript, exceto jQuery.
É rápido e fácil, mas não lhe dá o nível granular de controle que algo como o plugin Async JavaScript oferece.
Resumo
Adiar a análise do JavaScript no seu site WordPress é uma consideração importante de desempenho.
Depois de ter usado um dos métodos acima para adiar a análise do JavaScript no WordPress, recomendamos fazer duas coisas:
- Teste seu site para certificar-se de que o adiamento de certos scripts não quebrou a chave do conteúdo acima da dobra. Novamente, isso pode comumente acontecer com jQuery, que é por isso que um monte de ferramentas permitem excluir jQuery.js. No entanto, isso pode acontecer com outros scripts também.
- Execute seu site através do GTmetrix novamente para ter certeza de que seu site está adiando tantos scripts quanto possível (você pode não obter uma pontuação perfeita se você excluir jQuery – mas sua pontuação deve ser melhor).
Você tem alguma dúvida sobre como adiar a análise do JavaScript no WordPress? Pergunte nos comentários!
Brian tem uma enorme paixão pelo WordPress, e tem utilizado há mais de uma década e até desenvolve alguns plugins premium. Brian gosta de blogs, filmes e caminhadas. Conecte-se com Brian no Twitter.
Adorei o seu conteudo, simples e didatico….