Como adiar a análise de JavaScript no WordPress

Publicados: 2021-07-22

Adiar a análise de JavaScript no WordPress

Seu site está demorando muito para carregar? Não importa se você está usando um site WordPress ou outro, o alto tempo de carregamento é uma preocupação crítica que precisa ser corrigida em breve.

Então, você está vagando o mesmo? Bem, se você verificar seu site pessoalmente, poderá receber a mensagem 'Defer Parsing of JavaScript in WordPress.' Isso parece complicado e às vezes incompreensível porque você não é experiente em tecnologia.

Se você seguir a mensagem, verá um aumento na velocidade de carregamento da página e desempenha um papel significativo na melhoria das conversões e da receita do site.

Agora a questão é o que significa Adiar Análise de JavaScript no WordPress?

Então, aqui está uma resposta rápida e curta. O Defer Parsing de JavaScript no WordPress permite que o navegador carregue o conteúdo do site primeiro sem ler os scripts para concluir o download e aumentar o tempo de carregamento.

Esse processo fácil é importante porque os navegadores renderizam e baixam o JavaScript do servidor antes de carregar o conteúdo do site. Isso naturalmente prejudica a velocidade do site e interrompe o tempo de carregamento.

Mas adiar a análise de JavaScript no WordPress é a chave para desbloquear o problema e você pode aproveitar o desempenho do site sem esperar minutos.

Este post compartilhará as cinco técnicas comprovadas para adiar o JavaScript. Mas antes de pular para as soluções, é preciso entender o significado real dessa mensagem pop-up.

Então, sem mais delongas, vamos começar!

O que significa Adiar Análise de JavaScript no WordPress?

Você sabe como os navegadores renderizam a página da web? Se não, é preciso entender isso primeiro.

Quando seu navegador recebe uma solicitação do usuário, ele a envia para o servidor da web e a página começa a ser baixada no formato HTML. Este documento HTML inclui texto e código que renderiza elementos DOM e diferentes recursos como imagens, scripts e folhas de estilo.

No entanto, o navegador baixa os recursos em sequência. Mas o rasgo da página retoma todos os processos novamente e oferece efeitos adversos no tempo de carregamento. Mesmo isso às vezes atrapalha o processo e mostra a mensagem: A página não pode ser baixada ou mostra erro no servidor.

Sempre que o navegador passa pelo código para renderizar o site ou as páginas, ele para de renderizar se o JavaScript for encontrado lá. Esse processo é interrompido até que não possa buscar e analisar o script. Além disso, afeta negativamente a velocidade do seu site.

Mas com a ajuda de Defer Parsing of JavaScript no WordPress ajuda a notificar o navegador para baixar a página ou o conteúdo principal do seu site e oferece carregamento rápido. Neste, os usuários podem encontrar o site.

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

Se o seu site está demorando muito para carregar, deve-se aumentar seu desempenho por bem e por mal. Se você não sabe sobre o desempenho do site, execute o teste no site usando as melhores ferramentas, como GT Metrix, Google Pagespeed insights ou WPEngine.

Esses são testes de ferramentas de velocidade que geralmente sugerem e oferecem adiar a análise de JavaScript ao analisar o site. Por exemplo, vamos tentar com GT Metrix.

No GTMetrix você encontra a nota do seu site em cada página e scripts específicos que precisam melhorar o quanto antes. Para usar esta ferramenta pode-se inserir a URL do site e aguardar os minutos, para que possa buscar todos os dados.

Depois de concluído, vá para a guia de velocidade da página e melhora a velocidade de carregamento e expande a seção Adiar análise de JavaScript.

Aqui você encontrará uma lista de scripts de carregamento que estão sendo carregados durante o processo de renderização. Então leia tudo com atenção.

Atributos de adiamento de VS assíncronos

Isso é importante para garantir que o download de um script não interaja com a renderização da página da web. Portanto, os dois métodos para fazer isso são Async e defer.

Se você deseja começar com o Async, deve adicionar a seguinte tag de script.

Com isso, seu navegador recebe uma atualização de que o navegador deve carregar o script de forma assíncrona. Para ser preciso, o navegador baixa seus recursos assim que encontra o código, mas analisa o HTML enquanto o recurso ainda está sendo baixado.
Enquanto, por outro lado, você pode escolher o segundo atributo Defer método. Então, adicione o script fornecido.

Com essa tag, você dirá ao seu navegador para não baixar os recursos até que tenha concluído a análise da página da web. Uma vez que o processo é concluído, ele baixa os scripts adiados que tropeçaram anteriormente.

