Como adiar a análise de JavaScript no WordPress

Se você administra um site WordPress ou qualquer outro site, deve saber que uma medida crítica do desempenho do seu site é a velocidade da página.

Se você usa qualquer uma das ferramentas de teste de desempenho do site, como GTmetrix ou Google PageSpeed ​​Insights, pode sugerir que você adie a análise do JavaScript.

Agora, a frase pode ser confusa, mas desempenha um papel significativo no aumento do tempo de carregamento do seu site.

Então, o que significa adiar a análise do JavaScript?

Bem, vamos falar sobre isso mais tarde em detalhes. Resumindo, adiar a análise do JavaScript permite que o navegador carregue o conteúdo do site primeiro, sem esperar que os scripts terminem o download.

Esse processo é essencial, pois os navegadores renderizam e baixam o JavaScript do servidor antes de carregar qualquer outro conteúdo do site. Isso prejudica a velocidade do seu site e interrompe o tempo de carregamento da página.

Felizmente, adiar a análise do JavaScript é a melhor maneira de mitigar o problema.

Expliquei os cinco métodos comprovados para adiar a análise de JavaScript no WordPress neste artigo. Mas antes disso, vamos entender melhor o que a frase significa e saber se você precisa adiar a análise do Javascript.

Vamos começar!

O que você quer dizer com adiar a análise de JavaScript no WordPress?

Antes de entender a técnica para adiar a análise de JavaScript, você deve saber como um navegador da Web renderiza uma página da Web.

Para começar, quando seu navegador envia uma solicitação ao seu servidor web, ele recebe a página, que é baixada na forma de um documento HTML. Este documento HTML inclui texto, código que renderiza vários elementos DOM e diferentes recursos como imagens, folhas de estilo e scripts.

Por padrão, o navegador baixa esses recursos em uma sequência. A renderização da página da Web é retomada somente após o download de todos os recursos. Além disso, os grandes recursos afetam negativamente o tempo de carregamento de sua página da web.

Sempre que seu navegador passa pelo código para renderizar seu site, ele para de renderizar se encontrar algum JavaScript. O processo é interrompido até que possa buscar e analisar o arquivo JavaScript. Isso afeta negativamente a velocidade do seu site.

Felizmente, o processo de adiamento da análise de JavaScript notifica o navegador para aguardar o download e análise de um arquivo JavaScript até que o conteúdo principal do seu site seja carregado. Até este ponto, seus visitantes podem interagir com seu site para que o tempo necessário para baixar e analisar o JavaScript não prejudique mais o tempo de carregamento do seu site.

Como saber que você precisa adiar a análise de JavaScript?

Como dissemos anteriormente, as ferramentas de teste de desempenho do site, como GTmetrix, Google PageSpeed ​​Insights ou WP Engine Speed ​​Tool, geralmente sugerem que você adie a análise de JavaScript ao analisar seu site.

O GTmetrix, em particular, fornece uma nota e lista scripts específicos que precisam ser adiados para melhorar a velocidade de carregamento da sua página.

Você pode simplesmente inserir a URL do seu site e esperar que a ferramenta avalie. Quando concluir a avaliação, vá para a guia PageSpeed ​​e expanda a seção Adiar análise de JavaScript.

Esta seção oferece uma lista de scripts não essenciais que são carregados durante o processo de renderização, conforme mostrado no exemplo abaixo:

Atributos assíncronos vs. adiados

É vital garantir que o download de um script não interfira na renderização da página da web. Existem duas maneiras de fazer isso:

• Assíncrono
• Adiar

Você pode incluir o atributo assíncrono na tag de script como:

 <script src= “path/to/script” async> </script>

Isso informa ao seu navegador para carregar o script de forma assíncrona. Para ser preciso, o navegador baixa o recurso assim que o encontra no código, mas continua a analisar o HTML enquanto o recurso ainda está sendo baixado.

