Adiar a análise do Javascript - 5 maneiras de corrigi-lo e aumentar a velocidade (2024)

Como alguém que está tentando entender como adiar a análise de Javascript, acreditamos que você tenha um problema. Você possui ou visitou um site de alguém que conhece (talvez um cliente?) E leva uma eternidade para carregar. E quando você o executou por meio de ferramentas de teste de velocidade do site, você recebeu uma recomendação que não tem certeza de como implementar.

Neste artigo, vamos compartilhar várias maneiras de adiar o Javascript e corrigir esse aviso e, por fim, fazer o site carregar mais rápido, sem gerar esse erro!

Se você estiver com pouco tempo, aqui estão algumas ações rápidas que você pode fazer:

Instruções para adiar a análise de JavaScript

1. Baixe o plugin Async SUA PARTICIPAÇÃO FAZ A DIFERENÇA.
2. Clique em Plugins> Adicionar Novo> Upload de plugin e selecione o arquivo que você acabou de baixar.
3. Clique em Ativação do plugin instalado.
4. Vá para Plugins e clique em Configurações para o plugin Async que você acabou de instalar.
5. Clicando sobre Ativar Javascript Asyncou Aplicar assíncrono como duas das maneiras mais comuns de aplicar a correção.
6. Teste seu site, para ver se tudo está funcionando bem.

Por que o procedimento para implementar adiar a análise de Javascript é importante? Se você não adiar a análise de Javascript, seu site parecerá que está carregando lentamente. Javascript é essencialmente um bloco de construção importante na linguagem da web, pois permite que os desenvolvedores da web criem funcionalidades "dinâmicas".

No entanto, na maioria dos casos, os arquivos Javascript tendem a ficar muito grandes. Eles também podem puxar de servidores de terceiros. Isso torna o download lento. Mas isso é apenas metade do problema.

O maior problema é que, se não houver adiamento da análise de Javascript, o navegador ficará BLOQUEADO e impedirá a exibição de conteúdo. O site NÃO SE REPRESENTA. E o que isso parece para um usuário? Parece que o site está lento, quebrado ou completamente morto. 

O problema é agravado em dispositivos móveis, onde o poder de processamento disponível, juntamente com a largura de banda disponível tornam a experiência ainda pior.

E o que farão os usuários que tiverem essa experiência? Eles vão pular para fora do seu site e nunca mais voltar!

Se você já conhece a indústria da web há algum tempo e está tentando melhorar o SEO do seu site, já sabe que o desempenho do site é crucial para melhorar a visibilidade do seu mecanismo de pesquisa.

E se você usou o Google PageSpeed ​​Insights para verificar seu site, além de "adiar a análise de Javascript", há ainda mais avisos enigmáticos, como aquele que diz “Elimine recursos de bloqueio de renderização”.

Este material técnico parece ter o maior impacto na velocidade de carregamento! 

Eliminar?! Mas como posso eliminar esses arquivos cruciais do meu site?

Não se preocupe, estamos aqui para ajudá-lo a corrigir esses avisos, resolver esses problemas e, por fim, agilizar o carregamento das suas páginas!

Porque você não tem que removê-los. Tudo que você precisa fazer é adiar a análise de JavaScript.

Dê uma olhada neste pequeno vídeo abaixo para ver como é simples adiar a análise de Javascript usando um dos métodos abaixo:

Em linguagem não geek, isso significa que você precisa ajustar algumas coisas em seu WordPress, para permitir que a página deixe seu conteúdo carregar antes de carregar ou analisar seus arquivos JavaScript. 

Isso ocorre porque, se você não adiar a análise de Javascript, renderizar o site se torna uma operação muito pesada e, como dissemos acima, o site parecerá que está quebrado.

Para garantir que o usuário permaneça no site, gostaríamos de informá-lo de que algo está realmente acontecendo e mostrar o conteúdo ao usuário, em vez de esperar que o navegador faça todo o trabalho pesado antes de realmente mostrar algo ao usuário . 

A propósito, se você deseja tornar seu WordPress rápido, existem alguns plug-ins como este que pode fazer uma diferença real no desempenho em poucos minutos (com pouco ou nenhum esforço).

Se você está interessado, WP Rocket pode configurar adiar a análise de Javascript e muitos outros ajustes para tornar seu site mais rápido, basta clicar no banner abaixo para conferir. 