A principal diferença que você está prestes a verificar quando ambos os recursos são baixados. Para melhor aproveitamento de ambos deve-se verificar a aplicação web.

Se a sua aplicação web for compacta, deve-se optar por adiar enquanto se você tiver poucos scripts Async é o melhor. Bem, você não encontraria nenhuma diferença em ambos, mas a verdade é que adiar é para arquivos grandes e Async é para pequenos.

Para conhecer melhor a diferença entre Async e defer, compartilhamos um exemplo. Leia.

Suponha que você tenha dois scripts java JS1 e JS2. E há uma condição de que JS2 apareça no código após JS1, o que significa que JS2 depende de JS1, mas é maior que JS2.

Se você estiver usando o Async, existe a possibilidade de que o JS2 possa terminar seu download antes do JS1. Isso pode levar a um erro, pois o JS2 é executado na ausência do JS1

E se você estiver usando adiar o download dos scripts JS1 e JS2 com sucesso e não causar nenhum erro.

Assim, adiar é melhor para carregar scripts e melhorar a velocidade do site ou o tempo de carregamento.

Razões pelas quais você precisa adiar a análise de JavaScript

Como dissemos anteriormente, se você deseja classificar na primeira página do Google, deve-se ter uma alta velocidade de carregamento da página da web. Aproximadamente, uma página deve ser carregada em 2-3 segundos. Infelizmente, o JavaScript renderiza a qualidade da página e você perde muito tráfego.

Atrasar o carregamento de uma página pode afetar seu site de várias maneiras. Felizmente, adiar a análise do JavaScript pode ajudá-lo a resolver esse problema. Dê uma olhada e verifique as razões pelas quais ele pode ajudá-lo.

  • Aumente os rankings de busca

Sempre que o Google avalia o desempenho do seu site para a classificação de pesquisa, o principal fator que o Google verifica é o tempo de carregamento do site. Se o seu site carregar mais rápido, ele aparecerá naturalmente na primeira página dos resultados de pesquisa.

De acordo com a pesquisa, descobrimos que 1 em cada 2 pessoas espera o carregamento do site, caso contrário, elas passam para a segunda fonte. Além disso, o Google favorecerá apenas os sites que não incomodarão seus leitores e oferecerão a melhor experiência do usuário.

E se o seu site demorar mais de 4 segundos para carregar, isso afetará negativamente o desempenho do seu site. Por isso, é importante trabalhar em JavaScript. E adiar é apenas a maneira inteligente de aumentar a velocidade do site de normal para super.

Para melhores resultados deve-se seguir as técnicas de SEO para impulsionar seu conteúdo e otimizar a velocidade da página.

  • Aumente a taxa de conversão

Outro grande motivo pelo qual seu site precisa adiar se você quiser aumentar a taxa de conversão. Se o site carregar lentamente, há chances de seus clientes pularem para outras fontes e você perderá tráfego e vendas.

Os usuários estão com pressa, muitas vezes adoram seguir o site que mostra informações rápidas para eles. E se o site ficar lento, isso será frustrante para eles e eles podem não visitar sua página novamente. Não importa em qual site ou blog você está trabalhando.

Seu trabalho é entregar o melhor para seus usuários. A pesquisa no Hubspot revela que o tempo de carregamento do site geralmente cai 7% na taxa de conversão. Com a técnica de Adiar Análise de JavaScript no WordPress pode aumentar a velocidade do seu site mais rápido que melhora ainda mais a taxa de conversão.

  • Sorteio Melhor Experiência do Usuário

Não achamos que você precise de uma explicação sobre esse motivo. É bastante natural que a velocidade do seu site seja boa e os usuários estejam gostando do conteúdo do seu site, você pode esperar que seus visitantes fiquem felizes com o site.

E se o seu site demorar mais para carregar do que o normal, os usuários irão abandoná-lo e isso aumenta a taxa de rejeição.

Com o Defer Parsing of JavaScript no WordPress, você pode atualizar os arquivos Java que o ajudam a carregar rapidamente o conteúdo principal do site. Este esquema de carregamento rápido ajuda a acelerar o site que melhora a experiência do usuário.

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

Agora chegamos à nossa seção principal do artigo. Aqui você aprenderá as cinco técnicas brilhantes que o ajudam a acelerar o site, oferecer a melhor experiência do usuário e dar a você um caminho para se classificar em primeiro lugar.

Então, vamos conhecer os métodos.