Por outro lado, você pode adicionar o atributo defer à tag de script como:

 <script src= “path/to/script” defer> </script>

Isso informa ao seu navegador para não baixar os recursos até concluir a análise da página da web. Depois de concluir a análise e a renderização, ele baixa a lista de scripts adiados que encontrou anteriormente.

A principal diferença entre os atributos async e defer é quando os recursos são baixados.

Se você tiver um aplicativo da Web compacto, é recomendável usar defer para garantir que as interdependências sejam satisfeitas. Além disso, se você tiver apenas alguns scripts no caminho de renderização, não se importaria com nenhuma diferença entre o uso de ambos os atributos.

Aqui está um exemplo para entender os atributos async e defer:

Digamos que você tenha dois scripts JS1 e JS2.

A condição é que JS2 apareça no código após JS1, JS2 tenha uma dependência de JS1, mas JS1 seja maior que JS2.

Agora, se você usar async , pode ser possível que o JS2 termine o download antes que o JS1 seja completamente baixado. Isso leva a um erro, pois o JS2 é executado na ausência do JS1.

Por outro lado, se você usar defer , JS1 e JS2 serão baixados sequencialmente, garantindo que não haja erro.

Por que você precisa adiar a análise de JavaScript?

Mencionamos anteriormente que a velocidade da página é o aspecto mais crítico que faz ou prejudica o desempenho do seu site. Como os arquivos JavaScript são muito grandes e demoram mais para carregar, atrasar sua execução por um tempo é útil para aumentar a velocidade do seu site.

A seguir estão algumas das razões pelas quais você precisa adiar a análise de JavaScript no WordPress:

1. Para impulsionar as classificações de pesquisa:

Quando o Google ou qualquer outro mecanismo de pesquisa avalia seu site para uma classificação de mecanismo de pesquisa, eles consideram a velocidade da página como o ponto crítico de medida. Se o seu site carregar mais rápido, ele aparecerá na primeira página dos resultados do mecanismo de pesquisa.

De acordo com a pesquisa, 1 em cada 2 pessoas espera que uma página seja carregada em menos de 2 segundos. Se o seu site não carregar adequadamente em 2 segundos, o Google favorecerá seu concorrente em vez de você. Portanto, isso pode afetar negativamente seus rankings de pesquisa.

Portanto, é necessário adiar a análise do JavaScript para que haja um aumento significativo no tempo de carregamento do seu site.

Se você está procurando mais opções para acelerar seu site WordPress, confira essas 7 técnicas de SEO na página que duplicarão seu tráfego de pesquisa.

2. Para aumentar a taxa de conversão:

Se o seu site carregar mais devagar, seus visitantes provavelmente o deixarão e procurarão outras opções melhores. Como seus usuários geralmente procuram informações rápidas e confiáveis ​​em seu site, uma página de carregamento lento pode acabar com o humor.

Da mesma forma, se você administra um site afiliado e vende produtos por meio de seu site, espera que seus usuários realizem mais ações nele. No entanto, uma página da Web mais lenta pode desencorajar seus visitantes de realizar qualquer ação.

A pesquisa apresentada no HubSpot mostra que um atraso de até um segundo no tempo de carregamento do site reduz a taxa de conversão em 7% . É por isso que é crucial aumentar o tempo de carregamento do seu site e aumentar a taxa de conversão.

A técnica para adiar a análise de JavaScript ajuda a aumentar a velocidade do seu site e melhorar sua taxa de conversão.

3. Para fornecer uma melhor experiência ao usuário:

Acéfalo! Sites mais lentos criam uma experiência de usuário terrível. Se o seu site demorar mais do que o normal para carregar, você pode esperar que seus visitantes saiam do site e, assim, aumenta sua taxa de rejeição.

Você deve considerar adiar a análise de JavaScript para que os arquivos JS sejam executados somente depois que o conteúdo de sua página da Web for carregado. Essa técnica ajuda você a acelerar seu site WordPress e oferecer uma excelente melhor experiência aos seus usuários.