Não está pronto para usar um plugin agora? Leia... 

O que é Adiar análise de JavaScript?

Adiar a análise de Javascript significa usar "defer"Ou"async"para evitar o bloqueio de renderização de uma página. Este comando HTML instrui o navegador a executar / analisar os scripts após (adiar) ou de forma assíncrona (em paralelo) ao carregamento da página. Isso permite que o conteúdo seja mostrado sem esperar que os scripts sejam carregados .

Ao configurar o adiamento da análise de JavaScript, você poderá permitir que seu conteúdo carregue mais rápido e com alta prioridade.

Por que isso?

Veja abaixo este excelente explicador que demonstra como as páginas da web são carregadas e como os arquivos JavaScript estão dificultando muito o tempo de carregamento do seu site.

Continuando no vídeo acima, vamos dar uma olhada rápida no que acontece quando alguém visita seu site: 

1. Quando um usuário clica em um link que aponta para o seu site, o navegador do usuário o solicita do seu servidor, que o servidor “serve” ao navegador do usuário.
2. O navegador do usuário então recebe e vê o conteúdo HTML de sua página da web e começará a processá-lo. Ele começará a construir sua página da web de cima para baixo.
3. Se encontrar arquivos JavaScript ao longo do caminho, o navegador irá parar e buscá-lo (se for um arquivo externo) e, em seguida, analisá-lo
4. Somente depois de buscar e analisar totalmente cada script, ele continuará a carregar o restante do seu conteúdo.

Você provavelmente já está começando a ver onde está o problema.

Quando suas páginas têm muitos arquivos JavaScript, isso pode afetar enormemente o tempo de carregamento do seu site - negativamente.

O navegador do usuário mostrará continuamente o ícone de carregamento ou a roda giratória enquanto analisa e carrega seus scripts antes de mostrar o conteúdo real - especialmente visível em navegadores móveis ou usuários em conexões de dados de baixa velocidade.

Se demorar mais do que alguns segundos, especialmente se você estiver servindo seus scripts de um servidor externo (e esse servidor por acaso está com problemas no momento), seus visitantes começarão a ficar nervosos.

Durante esse tempo, o usuário não vê nada além de uma página em branco. Não é uma das coisas mais frustrantes da Internet? Tudo deve ser instantâneo na web, por que eles têm que esperar que sua página carregue?

Se um usuário esperar mais de 4 segundos, ele começará a ficar nervoso. Depois de 8 segundos, seu site está praticamente morto - o usuário irá saltar para outro site.

Você perdeu um visitante e provavelmente o negócio dele. 

A complicação adicional é que, muitas vezes, esses arquivos JS são adicionados ao seu site por plug-ins e temas essenciais que você instalou, então você não pode exatamente se livrar deles facilmente.

Então, o que você faz?

Para resolver isso, você precisa adiar a análise de JavaScript. Isso funciona analisando seus scripts assim que o conteúdo principal for carregado. Confira o visual abaixo para ver exatamente o impacto no tempo de carregamento. Como podemos ver, o comando defer força o navegador a executar o Javascript posteriormente, enquanto o async permite que as coisas aconteçam paralelamente ao download.

Portanto, quando um usuário visita seu site, seu navegador continuará analisando tudo de cima para baixo, mas pulará seus arquivos JavaScript para mais tarde. Dessa forma, seus usuários poderão ver seu conteúdo imediatamente, sem ter que esperar. 

Se você assistiu ao vídeo acima, notou que os atributos “async” e “defer” ajudam muito.

Mas como você faria isso no WordPress? Além disso, quando é o momento certo para usá-los? Vamos ver e começar!

Analise seu site

Antes de começar, você precisa saber se precisa implementar a correção de adiar Javascript em seu site ou não. Para descobrir se você precisa, você pode usar várias ferramentas que estão prontamente disponíveis online.

Alguns exemplos são os seguintes:

1. GTMetrix

Este funciona verificando as métricas PageSpeed ​​e Yslow e fornece uma pontuação de F a A. Eles também fornecem recomendações e dicas sobre como melhorar seu site se forem encontrados problemas. Ele dirá especificamente se você precisa adiar a análise de JavaScript. 

Geralmente, a pontuação deve ser de pelo menos 71.

A imagem abaixo mostra um site que não precisa de adiamento. 

2. Ferramentas PageSpeed