Para adiar a análise do JavaScript, as três rotas importantes que você pode escolher são plugin, método varvy e arquivo functions.php. Com essas rotas, você pode aplicar os cinco métodos fornecidos.

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

No WordPress, o JavaScript Async é um plugin gratuito que ajuda a erradicar o JavaScript de bloqueio de renderização no carregamento de conteúdo.

Com este plugin, você pode desfrutar do controle total sobre java Scripts e Async ou adiar pode facilmente contribuir para aumentar a velocidade do site e melhorar seu desempenho nas páginas de pesquisa. No entanto, existem algumas sugestões que você precisará seguir ao escolher Async e adiar.

  • Async pode baixar JavaScript enquanto analisa arquivos HTML, mas pausa a análise HTML para realizar os arquivos JavaScript.
  • O Defer pode baixar os arquivos JavaScript enquanto analisa os arquivos HTML, mas espera para executar os arquivos após a conclusão da análise HTML.

Agora vamos passar para um guia passo a passo para Adiar Análise de JavaScript no WordPress usando o plug-in Async.

  1. Abra o painel do WordPress e vá para a guia de plugins.
  2. Na guia plugin, clique no botão adicionar novo e pesquise o plugin JavaScript Async.
  3. Quando você encontrar o plugin, clique no botão instalar e ative-o.
  4. Portanto, quando a instalação estiver concluída, vá para as configurações e faça as alterações necessárias.
  5. Marque a opção habilitar JavaScript assíncrono e escolha adiar como JavaScript assíncrono.
  6. Para os recursos avançados, marque e escolha o script que você deseja aplicar - Async e adiar tags.
  7. Aqui você pode escolher os scripts que deseja incluir e excluir. Além disso, você também pode escolher os plugins e temas que deseja excluir de quaisquer alterações feitas pelo Async JavaScript Plugin.
  8. Quando as alterações forem concluídas, salve as alterações

Método 2: Usando o WP Rocket Plugin

Se você nunca ouviu falar sobre o WP rocket plugin antes, pegue isso agora. O WP Rocket é um dos plugins mais modernos que podem ajudar seu site a carregar rapidamente em segundos.

Além disso, com este plugin, você pode receber cache de página, pré-carregamento de cache, compactação e muitos outros recursos interessantes.

Por outro lado, o plug-in também ajuda a adiar a análise do JavaScript na guia de otimização de arquivos.

Veja como você pode instalar e usar o plugin.

  1. Abra o painel do WordPress e redirecione para a guia do plugin
  2. Agora clique no botão adicionar novo e procure por WP rocket plugin.
  3. Toque em instalar e ative o plugin.
  4. Em seguida, vá para as configurações e abra a otimização do arquivo no menu para começar.
  5. Agora role para baixo os arquivos JavaScript e marque a opção carregar JavaScript adiado e ative o modo de segurança para consulta.
  6. Quando todo o processo estiver concluído, vá até o final da página e clique na opção salvar alterações.

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

O W3 Total Cache é outro melhor plugin que você pode usar para adiar a análise de JavaScript no WordPress. Este plugin WordPress é simplesmente útil para melhorar a experiência do usuário e o SEO do seu site. Além disso, melhora o desempenho do site e reduz o tempo de carregamento, aproveitando a CDN (integração de entrega de conteúdo).

O cache total W3 é muito eficaz e seguro de usar. Além disso, você pode usar este plugin para adiar a análise de JavaScript no WordPress. Veja como você pode usar este plugin.

  • Primeiro, visite o painel do WordPress e vá para a página de plugins.
  • Em seguida, adicione um novo botão e procure o plugin W3 total cache plugin.
  • Uma vez que o plugin for encontrado, clique no botão instalar e ativar.
  • Agora o plugin está instalado. Vá para o desempenho e configurações gerais do WordPress.
  • Em seguida, role para baixo no painel e vá para a seção minify e marque a opção de ativação.
  • Além disso, você pode verificar a opção manual no modo minify e clicar na opção salvar para continuar.

Código de redução
Vá para a guia de desempenho e escolha a guia minify na barra lateral esquerda e role para baixo até o cabeçalho JS, onde você pode pesquisar a seção de operações e área com duas tags HTML.

Opções de configurações de redução
Escolha o não bloqueante usando a opção adiar e incorpore o tipo de código antes marcação.