Cinco métodos diferentes para adiar a análise de JavaScript no WordPress

Para adiar a análise do JavaScript, você pode escolher qualquer uma das três rotas principais, incluindo:

• Plugar
• Método Varvy
• Arquivo Functions.php

Usando essas rotas, criamos cinco métodos diferentes para adiar a análise de JavaScript no WordPress.

Método 1: usando o plug-in JavaScript assíncrono gratuito

Async JavaScript é um plugin WordPress gratuito que ajuda a eliminar JavaScript de bloqueio de renderização no conteúdo acima da dobra.

O plug-in oferece controle total sobre quais scripts adicionar ou excluir um atributo assíncrono ou adiado para aumentar o desempenho do seu site WordPress. O que você deve lembrar antes de escolher entre async e defer é:

• Async baixa o JavaScript enquanto ainda analisa os arquivos HTML, mas pausa a análise HTML para executar os arquivos JavaScript.
• Adiar downloads de JavaScript enquanto ainda analisa arquivos HTML e aguarda para executá-lo após a conclusão da análise de HTML.

Aqui está cada passo para adiar a análise de JavaScript no WordPress usando o plug-in Async JavaScript:

Primeiro, redirecione para Plugins -> Adicionar Novo no seu painel do WordPress.

Agora procure o plug-in JavaScript Async na barra de pesquisa e, em seguida, instale e ative -o.

Depois de concluir a instalação e ativação do plug-in, vá para a página Configurações para fazer as alterações necessárias.

Agora, marque a opção Enable Async JavaScript e selecione Defer as Async JavaScript Method conforme mostrado na imagem abaixo:

Para opções mais avançadas, você pode rolar para baixo até a página. Aqui, você pode incluir os scripts aos quais deseja aplicar as tags async e defer e também adicionar uma lista de scripts a serem excluídos.

Você também pode listar os plug-ins e temas que podem ser excluídos de quaisquer alterações que o plug-in JavaScript Async fizer.

Depois de fazer as alterações necessárias, role para baixo até a parte inferior da página e pressione o botão Salvar configurações .

Método 2: Usando o WP Rocket Plugin

O WP Rocket é denominado como um dos mais poderosos plugins de cache do WordPress que fazem seu site carregar rapidamente em apenas alguns cliques. O plug-in oferece cache de página, pré-carregamento de cache, compactação de arquivos estáticos e muitos outros recursos interessantes.

Além disso, o WP Rocket também ajuda a adiar a análise do JavaScript na guia File Optimization do painel do WP Rocket.

Depois de comprar, instalar e ativar o plug-in WP Rocket, redirecione para a opção Configurações e clique na guia Otimização de arquivo no menu para começar.

Depois disso, role para baixo até a seção Arquivos JavaScript, marque a opção Carregar JavaScript adiado e ative o Modo de segurança para jQuery .

Quando você concluir todo o processo, role para baixo até o final da página e clique no botão Salvar alterações .

Método 3: usando o plug-in W3 Total Cache

O W3 Total Cache é outro plugin essencial do WordPress que melhora o SEO e a experiência do usuário do seu site. Ele aumenta o desempenho do seu site e reduz o tempo de carregamento, aproveitando a integração da Content Delivery Network (CDN).

O W3 Total Cache é gratuito e muito eficaz. Você pode usar este plugin para adiar a análise de JavaScript em seu site WordPress.

Aqui estão todas as etapas para adiar a análise de JavaScript no WordPress usando o plug-in W3 Total Cache:

Primeiro, redirecione para Plugins -> Adicionar Novo no seu painel do WordPress.

Agora procure o plugin W3 Total Cache na barra de pesquisa e, em seguida, instale e ative -o.

Depois de concluir a instalação e ativação do plug-in, vá para Desempenho -> Configurações gerais na barra lateral esquerda do WordPress para fazer as alterações necessárias.