uma ferramenta desenvolvida pelo Google, o PageSpeed ​​Insights é outra ferramenta abrangente que fornece informações abrangentes sobre os problemas de desempenho do seu site, juntamente com dicas para corrigi-los, assim como o GTMetrix.

Uma das melhores coisas sobre esta ferramenta é que inclui links para guias e recursos detalhados para ajudá-lo a corrigir todos os seus problemas de desempenho. A imagem abaixo mostra um site que precisa urgentemente implementar a análise adiada de JavaScript.

3. Ferramentas Pingdom 

Outra ferramenta popular de teste de desempenho de sites que está disponível gratuitamente para todos.

Embora não pareça dizer explicitamente se você precisa adiar a análise de JavaScript, você pode verificar quanto tempo levou para seus scripts carregarem, graças à sua página de resultados abrangente.

A imagem abaixo mostra um site que tem quase metade de sua página consistindo em JavaScript - um ótimo indicador de que você pode adiar seus scripts. 

4.  Velocidade de página do Varvy 

Outra excelente ferramenta que informará se o seu site possui scripts de bloqueio de renderização.

O melhor é que ele permite que você saiba exatamente o que são, assim como na imagem abaixo: 

OK fixe!

Agora você tem acesso a ferramentas que podem ajudá-lo a determinar se você precisa implementar o adiamento da análise de arquivos JavaScript.

Mas você pode estar se perguntando por que não implementá-lo e deixá-lo sozinho? Se você adiar a análise de JavaScript incorretamente, pode danificar as coisas e pode ser frustrante consertá-lo se você não tiver experiência em tecnologia.

Simplesmente ativar o modo adiar não significa que tudo está definido para ser esquecido e funcionará bem. Você terá que verificar se fez tudo certo e certificar-se de que tudo ainda funciona como planejado. 

Por exemplo, se você usa jQuery, deve escolher cuidadosamente qual dos seus scripts deve adiar porque parece haver um problema com adiar e jQuery.

Além disso, você descobrirá que há toneladas de perguntas no Stack Overflow sobre jQuery, async e defer, que geralmente são sobre como você deve implementar defer e async, se for o caso, para seus scripts que dependem de jQuery. 

Então, quais são os resultados? Você precisa adiar seus scripts?

Em caso afirmativo, vamos descobrir como adiar o JavaScript no WordPress!

Como adiar a análise de JavaScript no WordPress

Adiar a análise de JavaScript no WordPress pode ser bastante simples.

Você pode simplesmente instalar um dos milhares de plug-ins no repositório do WordPress e pronto. Mas também existem maneiras avançadas de fazer isso se você precisar de mais controle, especialmente se estiver usando scripts complexos para tornar seu site mais envolvente e interativo. 

Nesta seção, vamos verificar cinco maneiras diferentes de realizar a análise adiada de JavaScript no WordPress: via plug-ins, via functions.php e edição de código manualmente. 

Existem tantos plug-ins no repositório do WordPress que podem ajudá-lo a melhorar o desempenho do seu site.

Existem aqueles que são dedicados a uma tarefa específica, como reduzir seu código HTML e existem plug-ins que tentam incorporar todos os ajustes relacionados ao desempenho em um plug-in, como ter a capacidade de reduzir e adiar arquivos CSS e JavaScript, implementar e aproveitar o cache do navegador (que cobrimos extensivamente neste artigo) e mais. 

No entanto, nem todos os plug-ins são criados iguais. Alguns funcionam muito bem, alguns funcionam bem e alguns nem funcionam e podem até mesmo interromper algumas ou todas as funcionalidades do seu site. 

(Se você preferir que alguém experiente cuide disso para você, você pode fazer isso usando um show Fiverr barato clicando no botão abaixo.)

1. Adiar a análise de Javascript usando o plug-in Async

Honestamente falando, sugerimos fortemente que você opte por um plugin premium (que é muito barato), mas você tem a certeza de corrigir não apenas este aviso, mas toda uma gama de problemas de velocidade de carregamento do site.

Começaremos com um dos mais populares que se destinam a fazer um único trabalho definido por este artigo.

Uma das escolhas mais populares para realizar este trabalho é o Javascript Async. Este plugin se concentra em melhorar o desempenho do seu site ajustando como seus scripts são carregados e, como o WP Rocket abaixo, ele também vem com recursos avançados adicionais que permitem que você exclua o adiamento de certos scripts.

