Se você já usou seu site WordPress com o Google PageSpeed Insights, o Google provavelmente já lhe disse que você precisa eliminar recursos que bloqueiam a renderização em seu site WordPress. Na verdade, esta pode ser a razão pela qual você está lendo este artigo agora mesmo.

Isso provavelmente coloca duas questões na sua mente:

  1. Quais são os recursos que bloqueiam a renderização em primeiro lugar?
  2. Como faço para eliminar os recursos que bloqueiam a renderização no WordPress?

Neste artigo, vamos responder a ambas as perguntas. Aqui está tudo o que vamos cobrir neste artigo:

O que significa “eliminar recursos que bloqueiam a renderização”?

A fim de entender o que são recursos que bloqueiam a renderização e porque prejudicam os tempos de carregamento do seu site, precisamos começar com uma visão básica de como um navegador web torna uma página web.

Quando um visitante aterrissa em seu site, seu navegador começa basicamente no topo do código do seu site e lê para baixo. De cima para baixo, percebeste?

Se, no processo, ele encontrar um arquivo CSS ou JavaScript, ele deve parar de “ler” enquanto faz o download e processa esse arquivo. O tempo gasto “pausando” para baixar e analisar esses recursos poderia ser gasto em algo muito mais produtivo, como carregar a parte do conteúdo do seu site que é imediatamente visível quando alguém chega na página.

Vamos olhar para um exemplo extremo para mostrar porque é que isto pode ser um problema.

Digamos que você tem esse efeito legal de JavaScript no rodapé do seu site. É alimentado por “coolfooter.js”, que é um script que é referenciado no topo do código do seu site (mesmo que o efeito esteja no rodapé, para que os visitantes não o vejam até rolarem para o rodapé).

Então, um layout muito complicado para o código do seu site pode ser algo parecido:

E eis porque é que isto é um problema:

Quando um visitante chega ao seu site, seu navegador começa a ler de cima para baixo. Portanto, antes de poder analisar e renderizar o HTML para o conteúdo acima em seu site, ele deve esperar para baixar e analisar o arquivo coolfooter.js.

O resultado final? Demora mais tempo para exibir o HTML para o conteúdo acima, o que significa que seus visitantes perceberão seu site como sendo mais lento.

Quando o Google lhe diz para eliminar recursos que bloqueiam a renderização, está basicamente dizendo: “Ei, não carregue recursos desnecessários no topo do código do seu site, pois isso fará com que os navegadores dos visitantes demorem mais para baixar a parte visível do seu conteúdo”.

Com as dicas neste artigo, você poderá esperar para carregar certos recursos CSS e JavaScript até que a parte visível da sua página já tenha sido carregada.

Quais são os recursos que estão bloqueando a renderização?

Quando nos referimos a recursos que bloqueiam a renderização, normalmente estamos a falar de:

É importante entender que nem todos os arquivos CSS e JavaScript são o que bloqueiam a renderização

Por exemplo, é importante carregar seu CSS crítico perto do topo, caso contrário seus visitantes podem experimentar o que é conhecido como um flash de conteúdo não-instalado (FOUC).

As imagens são recursos que bloqueiam a renderização?

Não, as imagens não bloqueiam a renderização. Ainda é importante otimizar suas imagens para reduzir o tamanho de seus arquivos, mas você não precisa se preocupar em otimizar o caminho de entrega de suas imagens.

Como testar se o seu site tem recursos de bloqueio de renderização

Para avaliar se o seu site WordPress tem ou não recursos de bloqueio de renderização, você pode usar o Google PageSpeed Insights.

Tudo o que você faz é entrar o URL que você quer testar. Então, se você tiver um problema com recursos de bloqueio de renderização, PageSpeed Insights listará cada recurso individual na seção Eliminar recursos de bloqueiam a renderização em Oportunidades:

A mensagem Eliminate Render-Blocking Resources em PageSpeed Insights