Depois disso, role para baixo até a seção Minify e marque a opção Enable . Além disso, selecione a opção Manual no modo Minify e clique no botão Salvar todas as configurações para continuar.

Agora, redirecione para a guia Desempenho -> Minimizar na barra lateral esquerda e role para baixo até o cabeçalho JS , onde você pode ver a seção Operações em áreas com duas tags HTML.

Selecione Não bloqueante usando a opção “adiar” no tipo Incorporar da tag Antes </head> .

Na mesma seção, você pode ver o cabeçalho de gerenciamento de arquivos JS onde você precisa selecionar seu tema WordPress ativo e clicar no botão Adicionar um script para incluir o URI do JavaScript que você deseja analisar.

Você pode adicionar quantos URIs quiser clicando no botão Adicionar um script .

Depois de concluir as alterações, clique no botão Salvar configuração e eliminar caches para continuar.

Depois disso, role para baixo até a seção CSS . Você pode clicar no botão Adicionar uma folha de estilo no cabeçalho de gerenciamento de arquivos CSS para inserir URIs de folha de estilo CSS. Você pode adicionar mais de um com base nas sugestões fornecidas pelas ferramentas de monitoramento de velocidade online.

Depois de concluir as alterações, clique no botão Salvar configuração e eliminar caches para continuar.

Método 4: Usando o método recomendado do Varvy

Outro método, recomendado por Patrick Sexton da Varvy, usa um script para chamar um arquivo JavaScript externo assim que o carregamento inicial da página estiver concluído. Isso significa que o navegador não baixará ou executará nenhum JavaScript até que a página da Web termine de carregar.

Você pode usar esse método ajustando o trecho de código fornecido pelo Varvy e, em seguida, adicionando o script ao seu arquivo de tema imediatamente antes da tag de fechamento </body> .

Aqui está o código para adicionar na parte do corpo do seu tema para adiar a análise de JavaScript no WordPress:

 <script type="text/javascript"> 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; </script>

Observação: certifique-se de alterar o defer.js para o nome do seu arquivo JavaScript externo. Depois disso, você pode usar o gancho wp_footer para injetar o código através do arquivo functions.php do seu tema filho.

Com essa abordagem, você pode encapsular o código do Varvy 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 }

Aqui estão todas as etapas deste método explicadas com imagens claras:

Faça login no painel do WordPress e navegue até Aparência -> Editor de temas

Agora, clique no arquivo header.php do lado direito da tela e cole o código mencionado acima antes de fechar </body tag>.

Depois disso, clique no botão Atualizar arquivo .

Método 5: Usando o arquivo functions.php

Se você tem uma ideia sobre o desenvolvimento do WordPress, deve estar familiarizado com o fato de que não deve adicionar scripts diretamente através da marcação HTML. Em vez disso, você precisa usar as funções internas do WordPress para solicitar recursos e também fazer backup do seu site, se necessário.

Você pode usar o atributo defer para seus arquivos Javascript adicionando o trecho de código ao seu arquivo functions.php .
Para isso, você precisa acessar o Editor de Temas no painel do WordPress. Depois disso, clique em functions.php e adicione o seguinte código a ele:

 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 );

