Neste artigo, vamos responder a ambas as perguntas. Aqui est\u00e1 tudo o que vamos cobrir neste artigo:<\/p>\n
- \n
- Que recursos est\u00e3o bloqueando a renderiza\u00e7\u00e3o e por que s\u00e3o um problema?<\/a><\/li>\n
- Como resolver o bloqueio geral dos recursos de renderiza\u00e7\u00e3o<\/a><\/li>\n
- Como usar plugins gratuitos ou pagos para corrigir o problema no WordPress<\/a><\/li>\n<\/ul>\n
Prefere assistir \u00e0 vers\u00e3o em v\u00eddeo<\/a>?<\/h3>\n
<\/kinsta-video>\n O que significa “eliminar recursos que bloqueiam a renderiza\u00e7\u00e3o”?<\/h2>\n
A fim de entender o que s\u00e3o recursos que bloqueiam a renderiza\u00e7\u00e3o e porque prejudicam os tempos de carregamento do seu site, precisamos come\u00e7ar com uma vis\u00e3o b\u00e1sica de como um navegador web torna uma p\u00e1gina web.<\/p>\n
Quando um visitante aterrissa em seu site, seu navegador come\u00e7a basicamente no topo do c\u00f3digo do seu site<\/a> e l\u00ea para baixo. De cima para baixo, percebeste?<\/p>\n
Se, no processo, ele encontrar um arquivo CSS<\/a> 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\u00fado do seu site que \u00e9 imediatamente vis\u00edvel quando algu\u00e9m chega na p\u00e1gina.<\/p>\n
Vamos olhar para um exemplo extremo para mostrar porque \u00e9 que isto pode ser um problema.<\/p>\n
Digamos que voc\u00ea tem esse efeito legal de JavaScript no rodap\u00e9 do seu site. \u00c9 alimentado por “coolfooter.js”, que \u00e9 um script que \u00e9 referenciado no topo do c\u00f3digo do seu site (mesmo que o efeito esteja no rodap\u00e9, para que os visitantes n\u00e3o o vejam at\u00e9 rolarem para o rodap\u00e9<\/em>).<\/p>\n
Ent\u00e3o, um layout muito<\/em> complicado para o c\u00f3digo do seu site pode ser algo parecido:<\/p>\n
- \n
- Header meta<\/li>\n
- Coolfooter.js<\/li>\n
- HTML para seu conte\u00fado acima da dobra. Este \u00e9 todo o conte\u00fado que um visitante v\u00ea imediatamente (antes de come\u00e7ar a interagir com a p\u00e1gina<\/em>)<\/li>\n<\/ul>\n
E eis porque \u00e9 que isto \u00e9 um problema:<\/p>\n
Quando um visitante chega ao seu site, seu navegador come\u00e7a a ler de cima para baixo. Portanto, antes de poder analisar e renderizar o HTML para o conte\u00fado acima em seu site, ele deve esperar para baixar e analisar o arquivo coolfooter.js.<\/p>\n
O resultado final? Demora mais tempo para exibir o HTML para o conte\u00fado acima<\/strong>, o que significa que seus visitantes perceber\u00e3o seu site como sendo mais lento.<\/p>\n
Quando o Google lhe diz para eliminar recursos que bloqueiam a renderiza\u00e7\u00e3o, est\u00e1 basicamente dizendo: “Ei, n\u00e3o carregue recursos desnecess\u00e1rios no topo do c\u00f3digo do seu site, pois isso far\u00e1 com que os navegadores dos visitantes demorem mais para baixar a parte vis\u00edvel do seu conte\u00fado”.<\/p>\n
Com as dicas neste artigo, voc\u00ea poder\u00e1 esperar para carregar certos recursos CSS e JavaScript at\u00e9 que a parte vis\u00edvel da sua p\u00e1gina j\u00e1 tenha sido carregada.<\/p>\n
Quais s\u00e3o os recursos que est\u00e3o bloqueando a renderiza\u00e7\u00e3o?<\/h3>\n
Quando nos referimos a recursos que bloqueiam a renderiza\u00e7\u00e3o, normalmente estamos a falar de:<\/p>\n
- \n
- CSS<\/li>\n
- JavaScript<\/li>\n<\/ul>\n
\u00c9 importante entender que nem todos os arquivos CSS e JavaScript s\u00e3o o que bloqueiam a renderiza\u00e7\u00e3o<\/strong><\/p>\n
Por exemplo, \u00e9 importante carregar seu CSS cr\u00edtico perto do topo, caso contr\u00e1rio seus visitantes podem experimentar o que \u00e9 conhecido como um flash de conte\u00fado n\u00e3o-instalado<\/a> (FOUC).<\/p>\n
As imagens s\u00e3o recursos que bloqueiam a renderiza\u00e7\u00e3o?<\/h3>\n
N\u00e3o, as imagens n\u00e3o bloqueiam a renderiza\u00e7\u00e3o.<\/strong> Ainda \u00e9 importante otimizar suas imagens<\/a> para reduzir o tamanho de seus arquivos, mas voc\u00ea n\u00e3o precisa se preocupar em otimizar o caminho de entrega de suas imagens.<\/p>\n
Como testar se o seu site tem recursos de bloqueio de renderiza\u00e7\u00e3o<\/h2>\n
Para avaliar se o seu site WordPress tem ou n\u00e3o recursos de bloqueio de renderiza\u00e7\u00e3o, voc\u00ea pode usar o Google PageSpeed Insights<\/a>.<\/p>\n
Tudo o que voc\u00ea faz \u00e9 entrar o URL que voc\u00ea quer testar. Ent\u00e3o, se voc\u00ea tiver um problema com recursos de bloqueio de renderiza\u00e7\u00e3o, PageSpeed Insights listar\u00e1 cada recurso individual na se\u00e7\u00e3o Eliminar recursos de bloqueiam a renderiza\u00e7\u00e3o<\/strong>\u00a0em Oportunidades<\/strong>:<\/p>\n
![\"A](\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2019\/12\/eliminate-render-blocking-resources.jpg\")
A mensagem Eliminate Render-Blocking Resources em PageSpeed Insights<\/figcaption><\/figure>\n Como fa\u00e7o para eliminar recursos que bloqueiam a renderiza\u00e7\u00e3o?<\/h2>\n
N\u00e3o se preocupe, voc\u00ea n\u00e3o precisa fazer isso manualmente. Na pr\u00f3xima se\u00e7\u00e3o, falaremos sobre plug-ins do WordPress que podem ajud\u00e1-lo a remover recursos que bloqueiam a renderiza\u00e7\u00e3o.<\/p>\n
Entretanto, \u00e9 \u00fatil entender o que esses plug-ins fazem nos bastidores para remover os recursos que bloqueiam a renderiza\u00e7\u00e3o.<\/p>\n
Como eliminar o JavaScript que bloqueia a renderiza\u00e7\u00e3o<\/h3>\n
Existem algumas estrat\u00e9gias diferentes para eliminar o JavaScript que bloqueia a renderiza\u00e7\u00e3o. Cobrimo-los em detalhe no nosso artigo sobre como diferir a an\u00e1lise do JavaScript<\/a>, mas aqui est\u00e3o os principais m\u00e9todos:<\/p>\n
- \n
- Async<\/strong> – permite que o analisador de HTML (por exemplo, um navegador do visitante<\/em>) baixe o JavaScript enquanto ainda analisa o resto do HTML. Ou seja, n\u00e3o p\u00e1ra completamente de analisar enquanto o ficheiro descarrega. No entanto, ele ir\u00e1 pausar o analisador de HTML para executar o script assim que ele for baixado.<\/li>\n
- Defer<\/strong> – permite ao analisador de HTML baixar o JavaScript enquanto analisa o resto do HTML e<\/strong> espera para executar o script at\u00e9 que a an\u00e1lise do HTML seja finalizada.<\/li>\n<\/ul>\n
Esta ilustra\u00e7\u00e3o de Growing with the Web<\/a> faz um grande trabalho de mostrar a diferen\u00e7a:<\/p>\n
![\"JavaScript](\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2019\/08\/async-vs-defer.png\")
JavaScript async vs defer<\/figcaption><\/figure>\n O benef\u00edcio de utilizar o Defer <\/strong>\u00e9 que os seus scripts t\u00eam a garantia de execu\u00e7\u00e3o na ordem em que aparecem no c\u00f3digo.<\/p>\n
Async<\/strong> n\u00e3o utiliza esta abordagem, o que \u00e0s vezes pode causar problemas se voc\u00ea aplicar assimetria<\/strong> 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 \u00e9 a quebra de recursos jQuery<\/a> que tentam carregar antes do jquery.js ter sido adicionado ao documento.<\/p>\n
Como eliminar o CSS que bloqueia a renderiza\u00e7\u00e3o<\/h3>\n
Eliminar o CSS que bloqueia a renderiza\u00e7\u00e3o pode ser um pouco mais complicado porque voc\u00ea tem que ter cuidado para n\u00e3o atrasar o CSS que \u00e9 necess\u00e1rio para renderizar acima do formato padr\u00e3o. O arranjo ideal \u00e9 para:<\/p>\n
- \n
- Identificar os estilos que s\u00e3o necess\u00e1rios para renderizar o conte\u00fado acima do\u00a0formato padr\u00e3o e entregar esses estilos em linha com o HTML<\/a>.<\/li>\n
- Use o atributo de m\u00eddia nos elementos de link que puxam os arquivos CSS para identificar recursos CSS que s\u00e3o condicionais, ou seja, necess\u00e1rios apenas para dispositivos ou situa\u00e7\u00f5es espec\u00edficas.<\/li>\n
- Os recursos CSS restantes devem ser carregados de forma ass\u00edncrona, um movimento que normalmente \u00e9 feito adicionando-os com JavaScript diferido ou ass\u00edncrono. Isto \u00e9 definitivamente territ\u00f3rio de engenharia de fachada. O que \u00e9 \u00f3ptimo se for um engenheiro de front-end, mas a maioria de n\u00f3s n\u00e3o \u00e9. A boa not\u00edcia \u00e9 que este \u00e9 um artigo sobre WordPress, e voc\u00ea pode eliminar ou pelo menos reduzir significativamente o n\u00famero de recursos JS e CSS que afetam o seu site com o(s) plugin(s) correto(s).<\/li>\n<\/ul>\n
Para outra maneira r\u00e1pida e f\u00e1cil de impulsionar sua otimiza\u00e7\u00e3o geral, considere tamb\u00e9m a possibilidade de minificar seu c\u00f3digo. Kinsta construiu um recurso de minifica\u00e7\u00e3o de c\u00f3digo<\/a> diretamente no painel do MyKinsta<\/a>, permitindo aos clientes ativar a minifica\u00e7\u00e3o autom\u00e1tica de CSS e JavaScript com um simples clique.<\/p>\n
Se voc\u00ea n\u00e3o for capaz de localizar o recurso em seu painel, basta conferir nosso v\u00eddeo Como ativar a minifica\u00e7\u00e3o no MyKinsta<\/a>.<\/p>\n
Como eliminar recursos CSS e JavaScript que bloqueiam a renderiza\u00e7\u00e3o com plugins WordPress<\/h2>\n
Para demonstrar como eliminar recursos que bloqueia a renderiza\u00e7\u00e3o no WordPress, criamos um site de teste simples que inclui CSS e JavaScript que bloqueia a renderiza\u00e7\u00e3o e, em seguida, vamos mostrar-lhe como usar duas solu\u00e7\u00f5es de plugin diferentes para eliminar o CSS e JavaScript de render-bloqueio:<\/p>\n
- \n
- Autoptimize + Async JavaScript (gratuito)<\/li>\n
- WP Rocket (pago)<\/li>\n<\/ul>\n
Para refer\u00eancia, veja como \u00e9 o nosso site de testes antes de otimizar a entrega de CSS<\/a> e JavaScript:<\/p>\n
![\"A](\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2020\/02\/eliminate-render-blocking-resources-wordpress-1.jpg\")
A mensagem Eliminate Render-Blocking Resources em PageSpeed Insights<\/figcaption><\/figure>\n Se estiver a testar a efic\u00e1cia das suas altera\u00e7\u00f5es com o Google PageSpeed Insights, tenha em aten\u00e7\u00e3o que o Google guarda os seus resultados durante v\u00e1rios minutos. Essencialmente, isto significa que se voc\u00ea rapidamente…<\/p>\n
- \n
- Teste o seu site n\u00e3o otimizado<\/li>\n
- Ative um dos plugins desta se\u00e7\u00e3o<\/li>\n
- Reveja o seu site<\/li>\n<\/ol>\n
…ent\u00e3o voc\u00ea ainda ver\u00e1 os resultados para seu site n\u00e3o otimizado at\u00e9 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\u00e3o est\u00e1 funcionando.<\/p>\n
Como eliminar recursos de bloqueio de renderiza\u00e7\u00e3o no WordPress com Autoptimize + Async JavaScript Plugin<\/h3>\n
Autoptimize<\/a> e Async JavaScript<\/a> s\u00e3o dois plugins gratuitos separados do mesmo desenvolvedor. Juntos, eles ajudam a otimizar a entrega do seu CSS e JavaScript.<\/p>\n
Depois de instalar ambos os plugins<\/a>, v\u00e1 para Settings \u2192 Async JavaScript<\/strong> e:<\/p>\n
- \n
- Marque a caixa para ativar o Async JavaScript<\/strong> no topo.<\/li>\n
- Escolha entre Aplicar Async<\/strong> e Aplicar Defer<\/strong> na caixa Configura\u00e7\u00f5es r\u00e1pidas.<\/strong><\/li>\n<\/ul>\n
![\"Como](\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2019\/12\/como-configurar-o-plugin-async-javascript.jpg\")
Como configurar o plugin Async JavaScript<\/figcaption><\/figure>\n Se a op\u00e7\u00e3o Async<\/strong> causar problemas no seu site, recomendamos que tente Deferir<\/strong> ou excluir jQuery<\/strong>, para o qual o plugin lhe d\u00e1 uma op\u00e7\u00e3o.<\/p>\n
Depois de configurar o plugin Async JavaScript, v\u00e1 a Settings \u2192 Autoptimize<\/strong> e:<\/p>\n
- \n
- Marque a caixa para otimizar<\/strong>\u00a0o c\u00f3digo JavaScript<\/strong><\/li>\n
- Marque a caixa para otimizar o c\u00f3digo CSS<\/strong><\/li>\n<\/ul>\n
![\"Como](\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2019\/12\/como-configurar-o-plugin-autoptimize.jpg\")
Como configurar o plugin Autoptimize<\/figcaption><\/figure>\n Se voc\u00ea \u00e9 um usu\u00e1rio avan\u00e7ado, voc\u00ea pode brincar com as configura\u00e7\u00f5es adicionais de otimiza\u00e7\u00e3o JavaScript e CSS, mas a maioria dos sites estar\u00e1 bem com as configura\u00e7\u00f5es padr\u00e3o.<\/p>\n
Ap\u00f3s configurar Autoptimize<\/a> e Async JavaScript, nosso site de teste passou na auditoria PageSpeed Insights “Eliminate render-blocking resources”:<\/p>\n
![\"PageSpeed](\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2019\/12\/resultados.jpg\")
PageSpeed Insights resultados c\/ Autoptimize e Async JavaScript<\/figcaption><\/figure>\n Se voc\u00ea quisesse eliminar ainda mais desses arquivos, voc\u00ea poderia usar o Autoptimize para adicionar manualmente o seu CSS cr\u00edtico<\/a>. Mas isto requer algum conhecimento de desenvolvimento, por isso n\u00e3o \u00e9 algo que os n\u00e3o-desenvolvedores devam tentar.<\/p>\n
Voc\u00ea tamb\u00e9m pode usar os plugins separadamente, se preferir. Mas dado que ambos os plugins v\u00eam do mesmo desenvolvedor e s\u00e3o constru\u00eddos para jogar bem um com o outro, a melhor abordagem para a maioria dos sites \u00e9 combin\u00e1-los.<\/p>\n
Como eliminar recursos de bloqueio de renderiza\u00e7\u00e3o com o WP Rocket<\/h3>\n
O WP Rocket<\/a> \u00e9 um plugin WordPress de alta performance e caching popular.<\/p>\n
Normalmente, n\u00e3o permitimos plugins de cache<\/a> em sites WordPress hospedados na Kinsta porque j\u00e1 lidamos com o cache para voc\u00ea<\/a> em n\u00edvel de servidor atrav\u00e9s do r\u00e1pido cache Nginx FastCGI.<\/p>\n
- Marque a caixa para otimizar o c\u00f3digo CSS<\/strong><\/li>\n<\/ul>\n
- Escolha entre Aplicar Async<\/strong> e Aplicar Defer<\/strong> na caixa Configura\u00e7\u00f5es r\u00e1pidas.<\/strong><\/li>\n<\/ul>\n
- Marque a caixa para ativar o Async JavaScript<\/strong> no topo.<\/li>\n
- Defer<\/strong> – permite ao analisador de HTML baixar o JavaScript enquanto analisa o resto do HTML e<\/strong> espera para executar o script at\u00e9 que a an\u00e1lise do HTML seja finalizada.<\/li>\n<\/ul>\n
- Async<\/strong> – permite que o analisador de HTML (por exemplo, um navegador do visitante<\/em>) baixe o JavaScript enquanto ainda analisa o resto do HTML. Ou seja, n\u00e3o p\u00e1ra completamente de analisar enquanto o ficheiro descarrega. No entanto, ele ir\u00e1 pausar o analisador de HTML para executar o script assim que ele for baixado.<\/li>\n
- Como resolver o bloqueio geral dos recursos de renderiza\u00e7\u00e3o<\/a><\/li>\n
![\"Como](\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/02\/wp-rocket-backend.png\")
![\"P\u00e1ginaSpeed](\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2019\/12\/resultados-wp-rocket.jpg\")