Aqui estão as etapas que você precisa realizar para usar este plug-in.

1. Baixe o plugin Async SUA PARTICIPAÇÃO FAZ A DIFERENÇA.
2. Clique em Plugins> Adicionar Novo no back-end do WP.
3. Clique em Upload de plugin e selecione o arquivo que você acabou de baixar.
4. Como alternativa, pesquise Async Javascript e clique em Agora instale.
5. Clique em Ativação do plugin instalado.
6. Vá para Plugins e clique em Configurações para o plugin Async que você acabou de instalar.
7. Sugerimos clicar em Ativar Javascript Asyncou Aplicar assíncrono como duas das maneiras mais comuns de aplicar a correção.
8. Se isso não funcionar, você pode tentar algumas combinações diferentes.
9. Teste seu site, para ver se tudo está funcionando bem.

Talvez um de seus pontos fortes seja que, além da capacidade de excluir determinados scripts do adiamento, você também tem a opção de escolher quais scripts serão adiados:

Você também pode perceber que tem a opção de assíncrono ou adiar um script. Para obter mais informações sobre a diferença entre os dois, você pode ler este artigo.

Um recurso exclusivo deste plugin é que você pode especificar a exclusão de um determinado tema ou plugin.

Também existe a opção de integrar GTMetrix em seu site para que você possa sempre verificar seu desempenho. Observe que, cada vez que você realizar um teste, um crédito de API será deduzido de sua conta GTMetrix.

Embora algumas pessoas recomendem JavaScript adiado WP, este plugin não foi atualizado por mais de 3 anos e não foi testado com as últimas 3 versões principais, então é altamente recomendável que você não use este. Pode ainda funcionar, mas não foi testado, por isso é um risco que você não deve correr.

Se você tem um site relativamente simples e está procurando melhorar ainda mais o tempo de carregamento, isso pode ser exatamente o que você precisa. Este plugin não requer configuração alguma - apenas instale, ative e esqueça.

Novamente, tenha em mente que este não é recomendado para sites complexos como e-commerce por causa de sua falta de opções de ajustes avançados e por causa de sua idade. Ser capaz de ajustar as opções de adiamento do JavaScript é crucial para sites grandes e complexos.

2. Foguete WP

Atualmente o plugin líder de desempenho em WordPress, o WP Rocket oferece não apenas a capacidade de adiar a análise de arquivos JavaScript, mas também de seus arquivos CSS. Além disso, você obtém toneladas de outras opções de melhoria de desempenho.

Alguns recursos incluem o seguinte: 

• Minificação - reduz o tamanho do código do seu site para que ele carregue mais rápido. Ele faz isso removendo espaços em branco e outros caracteres desnecessários do código, sem afetar sua funcionalidade principal.
• Concatenação - combina vários arquivos CSS e JavaScript em um.
• Carregamento lento - este é o modo de adiamento para arquivos de vídeo e outros conteúdos multimídia, como imagens. Ele atrasa o carregamento desses arquivos que consomem muitos recursos até que o usuário role para baixo até eles.

Uma das melhores coisas sobre o WP Rocket é que, depois de instalá-lo e ativá-lo, você pode simplesmente deixá-lo sozinho e obter automaticamente ganhos de desempenho.

No entanto, você pode definir configurações avançadas para aumentar ainda mais o desempenho, mas lembre-se de que algumas delas podem ter efeitos adversos em seu site. E por causa disso, sua opção de adiamento para arquivos JavaScript e CSS não são ativados por padrão, porque se feito cuidadolessly, eles podem quebrar coisas.

Felizmente, você pode impedir que certos scripts sejam adiados.

Você pode tentar excluir todos os seus scripts primeiro e, em seguida, adiar a análise dos arquivos Javascript, um por um, até encontrar o problemático. Eles têm extensa documentação para te ajudar com isso. Dessa forma, você poderá maximizar as melhorias de desempenho sem quebrar ou sacrificar algumas ou todas as funcionalidades do seu site.

WP Rocket é um plugin premium, mas dado o preço e a funcionalidade fornecida (não apenas adiamento e assincronização de arquivos JS, mas muitas outras otimizações que são garantido para tornar o seu site mais rápido), acreditamos que vale muito o preço.

Baixar WP Rocket

3. Pacote de reforço de velocidade