A mensagem Eliminate Render-Blocking Resources em PageSpeed Insights

Como faço para eliminar recursos que bloqueiam a renderização?

Não se preocupe, você não precisa fazer isso manualmente. Na próxima seção, falaremos sobre plug-ins do WordPress que podem ajudá-lo a remover recursos que bloqueiam a renderização.

Entretanto, é útil entender o que esses plug-ins fazem nos bastidores para remover os recursos que bloqueiam a renderização.

Como eliminar o JavaScript que bloqueia a renderização

Existem algumas estratégias diferentes para eliminar o JavaScript que bloqueia a renderização. Cobrimo-los em detalhe no nosso artigo sobre como diferir a análise do JavaScript, mas aqui estão os principais métodos:

Esta ilustração de Growing with the Web faz um grande trabalho de mostrar a diferença:

JavaScript async vs defer

JavaScript async vs defer

O benefício de utilizar o Defer é que os seus scripts têm a garantia de execução na ordem em que aparecem no código.

Async não utiliza esta abordagem, o que às vezes pode causar problemas se você aplicar assimetria a todos os recursos JavaScript, pois muitas vezes ela pode quebrar recursos que dependem de recursos que aparecem anteriormente no documento. O problema mais comum que a async produz é a quebra de recursos jQuery que tentam carregar antes do jquery.js ter sido adicionado ao documento.

Como eliminar o CSS que bloqueia a renderização

Eliminar o CSS que bloqueia a renderização pode ser um pouco mais complicado porque você tem que ter cuidado para não atrasar o CSS que é necessário para renderizar acima do formato padrão. O arranjo ideal é para:

Como eliminar recursos CSS e JavaScript que bloqueiam a renderização com plugins WordPress

Para demonstrar como eliminar recursos que bloqueia a renderização no WordPress, criamos um site de teste simples que inclui CSS e JavaScript que bloqueia a renderização e, em seguida, vamos mostrar-lhe como usar duas soluções de plugin diferentes para eliminar o CSS e JavaScript de render-bloqueio:

Para referência, veja como é o nosso site de testes antes de otimizar a entrega de CSS e JavaScript:

A mensagem Eliminate Render-Blocking Resources em PageSpeed Insights

A mensagem Eliminate Render-Blocking Resources em PageSpeed Insights

Se estiver a testar a eficácia das suas alterações com o Google PageSpeed Insights, tenha em atenção que o Google guarda os seus resultados durante vários minutos. Essencialmente, isto significa que se você rapidamente…

  1. Teste o seu site não otimizado
  2. Ative um dos plugins desta seção
  3. Reveja o seu site

…então você ainda verá os resultados para seu site não otimizado até que o Google reinicialize o cache. Portanto, certifique-se de esperar alguns minutos para o Google limpar o cache antes de pensar que o plugin não está funcionando.

Como eliminar recursos de bloqueio de renderização no WordPress com Autoptimize + Async JavaScript Plugin

Autoptimize e Async JavaScript são dois plugins gratuitos separados do mesmo desenvolvedor. Juntos, eles ajudam a otimizar a entrega do seu CSS e JavaScript.

Depois de instalar ambos os plugins, vá para Settings → Async JavaScript e:

Como configurar o plugin Async JavaScript

Como configurar o plugin Async JavaScript

Se a opção Async causar problemas no seu site, recomendamos que tente Deferir ou excluir jQuery, para o qual o plugin lhe dá uma opção.

Lutando com tempo de inatividade e problemas com o WordPress? Kinsta é a solução de hospedagem projetada com desempenho e segurança em mente! Confira nossos planos

Depois de configurar o plugin Async JavaScript, vá a Settings → Autoptimize e:

Como configurar o plugin Autoptimize

Como configurar o plugin Autoptimize

Se você é um usuário avançado, você pode brincar com as configurações adicionais de otimização JavaScript e CSS, mas a maioria dos sites estará bem com as configurações padrão.

