Se você já rodou seu site WordPress através do Google PageSpeed Insights, o Google provavelmente já lhe disse que você precisa eliminar os recursos que bloqueiam a renderização no seu site WordPress. Na verdade, pode ser por isso que estás a ler este mesmo post neste momento.

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 remover recursos que bloqueiam a renderização no WordPress?

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

O que significa “remover 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 carga 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, nesse processo, encontrar um arquivo CSS ou JavaScript, precisa parar de “ler” enquanto espera para baixar e processar esse arquivo. O tempo que ele gasta “pausado” para baixar e analisar esses recursos pode ser gasto em algo muito mais produtivo, como carregar a parte do conteúdo do seu site que é imediatamente visível quando alguém aterrissa 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 rude para o código do seu site pode ser algo parecido:

E eis porque é que isto é um problema:

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

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 de bloqueio de renderização, está essencialmente a dizer: “Ei, não carregue recursos desnecessários no topo do código do seu site porque vai demorar mais tempo para que os navegadores dos visitantes descarreguem a parte visível do seu conteúdo”.

Com as dicas neste post, 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 estão a ser renderizadas. 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 que bloqueiam a 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 que bloqueiam a renderização, PageSpeed Insights listará cada recurso individual na seção Eliminar recursos que 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 remover recursos que bloqueiam a renderização?

Não te preocupes, não tens de fazer isto manualmente. Falaremos sobre plugins WordPress que podem ajudá-lo a eliminar recursos de bloqueio de renderização na próxima seção.

Entretanto, é útil entender o que esses plugins estão fazendo nos bastidores para eliminar os recursos que bloqueiam a renderização.

Como remover o JavaScript que bloqueia a renderização

Existem algumas estratégias diferentes para remover 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 adiamento é que os seus scripts têm a garantia de execução na ordem em que aparecem no código.

A 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 remover o CSS que bloqueia a renderização

Eliminar o CSS de 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 conteúdo dobrado. O arranjo ideal é para:

Como remover recursos CSS e JavaScript bloqueando a renderização com extensões 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. Ativar um dos plugins desta seção
  3. Reveja o seu site

…então você ainda verá os resultados para o 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 livres separados do mesmo desenvolvedor. Juntos, eles ajudam a otimizar a entrega de seu CSS e JavaScript.

Depois de instalar ambos os plugins, vá a 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 remover recursos que bloqueiam a 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 que bloqueia a renderização no seu site WordPress!

Quer se livrar dos recursos que bloqueia a renderização em #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 dobrado, 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!


Se você gostou deste artigo, então você vai adorar a plataforma de hospedagem WordPress da Kinsta. Turbine seu site e obtenha suporte 24/7 de nossa experiente equipe de WordPress. Nossa infraestrutura baseada no Google Cloud se concentra em escalabilidade automática, desempenho e segurança. Deixe-nos mostrar-lhe a diferença Kinsta! Confira nossos planos