Este trecho diz ao WordPress para adicionar o atributo defer a todos os seus arquivos JavaScript, exceto JQuery.
Você também pode adicionar facilmente o seguinte código para usar o atributo async ou defer aos seus arquivos JavaScript por meio do arquivo functions.php :

 add_filter('script_loader_tag', 'add_defer_tags_to_scripts'); function add_defer_tags_to_scripts($tag){ # List scripts to add attributes to $scripts_to_defer = array('script_a', 'script_b'); $scripts_to_async = array('script_c', 'script_d'); # add the defer tags to scripts_to_defer array foreach($scripts_to_defer as $current_script){ if(true == strpos($tag, $current_script)) return str_replace(' src', ' defer="defer" src', $tag); } # add the async tags to scripts_to_async array foreach($scripts_to_async as $current_script){ if(true == strpos($tag, $current_script)) return str_replace(' src', ' async="async" src', $tag); } return $tag; }

Bem, não esqueça que antes de adicionar os atributos async e defer às tags de script, você precisa enfileirar cada script para que o WordPress possa acessá-lo. Aqui está o código para isso:

 add_action('wp_enqueue_scripts', 'enqueue_custom_js'); function enqueue_custom_js() { wp_enqueue_script('script_a', get_stylesheet_directory_uri().'/script_a.js'); wp_enqueue_script('script_b', get_stylesheet_directory_uri().'/script_b.js'); wp_enqueue_script('script_c', get_stylesheet_directory_uri().'/script_c.js'); wp_enqueue_script('script_d', get_stylesheet_directory_uri().'/script_d.js'); }

Quando terminar de adicionar o código ao arquivo functions.php, clique no botão Atualizar arquivo .

Aqui está cada etapa deste método explicada com imagens claras:

Faça login no painel do WordPress e navegue até Aparência -> Editor de temas

Agora, clique no arquivo functions.php localizado no lado direito da tela. Você pode então colar o código mencionado acima e clicar no botão Atualizar arquivo para salvar as alterações necessárias.

Plugins alternativos para adiar a análise de JavaScript no WordPress

Se você estiver procurando por outras opções além dos plugins Async JavaScript e WP Rocket para adiar a análise de JavaScript no WordPress, você tem muitas delas. Alguns deles incluem:

1. Pacote de reforço de velocidade:

Este é um plugin WordPress gratuito com uma interface fácil de usar para ajudá-lo na otimização de JavaScript e muitas outras técnicas de otimização de velocidade.

Prós do Pacote Booster de Velocidade:

• Muito simples e fácil de usar e vem com uma interface de usuário interativa
• Ajuda na otimização de JavaScript, otimização de CSS, carregamento lento e integração de rede de entrega de conteúdo (CDN)
• Atualizado regularmente para desempenho excepcional e melhorias de bugs

Contras do Pacote Booster de Velocidade:

• Existe o risco de que a ativação deste plug-in ou de qualquer um de seus recursos possa entrar em conflito com outros plug-ins em seu site

2. JavaScripts adiados do WP:

Este plugin WordPress adia o carregamento de todos os JavaScripts adicionados por meio de wp_enqueue_script(), usando LABJS. O resultado é a otimização adequada do tempo de carregamento.

Prós do WP Deferred JavaScripts:

• Muito fácil de usar e é uma das soluções mais populares do mercado
• Explicitamente projetado para adiar a análise de JavaScript no WordPress, não apenas como um recurso complementar

Contras do WP Deferred JavaScripts:

• Atualizações pouco frequentes e talvez incompatíveis com as versões mais recentes do WordPress
• Pode fazer com que outros plugins em seu site quebrem

Perguntas frequentes (perguntas frequentes)

Conclusão

É muito importante adiar a análise do JavaScript no WordPress para melhorar a velocidade e o desempenho do seu site. Esperamos que você ache este artigo perspicaz, pois apresentamos as diferentes maneiras de realizar essa técnica, que envolve o uso de plugins e a adição de códigos aos arquivos do tema.

Caso você ache difícil adicionar códigos aos arquivos do tema, recomendamos fortemente que você use os plugins mencionados acima para adiar a análise do JavaScript. Os plugins são fáceis de usar e você pode concluir todo o processo com apenas alguns cliques.

Depois de concluir o processo, certifique-se de executar seu site por meio das ferramentas de teste de desempenho do site, como o GTmetrix, para garantir que seu site esteja adiando o maior número possível de scripts.

Você tem alguma preocupação e dúvida sobre como adiar a análise de JavaScript no WordPress? Atire neles na seção de comentários abaixo!