{"id":29073,"date":"2019-09-27T05:56:44","date_gmt":"2019-09-27T12:56:44","guid":{"rendered":"https:\/\/kinsta.com\/?p=54531"},"modified":"2025-02-26T09:43:35","modified_gmt":"2025-02-26T12:43:35","slug":"adiar-a-analise-de-aviso-do-javascript","status":"publish","type":"post","link":"https:\/\/kinsta.com\/pt\/blog\/adiar-a-analise-de-aviso-do-javascript\/","title":{"rendered":"Como Adiar a An\u00e1lise do Javascript no WordPress (4 m\u00e9todos)"},"content":{"rendered":"

Voc\u00ea executou o seu site WordPress atrav\u00e9s de um ferramenta de teste de desempenho<\/a> apenas para ser atendido com uma instru\u00e7\u00e3o para adiar a an\u00e1lise de JavaScript no WordPress?<\/p>\n

A implementa\u00e7\u00e3o desta mudan\u00e7a pode ter um impacto positivo nos tempos de carregamento de p\u00e1ginas do seu site, especialmente para visitantes m\u00f3veis. Mas o aviso pode ser um pouco dif\u00edcil de entender, e \u00e9 por isso que vamos explicar exatamente o que significa adiar a an\u00e1lise do JavaScript e como voc\u00ea pode implementar essa mudan\u00e7a em seu site WordPress.<\/p>\n

<\/div><\/kinsta-auto-toc>\n

Prefere assistir \u00e0 vers\u00e3o em v\u00eddeo<\/a>?<\/strong><\/p>\n<\/kinsta-video>\n

<\/a>O que significa adiar a an\u00e1lise do JavaScript no WordPress?<\/h2>\n

Se voc\u00ea j\u00e1 executou seu site WordPress atrav\u00e9s de Google PageSpeed Insights<\/a>, GTmetrix ou outras ferramentas de teste de velocidade de p\u00e1gina, voc\u00ea provavelmente se deparou com a sugest\u00e3o de adiar a an\u00e1lise do JavaScript.<\/p>\n

Mas… o que significa isso realmente? E porque \u00e9 que \u00e9 uma importante considera\u00e7\u00e3o de desempenho?<\/p>\n

Basicamente, quando algu\u00e9m visita o seu Site WordPress<\/a>, o servidor do seu site fornece o conte\u00fado HTML do seu site para o navegador do visitante.<\/p>\n

O navegador do visitante ent\u00e3o come\u00e7a no topo e atravessa o c\u00f3digo para renderizar seu site. Se, ao mover-se de cima para baixo, ele encontra qualquer JavaScript, ele ir\u00e1 parar de renderizar o resto da p\u00e1gina at\u00e9 que ele possa buscar e analisar o arquivo JavaScript.<\/p>\n

Ele far\u00e1 isso para cada script que encontrar, o que pode ter um efeito negativo no tempo de carregamento da p\u00e1gina do seu site porque o visitante precisa olhar para uma tela em branco enquanto seu navegador baixa e analisa todo o JavaScript.<\/p>\n

Se um determinado script n\u00e3o \u00e9 necess\u00e1rio para o funcionamento central do seu site (pelo menos na carga inicial da p\u00e1gina<\/em>), voc\u00ea n\u00e3o quer que ele atrapalhe o carregamento de partes mais importantes do seu site, e \u00e9 por isso que aqueles As ferramentas de teste de velocidade de p\u00e1gina<\/a> sempre lhe dizem para adiar a an\u00e1lise do JavaScript.<\/p>\n

Ent\u00e3o o que significa adiar a an\u00e1lise do JavaScript?<\/p>\n

Essencialmente, o seu site ir\u00e1 dizer aos navegadores dos visitantes para esperarem para baixar e\/ou analisar o JavaScript at\u00e9 que o<\/em> conte\u00fado principal do seu site j\u00e1 tenha terminado de carregar. Nesse ponto, os visitantes j\u00e1 podem ver e interagir com sua p\u00e1gina, ent\u00e3o os tempos de espera para baixar e analisar que o JavaScript j\u00e1 n\u00e3o tem um efeito t\u00e3o negativo.<\/p>\n

Por acelerando os tempos de carregamento acima da dobra do seu conte\u00fado<\/a>, voc\u00ea deixa o Google feliz e cria uma experi\u00eancia melhor e mais r\u00e1pida para os seus visitantes.<\/p>\n

<\/a>Como dizer se voc\u00ea precisa adiar a an\u00e1lise do JavaScript<\/h2>\n

Para testar se o seu site WordPress precisa adiar a an\u00e1lise do JavaScript, voc\u00ea pode executar o seu site atrav\u00e9s de GTmetrix<\/a>.<\/p>\n

O GTmetrix lhe dar\u00e1 uma nota e tamb\u00e9m listar\u00e1 scripts espec\u00edficos que precisam ser diferidos:<\/p>\n

\"Diferimento
Diferimento da an\u00e1lise do teste de JavaScript no GTmetrix<\/figcaption><\/figure>\n

<\/a>Os diferentes m\u00e9todos para adiar a an\u00e1lise do JavaScript<\/h2>\n

Existem algumas maneiras diferentes de adiar a an\u00e1lise do JavaScript. Primeiro, h\u00e1 dois atributos<\/a> que voc\u00ea pode adicionar aos seus scripts:<\/p>\n

    \n
  1. Async<\/li>\n
  2. Defer<\/li>\n<\/ol>\n

    Ambos os atributos permitem que os navegadores dos visitantes baixem JavaScript sem pausar a an\u00e1lise HTML. No entanto, a diferen\u00e7a \u00e9 que enquanto async<\/strong> n\u00e3o pausar a an\u00e1lise de HTML para buscar o script (como o comportamento padr\u00e3o faria), ele pausar\u00e1 o analisador de HTML para executar o script uma vez que ele tenha sido buscado.<\/p>\n

    Com o adiamento<\/strong>, os navegadores dos visitantes ainda ir\u00e3o baixar os scripts enquanto analisam o HTML, mas eles ir\u00e3o esperar para analisar o script at\u00e9 que a an\u00e1lise do HTML tenha sido completada.<\/p>\n

    Este gr\u00e1fico de Growing with the Web<\/a> faz um \u00f3timo trabalho de explicar a diferen\u00e7a:<\/p>\n

    \"Gr\u00e1fico
    Gr\u00e1fico que explica a assimetria vs deferir<\/figcaption><\/figure>\n

    Outra op\u00e7\u00e3o, recomendada por Patrick Sexton da Varvy, usa um script para chamar um arquivo JavaScript externo somente ap\u00f3s a carga inicial da p\u00e1gina ter terminado. Isto significa que os navegadores dos visitantes n\u00e3o ir\u00e3o baixar ou executar qualquer JavaScript at\u00e9 que a carga inicial da p\u00e1gina seja finalizada.<\/p>\n

    Finalmente, outra abordagem que voc\u00ea ver\u00e1 \u00e9 simplesmente mover seu JavaScript para a parte inferior da p\u00e1gina. No entanto, este m\u00e9todo n\u00e3o \u00e9 uma grande solu\u00e7\u00e3o porque, mesmo que a sua p\u00e1gina seja vis\u00edvel mais cedo, os navegadores dos visitantes continuar\u00e3o a exibir a p\u00e1gina como carga at\u00e9 que todos os scripts terminem. Isso pode impedir que alguns visitantes interajam com sua p\u00e1gina porque eles acham que o conte\u00fado n\u00e3o est\u00e1 totalmente carregado.<\/p>\n

    <\/a>Como adiar a an\u00e1lise do JavaScript no WordPress (4 m\u00e9todos)<\/h2>\n

    Para adiar a an\u00e1lise do JavaScript no WordPress, existem tr\u00eas rotas principais que voc\u00ea pode tomar:<\/p>\n