Após configurar tanto Autoptimize como Async JavaScript, nosso site de teste passou na auditoria PageSpeed Insights “Eliminate render-blocking resources”:

PageSpeed Insights resultados c/ Autoptimize e Async JavaScript

PageSpeed Insights resultados c/ Autoptimize e Async JavaScript

Se você quisesse eliminar ainda mais desses arquivos, você poderia usar o Autoptimize para adicionar manualmente o seu CSS crítico. Mas isto requer algum conhecimento de desenvolvimento, por isso não é algo que os não-desenvolvedores devam tentar.

Você também pode usar os plugins separadamente, se preferir. Mas dado que ambos os plugins vêm do mesmo desenvolvedor e são construídos para jogar bem um com o outro, a melhor abordagem para a maioria dos sites é combiná-los.

Como eliminar recursos de bloqueio de renderização com o WP Rocket

O WP Rocket é um plugin WordPress de alta performance e caching popular.

Normalmente, não permitimos plugins de cache em sites WordPress hospedados na Kinsta porque já lidamos com o cache para você em nível de servidor através do rápido cache Nginx FastCGI.

No entanto, o WP Rocket tem uma integração especial com Kinsta que permite ao WP Rocket jogar bem com o seu caching Kinsta. Isso é ótimo porque o WP Rocket faz muito mais pelo desempenho do WordPress do que apenas caching, incluindo ajudar você a eliminar recursos CSS e JavaScript de renderização no seu site WordPress.

Depois de instalar e ativar o WP Rocket, vá para a guia Otimização de Arquivos. Então, habilite estas duas opções:

Como configurar o WP Rocket

Como configurar o WP Rocket

Após ativar estes dois recursos, o nosso site de teste também passou na auditoria “eliminar recursos que bloqueia a renderização” no PageSpeed Insights. WP Rocket também conseguiu eliminar mais recursos que bloqueia a renderização do que a configuração JavaScript Autoptimize/Async:

PáginaSpeed Insights resultados c/ WP Rocket

PáginaSpeed Insights resultados c/ WP Rocket

E é assim que se elimina os recursos de bloqueio de renderização no seu site WordPress!

Quer se livrar dos recursos que bloqueia a renderização no #WordPress? É super fácil com os plugins certos... Confira como ajustar as configurações deles e tornar o seu site mais rápido! ⚙️🏃‍♀️Click to Tweet

Resumo

Os recursos de bloqueio de renderização diminuem o tempo de carregamento de páginas do seu site WordPress, forçando os navegadores dos visitantes a atrasar a renderização do conteúdo acima do formato padrão, enquanto o navegador baixa arquivos que não são necessários de imediato.

Para ajudar os visitantes a carregar a parte visível da sua página mais rapidamente, você deve atrasar o carregamento de recursos que não são imediatamente necessários.

Para eliminar recursos de renderização de bloqueio no WordPress, você pode usar plugins off-the-rack.

Para uma solução gratuita, você pode usar a combinação de Autoptimize e Async JavaScript, dois plugins do mesmo desenvolvedor.

Se você estiver disposto a pagar, você pode usar o WP Rocket, que oferece uma integração especial com Kinsta e pode ajudar com muitos outros ajustes de desempenho do WordPress.

Você tem alguma pergunta adicional sobre como eliminar recursos de render-bloqueio no WordPress? Informe-nos nos comentários!


Economize tempo, custos e otimize o desempenho do seu site com:

  • Ajuda instantânea de especialistas em hospedagem do WordPress, 24/7.
  • Integração do Cloudflare Enterprise.
  • Alcance global com 28 centros de dados em todo o mundo.
  • Otimização com nosso monitoramento integrado de desempenho de aplicativos.

Tudo isso e muito mais em um plano sem contratos de longo prazo, migrações assistidas e uma garantia de 30 dias de devolução do dinheiro. Confira nossos planos ou entre em contato com as vendas com as vendas para encontrar o plano certo para você.