Configurações do JS Minify

  • Nas configurações, você pode ver o gerenciamento de arquivos JS onde você deve selecionar o tema do WordPress.
  • Em seguida, clique na opção Adicionar um script para incluir o URL do JavaScript que você deseja analisar.
  • Você pode adicionar quantos URLs quiser tocando no botão adicionar um script.
  • Quando as alterações forem concluídas, clique no botão salvar configurações e no botão caches puros para continuar.
  • Uma vez feito, role para baixo na seção CSS.
  • Agora clique no botão Adicionar uma folha de estilo.
  • Em seguida, no gerenciamento de arquivos CSS, insira os URLs da folha de estilo.
  • Você pode adicionar mais de um com base nas sugestões fornecidas pelas ferramentas de monitoramento.
  • Agora, você concluiu as alterações, então salve as configurações e o botão de caches puros.

Método 4: usando o método recomendado de Vary

Outro melhor método que você pode optar por Defer Parsing of JavaScript no WordPress é escolher o Vary, que usa um script para chamar o arquivo JavaScript externo assim que a página inicial for carregada.

Isso significa que os navegadores não baixam ou executam o JavaScript até que a página da Web não seja carregada. No entanto, este método é sugerido por Patrick Sexton.

Para usar esse método, você pode ajustar o trecho de código fornecido pelo varvy e adicioná-lo ao editor de temas na seção do corpo.

Então, aqui está o código que você pode adicionar na parte do corpo do seu tema para Adiar análise de JavaScript no WordPress.

<tipo de script= “texto/javascript”>
Função downloadSAtOnload() {
elemento var = document.createElement (“Script”);
element.src = “adiar .js” ; document.body.appendChild (elemento);
}
Se
(window.addEventListener) window.addEventListener (“load' ,
downloadJSAtOnload , false);
senão se
(window.attachEvent)
Window.attachEvent (“onload”, downlaodJSAtonlaod;
</script>

Ao fazer isso, certifique-se de ter alterado o defer.Js para o nome do arquivo JavaScript externo. Em seguida, use o Wp_footer para injetar o código através do arquivo functions.php do tema da criança.

Aqui está o código que você deve usar.

/**
Adiar a análise de JavaScript com trecho de código do Varvy
*/
Add_action ('wp_footer', 'my_footer_scripts');
Função
Meus_rodapés_scripts(){
?>
REPLACE_WITH_VARVY_SCRIPT
<?php
}

Agora estamos avançando em nosso guia passo a passo para o sentido claro.

  1. Vá para o painel do WordPress e vá para a aparência e depois para o editor de temas.
  2. Navegue no arquivo header.php e cole o código acima mencionado antes e depois da seção do corpo.
  3. Em seguida, clique na opção atualizar arquivo.

Método 5- Usando o arquivo functions.php

Se você esquecer, deixe-nos lembrá-lo de que você não pode adicionar scripts diretamente ao WordPress por meio de HTML. Em vez disso, você precisa usar funções internas do WordPress para solicitar os recursos e também fazer backup do seu site.

Você deve usar o atributo defer para os arquivos JavaScript adicionando o trecho de código ao seu arquivo functions.php.

Para concluir o processo, abra o editor de temas e vá para o arquivo functions.php para adicionar o código fornecido.

Função
Defer_parsing_of_js ( $url ) {
Se (
User_ is_ logado_in() )
Retornar $url; // não quebre o WP Admin
Se (FALSO ===
Strops( $url, '.js'))
Retornar $url;
If ( strops ($url, 'jquery.js' ) ) return $url;
Return str_replace( 'src', 'defer src', $url);
}

Adicionar_filtro (
'script_loader_tag',
'defer_parsing_of_js', 10
);

Este código ajuda o WordPress a adicionar o atributo defer aos arquivos JavaScript, exceto JQuery.

Aqui está o código que você pode usar para sincronizar atributos defer com seus arquivos JavaScript por meio do arquivo functions.php.

Add_filter ('script _loader_tag',
'add_defer_tags_to_scripts');
 
Função
add_defer_tags_to_scripts ($tyag) {
#list scripts para adicionar atribuídos a $scripts_to_defer = array ('script_a', script_b');
$scripts_to_async = array ('script _c', 'script_d');
#adicione as tags defer ao array scripts_to_defer
Foreach ( $scripts_to_defer as $current_script) {
If (true == strops ($tag,
$current_script) )
Retomar
Str_replace ('src,'defer=”defer” src','$tag);
}
#adicione as tags assíncronas à matriz scripts_to_async
Foreach ( $scripts_to_async como $current_script) {
If (true == strops ($tag,
$current_script) )
Retornar
Str_replace ('src,'defer=”
Async=” assíncrono” src', $tag);

}
Retornar $tag;
)

Não se esqueça de que você precisa enfileirar cada código, para que seja necessário adicionar o código a seguir.

Add_action ('wp_enqueue_scripts',
'enqueue_custom_js');
Função
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_ds',
Get_stylesheet_directory_uri(), '/script_d.js');
}