Outro ótimo plug-in de desempenho tudo-em-um que permite adiar a análise de arquivos Javascript é Pacote de reforço de velocidade. É semelhante ao WP Rocket em termos de recursos, mas é gratuito. Possui a maioria dos recursos básicos do WP Rocket, como minimização, adiamento, remoção de arquivos desnecessários, etc.

Abaixo você pode ver alguns dos recursos disponíveis no plugin: 

Na guia Avançado, você pode optar por excluir alguns scripts de serem movidos para o rodapé ou de serem adiados ou ambos. No entanto, você só pode adicionar até 4 scripts excluídos, o que certamente é uma limitação para sites grandes e complexos. 

No geral, é uma boa alternativa gratuita ao WP Rocket, adequada para sites pequenos.

4. Usando ajustes de functions.php

E se você não quiser usar plug-ins?

Há outro truque que você pode fazer para adiar a análise de Javascript no WordPress e é editar o arquivo functions.php do seu tema.

Simplesmente copie o código abaixo e cole-o na parte inferior do arquivo function.php do seu tema: 

function defer_parsing_of_javascript ( $url ) {
  if ( FALSE === strpos( $url, '.js' ) ) return $url;
  if ( strpos( $url, 'jquery.js' ) ) return $url;
    return "$url' defer ";
}
add_filter( 'clean_url', 'defer_parsing_of_javascript', 11, 1 ); 

Lembre-se de que você pode bagunçar seu site se fizer algo errado, então preste muita atenção e certifique-se de editar o arquivo correto no tema correto e de colar o snippet de código no local correto. Certifique-se de não excluir / alterar nada.

Felizmente, você pode criar um tema filho para fazer edições seguras em seu arquivo functions.php. Além disso, se você substituir ou atualizar seu tema, poderá facilmente manter todas as suas edições personalizadas no arquivo. Aqui está um ótimo artigo que explica como criar um tema filho. Depois de criar um tema filho, apenas cole o trecho de código no arquivo function.php do filho, salve-o e está tudo pronto.

Leia mais: O bloqueio de mensagens está ativo

5. Ajuste seu código manualmente

Isso pode parecer assustador, especialmente se você não gosta de codificação, mas para usuários avançados, ajustar o código manualmente é uma ótima maneira de adiar a análise de arquivos JavaScript no WordPress. 

Varvy tem um ótimo trecho de código que permite que o conteúdo inicial da sua página da web seja completamente carregado antes de carregar qualquer outro script externo. O snippet de código está abaixo:

  function downloadJSAtOnload () {
    elemento var = document.createElement ("script");
    element.src = "//www.yourdomain.com/defer.js";
    document.body.appendChild (elemento);
  }
  se (janela.addEventListener)
    window.addEventListener ("carregar", downloadJSAtOnload, false);
  senão se (window.attachEvent)
    window.attachEvent ("onload", downloadJSAtOnload);
  senão window.onload = downloadJSAtOnload;

Substitua defer.js por seu próprio arquivo de script. Depois de editá-lo para refletir seu próprio script, cole-o antes do seu HTML marcação. No WordPress, você pode fazer isso editando o arquivo footer.php do seu tema.

Novamente, é recomendado usar um tema filho se você for criar edições em seus arquivos de tema. Uma pequena nota: editar footer.php através do tema filho é diferente de functions.php: você deve copiar o footer.php inteiro do seu tema principal junto com seu conteúdo para o seu tema filho e então fazer / adicionar as edições. 

Se você não quiser se preocupar com a edição de seu footer.php, você pode usar um plugin chamado Cabeçalhos e rodapés Inserir. 

Basta colar o trecho de código na caixa “Scripts no rodapé”, clicar em salvar e você terá o script adicionado na parte inferior do código do seu site, acima do marcação. 

E essas são todas as maneiras de adiar a análise de JavaScript no WordPress! Mas eles funcionam? Eles melhoraram o desempenho do seu site? Vamos verificar os resultados!

Testando os resultados

Para testar os resultados, acesse GTMetrix.com, PageSpeed ​​Insights e Pingdom Tools para ver se sua nota de desempenho e tempo de carregamento melhoraram.

No GTMetrix, sua pontuação deve ser de pelo menos 71. Quanto mais, melhor! Uma pontuação perfeita seria assim :-) 

No PageSpeed ​​Insights, procure as “primeiras pinturas”:

Geralmente, quando você está testando se sua implementação de adiar a análise de JavaScript resultou no adiamento dos scripts, tente obter resultados verdes em Primeira pintura com conteúdo e Primeira pintura significativa.

Compare antes e depois do adiamento e verifique se eles melhoram.

Para Pingdom Tools, dê uma olhada na seção de ordem de carregamento e veja se a maioria, senão todos, dos seus arquivos de script foram carregados por último. Compare antes e depois do adiamento e observe se os arquivos de script mudaram de posição na ordem de carregamento (ou seja, eles carregaram antes ou depois). 

Os resultados o satisfizeram? Se sim, ótimo trabalho! Caso contrário, experimente mais. Se você usou outros métodos em nossa lista, tente usar plug-ins avançados que permitem personalizar ainda mais suas opções de adiamento e desempenho. Além disso, verifique algumas recomendações do Google na próxima seção. Eles podem te ajudar.

Como adiar a análise de JavaScript usando um script

Existem diferentes técnicas que você pode usar para adiar a análise de JavaScript. A próxima seção discute o que você precisa fazer. 

Em resumo, você precisa fazer o seguinte:

1. Copie o código abaixo e adicione-o antes de tag em seu HTML.
2. Substitua example.js no código abaixo pelo arquivo que contém o script a ser adiado.
3. Salve as alterações.
4. Teste seu site para ver o efeito.

Vejamos essas etapas com mais detalhes:

• Use um script para chamar um arquivo JS externo assim que a página inicial terminar de carregar. Em varvy.com, Patrick Sexton sugere um método que permite que o conteúdo do site seja carregado, antes de carregar um JS (para garantir que o usuário possa ver o conteúdo primeiro). Isso garante que o caminho de carregamento crítico não seja afetado por scripts que causam qualquer bloqueio de renderização. O método envolve a criação de um arquivo externo que não é necessário para exibir o conteúdo inicialmente. Em seguida, adicionando o seguinte script antes do no HTML. O exemplo a seguir usa um arquivo example.js, que precisaria ser atualizado de acordo. 

  <script type="text/javascript">
      function downloadJSAtOnload() {
          var element = document.createElement("script");
          element.src = "example.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>

  Assim que a página da web terminar de carregar, o script começará a ser baixado e executado exemplo.js - o problema é que você precisará criar o arquivo manualmente.

• Usando os atributos assíncronos ou deferir. A tag JS async or adiar os atributos agem de maneira semelhante - a maneira como funcionam é tal que minimizam a quantidade de tempo em que a análise de HTML para para aguardar o download e a execução dos scripts. Assíncrono permite que o download de arquivos JS ocorra de forma assíncrona, em vez de síncrona, ou seja, um novo thread é aberto para download enquanto o HTML continua a analisar. Adiar instrui o navegador a executar o script APÓS a conclusão do carregamento da página. Essa é outra maneira de permitir que a análise da página seja concluída e, portanto, não criar um impacto no tempo de carregamento. Ambas as tags minimizam o bloqueio de renderização de JS. No uso de ambos, o JS não precisa esperar que o HTML termine de analisar antes de começar a baixar ou executar - o que garante que a página ainda carregue rapidamente. Veja como a execução acontece para assíncrono e adiar respectivamente nas imagens abaixo.
  
  

• Mova o JavaScript para o final da sua página. A terceira e última sugestão é mover qualquer <script> tags na parte inferior das páginas (especialmente se não forem essenciais, como anúncios). Este método não é o ideal, porque o navegador ainda estará ocupado até que o último script seja completamente baixado e analisado. Visto que o navegador parece ocupado, alguns visitantes podem não interagir com a página até que ela esteja completamente carregada, resultando em uma experiência do usuário potencialmente negativa.

Sugestões do Google

O Google tem muitos recursos para melhorar o desempenho do seu site. Eles até têm uma página dedicada a melhorar o tempo de carregamento do script do seu site, que você pode verificar SUA PARTICIPAÇÃO FAZ A DIFERENÇA.

No menu à esquerda, você também pode encontrar outros recursos que ajudam a melhorar o desempenho do seu site. Verifique também se o seu PageSpeed ​​Insights relata problemas relacionados a eles.

Para uma visão geral, o Google sugere que você deve inserir scripts críticos em linha e assíncronos ou adiar scripts não críticos. Isso significa que os scripts exigidos pelo seu site devem ser incorporados ao HTML. Esse é, no entanto, o trabalho dos desenvolvedores de tema e plug-in do WordPress - mas se você fosse criar seu tema ou plug-in, tenha isso em mente.

Leia mais:  Como contratar (GREAT) desenvolvedores Javascript

Além disso, o Google também delineou uma maneira de você identificar manualmente qual dos seus scripts bloqueia a renderização da sua página da web por ter um tempo de carregamento muito longo. Você pode fazer isso utilizando as ferramentas de desenvolvimento do Chrome ' cobertura aba.

Adiar CSS não utilizado

Um problema semelhante que você pode ver ocorrendo hoje em dia, também na ferramenta de insights do Pagespeed, é o Defer of Unused CSS. Embora este seja um problema semelhante, suas raízes são um pouco diferentes. Essencialmente, o CSS precisaria ser reestruturado para corrigir isso.

{loadpostion imh-embed}

Perguntas Frequentes

Como faço para corrigir o adiamento da análise de JavaScript no WordPress?

Para corrigir o adiamento da análise de Javascript no WordPress, você precisa fazer algumas pequenas alterações em seu código. Você pode encontrar todos os scripts e adicionar o adiar tag para eles, ou você pode instalar um plugin que faz isso automaticamente. Você também pode criar um script que carregue os arquivos de forma assíncrona, conforme demonstrado na seção Como adiar a análise de Javascript usando um script deste artigo.

O que é adiar JavaScript?

Adiar a análise de Javascript é o processo de instruir o navegador dos visitantes do seu site a carregar arquivos específicos APÓS o carregamento da página. Isso permite que o usuário veja o conteúdo da página muito mais rápido do que se você não implementasse a análise adiada de Javascript

Qual é a diferença entre async e adiar Javascript?

Async significa que o conteúdo Javascript é carregado como sua própria nova conexão, em paralelo a qualquer outro código existente. Com o async, o navegador cria um novo thread de processamento que não diminui a velocidade de nenhum download existente enquanto o Javascript está sendo baixado e executado. Adiar, por outro lado, pede ao navegador para analisar o script, após o download do restante do conteúdo. Embora isso geralmente seja bom para a velocidade, pode haver alguns problemas com o seu conteúdo, se ele fizer referência ao script que foi adiado (porque não estará disponível).

Como minimizo o JavaScript no WordPress?

Para minimizar o Javascript no WordPress, você precisará implementar um plug-in que faça isso automaticamente. Você pode ler mais sobre isso SUA PARTICIPAÇÃO FAZ A DIFERENÇA. 

Resumindo

E você acabou de testemunhar como adiar a análise de JavaScript no WordPress.

Aprendemos que isso pode ser obtido por meio de plug-ins ou por meio de ajustes manuais. Ele tem muitos benefícios para o seu site, como SEO aprimorado, melhor experiência do usuário e tempos de carregamento mais rápidos. Portanto, é importante garantir que você adie o máximo de scripts possível para obter o máximo de ganhos de desempenho.

Mas lembre-se, sempre mantenha um backup e teste bastante para garantir que você adiou os scripts corretos! Pode parecer tedioso, mas se feito da maneira certa, os benefícios e ganhos são enormes.

Se você quiser realmente maximizar a velocidade de carregamento do seu site, sugerimos deixar isso para os PROs, como os caras da WP Rocket, para obter o máximo dos benefícios disso e de centenas de outras ações para fazer o seu site carregar mais rápido.

Visite WP Rocket para tornar seu site mais rápido hoje  

Sobre o autor

Autor: David AttardWebsite: https://www.linkedin.com/in/dattard/Email: david @collectiveray.com

David trabalha na indústria online e digital ou em torno dela há 21 anos. Ele tem vasta experiência nas indústrias de software e web design usando WordPress, Joomla e nichos que os cercam. Ele trabalhou com agências de desenvolvimento de software, empresas internacionais de software, agências de marketing locais e agora é Chefe de Operações de Marketing na Aphex Media – uma agência de SEO. Como consultor digital, seu foco é ajudar as empresas a obter uma vantagem competitiva usando uma combinação de seus sites e plataformas digitais disponíveis atualmente. Sua combinação de experiência em tecnologia combinada com uma forte visão de negócios traz uma vantagem competitiva aos seus escritos.