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:
- Quais são os recursos que bloqueiam a renderização em primeiro lugar?
- 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:
- Que recursos estão bloqueando a renderização e por que são um problema?
- Como resolver o bloqueio geral dos recursos de renderização
- Como usar plugins gratuitos ou pagos para corrigir o problema no WordPress
Prefere assistir à versão em vídeo?
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:
- Header meta
- Coolfooter.js
- HTML para seu conteúdo acima da dobra. Este é todo o conteúdo que um visitante vê imediatamente (antes de começar a interagir com a página)
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:
- CSS
- JavaScript
É 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:
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:
- Async – permite que o analisador de HTML (por exemplo, um navegador do visitante) baixe o JavaScript enquanto ainda analisa o resto do HTML. Ou seja, não pára completamente de analisar enquanto o ficheiro descarrega. No entanto, ele irá pausar o analisador de HTML para executar o script assim que ele for baixado.
- Defer – permite ao analisador de HTML baixar o JavaScript enquanto analisa o resto do HTML e espera para executar o script até que a análise do HTML seja finalizada.
Esta ilustração de Growing with the Web faz um grande trabalho de mostrar a diferença:
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:
- Identificar os estilos que são necessários para renderizar o conteúdo acima do formato padrão e entregar esses estilos em linha com o HTML.
- Use o atributo de mídia nos elementos de link que puxam os arquivos CSS para identificar recursos CSS que são condicionais, ou seja, necessários apenas para dispositivos ou situações específicas.
- Os recursos CSS restantes devem ser carregados de forma assíncrona, um movimento que normalmente é feito adicionando-os com JavaScript diferido ou assíncrono. Isto é definitivamente território de engenharia de fachada. O que é óptimo se for um engenheiro de front-end, mas a maioria de nós não é. A boa notícia é que este é um artigo sobre WordPress, e você pode eliminar ou pelo menos reduzir significativamente o número de recursos JS e CSS que afetam o seu site com o(s) plugin(s) correto(s).
Para outra maneira rápida e fácil de impulsionar sua otimização geral, considere também a possibilidade de minificar seu código. Kinsta construiu um recurso de minificação de código diretamente no painel do MyKinsta, permitindo aos clientes ativar a minificação automática de CSS e JavaScript com um simples clique.
Se você não for capaz de localizar o recurso em seu painel, basta conferir nosso vídeo Como ativar a minificação no MyKinsta.
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:
- Autoptimize + Async JavaScript (gratuito)
- WP Rocket (pago)
Para referência, veja como é o nosso site de testes antes de otimizar a entrega de CSS e JavaScript:
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…
- Teste o seu site não otimizado
- Ative um dos plugins desta seção
- 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:
- Marque a caixa para ativar o Async JavaScript no topo.
- Escolha entre Aplicar Async e Aplicar Defer na caixa Configurações rápidas.
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.
Depois de configurar o plugin Async JavaScript, vá a Settings → Autoptimize e:
- Marque a caixa para otimizar o código JavaScript
- Marque a caixa para otimizar o código CSS
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 Autoptimize e Async JavaScript, nosso site de teste passou na auditoria PageSpeed Insights “Eliminate render-blocking resources”:
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:
- Otimize a entrega do CSS na seção Arquivos CSS
- Carregue JavaScript diferido sob a seção de arquivos JavaScript. Você pode experimentar desligar o Modo Seguro para jQuery. Mas se você notar problemas no front-end do seu site, você vai querer reativar o modo seguro para jQuery, pois ele é o provável culpado.
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:
E é assim que se elimina os recursos de bloqueio de renderização no seu site WordPress!
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!
Jon é o Diretor de Operações na Kinsta e está envolvido diariamente com as equipes de vendas, atendimento ao cliente e suporte técnico da Kinsta. Jon é um homem de família. Então, quando não está digitando freneticamente no laptop, geralmente está ajudando um de seus filhos a consertar uma bicicleta ou configurando a Netflix para uma criança impaciente.
Amei, me ajudou muito. Parabéns pelo artigo! Meu site está um jatinho!
Artigo sensacional. Me ajudou muito.