Quando você tiver atualizado todos os códigos no arquivo functions.php, atualize o arquivo e veja as alterações. Aqui está um guia passo a passo para atualizar o arquivo.

  1. Abra o painel do WordPress e vá até o editor de temas.
  2. Navegue no arquivo functions.php e cole os códigos mencionados acima.
  3. Em seguida, clique na opção atualizar arquivo.

Os plugins alternativos para adiar análise de JavaScript no WordPress

Além do Async e do defer, você tem mais duas opções de plugins Defer Parsing of JavaScript in WordPress.

  1. Pacote de reforço de velocidade

    2. Este é mais um dos melhores plugins do WordPress que você pode usar para melhorar facilmente a velocidade do site e otimizar para os usuários. Deixe-nos saber seus prós e contras.

    Prós:

    • É simples e fácil de usar por qualquer pessoa por causa da interface de usuário interativa.
    • Isso ajuda na otimização de JavaScript, carregamento insatisfatório e integração com CDN.
    • Isso será atualizado regularmente e eliminará a ameaça de bugs

    Contras:

    • Isso pode criar problemas ao usar outros plugins.

  2. JavaScript assíncrono

    3. Este plugin permite o carregamento fácil de todos os scripts java que são adicionados como wp_enqueue_script() usando LABJS. Deixe-nos saber seus prós e contras.

    Prós:

    • É muito fácil de usar o plugin
    • É mais popular no mercado de plugins
    • Projetado para adiar análise de JavaScript no WordPress

    Contras:

    • Atualizações irregulares
    • Talvez incompatível com versões mais recentes do WordPress
    • Pode causar problemas a outros plugins

    Perguntas frequentes

    O que você quer dizer com adiar a análise?

    Adiar análise é o estado em que seus arquivos JavaScript são carregados após o conteúdo do site no navegador. Isso significa que o adiamento não fará parte do carregamento e da renderização.

    Portanto, quando um usuário solicita seu site no navegador, a análise de JavaScript adiada não espera para carregar o JavaScript no navegador e mostra o conteúdo imediatamente. Em palavras simples, seu conteúdo é exibido primeiro e depois carregado.

    Como remover o bloqueio de renderização do site WordPress?

    Uma das abordagens bem-sucedidas para remover o bloqueio de renderização do site é adiar a análise antes dos outros elementos do site. Outro método para minimizar a renderização é concatenar JS e CSS juntos.

    Quais ferramentas posso usar para identificar JS não crítico em meu site?

    Para identificar se o JavaScript é crítico para o seu site ou não, você pode acessar as seguintes ferramentas.

    • Insights do Google PageSpeed: isso ajudará você a identificar os principais pontos de falta de velocidade e desempenho do seu site. Além disso, essa ferramenta também oferece algumas sugestões para melhorar o desempenho e o tempo de carregamento do seu site.
    • Com isso seu site receberá pontuações em diferentes cores como vermelho, laranja e verde. O vermelho mostrará baixo desempenho, assim como a laranja revelará média e verde para sempre.
    • Teste de velocidade do site Pingdom: é mais uma ferramenta popular para rastrear e monitorar o desempenho. Com esta ferramenta, você pode testar o desempenho do seu site em sete locais diferentes.
    • Além disso, esta ferramenta também oferece sugestões para melhorar a velocidade da página para que você possa aproveitar a melhor velocidade e desempenho do site

    Você pode adiar a análise de JavaScript no WordPress por meio do plugin Auto Optimize?

    Com a ferramenta de otimização automática, você pode facilmente adiar a análise do JavaScript. Para garantir o processo deve-se instalar e ativar o plugin como de costume. Assim que o plugin estiver instalado e ativado acesse as configurações e opte pela opção JS, CSS e HTML.

    Agora otimize a opção de código JavaScript e você desbloqueará as opções. Agora marque os arquivos JS Agregados e deixe os outros.

    Além disso, o plug-in permite excluir o JavaScript que você não deseja renderizar. Feito as alterações clique no botão salvar.

    Empacotando
    Para otimizar seu site e reduzir o tempo de carregamento, adiar a análise de JavaScript no WordPress é importante.

    Esperamos que com este artigo você tenha entendido o significado da análise de veados e como ela pode ajudar seu site a se classificar no topo das páginas de pesquisa. Boa sorte!