{"id":34842,"date":"2020-02-05T00:41:31","date_gmt":"2020-02-05T08:41:31","guid":{"rendered":"https:\/\/kinsta.com\/?p=14820"},"modified":"2025-02-20T06:45:25","modified_gmt":"2025-02-20T09:45:25","slug":"caminho-de-renderizacao-critica","status":"publish","type":"post","link":"https:\/\/kinsta.com\/pt\/blog\/caminho-de-renderizacao-critica\/","title":{"rendered":"Como Optimizar o Caminho de Renderiza\u00e7\u00e3o Cr\u00edtica no WordPress"},"content":{"rendered":"<p>O Caminho de Renderiza\u00e7\u00e3o Cr\u00edtica \u00e9 a sequ\u00eancia de tarefas que o navegador executa para primeiro renderizar uma p\u00e1gina na tela, ou seja, para baixar, processar e converter c\u00f3digo HTML, CSS e JavaScript em pixels reais, e pint\u00e1-los na tela.<\/p>\n<blockquote><p>A Otimiza\u00e7\u00e3o do Caminho de Renderiza\u00e7\u00e3o Cr\u00edtica \u00e9 o processo de minimizar o tempo gasto pelo navegador para realizar cada etapa da seq\u00fc\u00eancia priorizando a exibi\u00e7\u00e3o do conte\u00fado relacionado com a a\u00e7\u00e3o atual do usu\u00e1rio.<\/p><\/blockquote>\n<p>Grande parte deste processo diz respeito \u00e0 parte da p\u00e1gina que \u00e9 vis\u00edvel sem rolar pela janela do navegador. Essa se\u00e7\u00e3o tamb\u00e9m \u00e9 conhecida como<strong> Above the Fold<\/strong>. Para uma melhor usabilidade, a ATF deve ser entregue o mais r\u00e1pido poss\u00edvel, e isto pode ser feito reduzindo ao m\u00ednimo o n\u00famero de viagens de ida e volta da rede. Os recursos necess\u00e1rios para renderizar a ATF s\u00e3o considerados cr\u00edticos, e otimizar o Above the Fold significa minimizar o impacto dos recursos cr\u00edticos no tempo para a primeira renderiza\u00e7\u00e3o da p\u00e1gina.<\/p>\n<p>Neste post, vamos caminhar pela seq\u00fc\u00eancia de otimiza\u00e7\u00e3o do Critical Rendering Path.<\/p>\n<ul>\n<li>Em primeiro lugar, vou fornecer uma vis\u00e3o geral das tarefas que o navegador executa para renderizar o conte\u00fado de uma p\u00e1gina.<\/li>\n<li>Em seguida, vou dissecar as a\u00e7\u00f5es mais relevantes que podemos realizar para otimizar o Caminho de Renderiza\u00e7\u00e3o Cr\u00edtica.<\/li>\n<li>Finalmente, vou listar alguns plugins de otimiza\u00e7\u00e3o WordPress \u00fateis (e populares).<\/li>\n<\/ul>\n<h2>A Sequ\u00eancia do Caminho de Renderiza\u00e7\u00e3o Cr\u00edtica<\/h2>\n<p>Aqui est\u00e1 a sequ\u00eancia de passos executados pelo navegador para renderizar uma p\u00e1gina:<\/p>\n<ul>\n<li>Primeiro, o navegador faz o download e analisa a marca\u00e7\u00e3o HTML e constr\u00f3i o DOM<\/li>\n<li>Em seguida, faz o download e processa a mark-up do CSS e constr\u00f3i o Modelo de Objetos CSS<\/li>\n<li>Ela combina n\u00f3s DOM e CSSOM necess\u00e1rios para renderizar a p\u00e1gina na \u00e1rvore de renderiza\u00e7\u00e3o, que \u00e9 uma estrutura de \u00e1rvore de todos os n\u00f3s vis\u00edveis<\/li>\n<li>Ele calcula as dimens\u00f5es e a posi\u00e7\u00e3o de cada objeto na p\u00e1gina<\/li>\n<li>Finalmente, pinta pixels na tela<\/li>\n<\/ul>\n<h3>O DOM<\/h3>\n<p>Como bem explicado no <a href=\"https:\/\/developers.google.com\/web\/fundamentals\/performance\/critical-rendering-path\/constructing-the-object-model\" target=\"_blank\" rel=\"noopener noreferrer\">guia Optimiza\u00e7\u00e3o do Caminho de Renderiza\u00e7\u00e3o Cr\u00edtica<\/a> do Google, o browser constr\u00f3i o Modelo de Objetos de Documento numa sequ\u00eancia de quatro passos:<\/p>\n<ul>\n<li>Primeiro, o navegador l\u00ea os bytes de linha e os traduz para caracteres individuais.<\/li>\n<li>Depois converte as cordas dos caracteres entre par\u00eanteses angulares em fichas<\/li>\n<li>Estes tokens s\u00e3o convertidos em objetos de n\u00f3<\/li>\n<li>Os objetos de n\u00f3 s\u00e3o ligados em uma estrutura de dados em forma de \u00e1rvore que cont\u00e9m conte\u00fado HTML, propriedades e todas as rela\u00e7\u00f5es entre os n\u00f3s. Esta estrutura \u00e9 o<strong> Modelo de Objeto de Documento<\/strong>.<\/li>\n<\/ul>\n<p>O que \u00e9 importante notar aqui \u00e9 que o navegador constr\u00f3i o DOM de forma incremental. Isto d\u00e1-nos a oportunidade de acelerar a renderiza\u00e7\u00e3o da p\u00e1gina atrav\u00e9s da cria\u00e7\u00e3o de estruturas DOM eficientes.<\/p>\n<figure style=\"width: 640px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2017\/11\/dom.png\" alt=\"Estrutura CSSOM\" width=\"640\" height=\"400\"><figcaption class=\"wp-caption-text\">Estrutura CSSOM<\/figcaption><\/figure>\n<h3>O CSSOM<\/h3>\n<p>Quando o analisador encontra uma tag de <code>link<\/code> que se refere a uma folha de estilo CSS externa, ele bloqueia o analisador e envia um pedido para este recurso. Uma vez recebido o arquivo CSS, o navegador come\u00e7a a construir uma estrutura de dados em \u00e1rvore dos n\u00f3s CSS.<\/p>\n<ul>\n<li>O navegador l\u00ea os bytes de linha do arquivo . css e os traduz para caracteres individuais<\/li>\n<li>Converte as cordas de caracteres entre par\u00eanteses curvos em fichas<\/li>\n<li>Estes tokens s\u00e3o convertidos em objetos de n\u00f3<\/li>\n<li>Os objetos de n\u00f3 s\u00e3o ligados em uma estrutura de dados em forma de \u00e1rvore que cont\u00e9m as propriedades CSS de cada n\u00f3, e as rela\u00e7\u00f5es entre n\u00f3s. Esta estrutura \u00e9 o<strong> Modelo de Objetos CSS <\/strong>(<strong>CSSOM<\/strong>).<\/li>\n<\/ul>\n<p>Ao contr\u00e1rio da constru\u00e7\u00e3o DOM, a constru\u00e7\u00e3o CSSOM n\u00e3o \u00e9 incremental. O navegador n\u00e3o pode usar uma parte de uma folha de estilos, porque os estilos podem ser refinados e redeclarados na mesma folha de estilos. Por este motivo, o navegador bloqueia o processo de renderiza\u00e7\u00e3o at\u00e9 receber e analisar todo o CSS. Isto significa que o<strong> CSS est\u00e1 a tornar o bloqueio<\/strong>.<\/p>\n<figure style=\"width: 640px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2017\/11\/cssom.png\" alt=\"Estrutura CSSOM\" width=\"640\" height=\"400\"><figcaption class=\"wp-caption-text\">Estrutura CSSOM<\/figcaption><\/figure>\n<h3>A \u00e1rvore de Renderiza\u00e7\u00e3o<\/h3>\n<p>O navegador combina DOM e CSSOM na \u00e1rvore de renderiza\u00e7\u00e3o, que \u00e9 a estrutura de \u00e1rvore final contendo todos os n\u00f3s e propriedades que est\u00e3o sendo usados para renderizar a p\u00e1gina para a tela.<\/p>\n<blockquote><p>A \u00e1rvore de Renderiza\u00e7\u00e3o cont\u00e9m apenas os n\u00f3s necess\u00e1rios para renderizar uma p\u00e1gina. Como consequ\u00eancia, os n\u00f3s invis\u00edveis s\u00e3o omitidos.<\/p><\/blockquote>\n<p>O navegador usa a \u00e1rvore de Renderiza\u00e7\u00e3o para calcular as dimens\u00f5es e a posi\u00e7\u00e3o do n\u00f3 e, finalmente, como um input para o processo de pintura.<\/p>\n<figure style=\"width: 640px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2017\/11\/arvore-de-renderizacao.png\" alt=\"Estrutura da \u00e1rvore de renderiza\u00e7\u00e3o\" width=\"640\" height=\"400\"><figcaption class=\"wp-caption-text\">Estrutura da \u00e1rvore de renderiza\u00e7\u00e3o<\/figcaption><\/figure>\n<h3>Layout e Pintura<\/h3>\n<p>Na etapa de layout, o navegador calcula as dimens\u00f5es e a posi\u00e7\u00e3o de cada n\u00f3 da \u00e1rvore de Renderiza\u00e7\u00e3o. Nesta fase, o navegador atravessa a \u00e1rvore Render a partir da sua raiz e produz um modelo de caixa. Esta informa\u00e7\u00e3o \u00e9 finalmente utilizada para converter cada n\u00f3 da \u00e1rvore de renderiza\u00e7\u00e3o em pixels reais na tela.<\/p>\n<h2>Otimiza\u00e7\u00e3o do Caminho de Renderiza\u00e7\u00e3o Cr\u00edtica<\/h2>\n<p>O tempo necess\u00e1rio para executar o processo inteiro pode ser vari\u00e1vel. Depende de muitos fatores como o tamanho do documento, o n\u00famero de pedidos, os estilos aplicados, o dispositivo do usu\u00e1rio, etc.<br \/>\nUma das recomenda\u00e7\u00f5es mais relevantes do Google \u00e9 priorizar o conte\u00fado vis\u00edvel de modo a tornar o Above the Fold o mais r\u00e1pido poss\u00edvel, e fornece duas regras principais a seguir:<\/p>\n<ul>\n<li>Estruturar o HTML para carregar primeiro o conte\u00fado cr\u00edtico, acima do conte\u00fado dobrado<\/li>\n<li>Reduzir a quantidade de dados utilizados pelos recursos HTML, CSS e JS<\/li>\n<\/ul>\n<p>Como bem explicado no <a href=\"https:\/\/developers.google.com\/speed\/docs\/insights\/PrioritizeVisibleContent\" target=\"_blank\" rel=\"noopener noreferrer\">guia PageSpeed do Google<\/a>, se a quantidade de dados necess\u00e1rios para renderizar a ATF exceder a janela inicial de congestionamento (14,6kb), ser\u00e1 necess\u00e1rio fazer viagens adicionais de ida e volta \u00e0 rede entre o servidor e o navegador. Em redes m\u00f3veis, com altas lat\u00eancias, isso atrasaria significativamente o carregamento da p\u00e1gina (<a href=\"https:\/\/kinsta.com\/pt\/blog\/latencia-de-rede\/\" target=\"_blank\" rel=\"noopener noreferrer\">leia-se more on latency<\/a>).<br \/>\nO browser constr\u00f3i o DOM de forma incremental, e isto d\u00e1-nos a oportunidade de reduzir o tempo necess\u00e1rio para renderizar a ATF, estruturando o HTML de modo a carregar primeiro o acima-dobr\u00e1vel e adiar o resto da p\u00e1gina.<\/p>\n<figure style=\"width: 640px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2017\/11\/acima-do-conteudo-do-fold.png\" alt=\"Acima do conte\u00fado do Fold\" width=\"640\" height=\"389\"><figcaption class=\"wp-caption-text\">Acima do conte\u00fado do Fold varia de acordo com o dispositivo do usu\u00e1rio<\/figcaption><\/figure>\n<p>Mas a otimiza\u00e7\u00e3o n\u00e3o termina com a constru\u00e7\u00e3o de uma estrutura DOM eficaz. Ao contr\u00e1rio, \u00e9 um processo de melhoria e medi\u00e7\u00e3o que envolve toda a sequ\u00eancia do Critical Rendering Path.<\/p>\n<p>Vamos mergulhar fundo.<\/p>\n<h2>Minimizar as dimens\u00f5es dos recursos<\/h2>\n<p>Podemos reduzir a quantidade de dados que o navegador vai baixar, minificando, comprimindo e armazenando em cache recursos HTML, CSS e JavaScript:<\/p>\n<ul>\n<li><strong>Minifica\u00e7\u00e3o<\/strong> \u00e9 o processo de remover caracteres desnecess\u00e1rios como coment\u00e1rios e espa\u00e7o em branco do c\u00f3digo fonte. Estes caracteres s\u00e3o extremamente \u00fateis no desenvolvimento, mas s\u00e3o in\u00fateis para o navegador para renderizar a p\u00e1gina.<\/li>\n<li><strong>Compress\u00e3o<\/strong> \u00e9 a capacidade dos servidores web e clientes de reduzir o tamanho dos arquivos transmitidos, a fim de melhorar a velocidade e a utiliza\u00e7\u00e3o da largura de banda<\/li>\n<li><strong>Caching<\/strong>: cada browser vem com uma implementa\u00e7\u00e3o de um <strong>cache HTTP<\/strong>. O que precisamos fazer \u00e9 garantir que cada resposta do servidor forne\u00e7a os cabe\u00e7alhos HTTP corretos para instruir o navegador sobre quando e por quanto tempo ele deve armazenar os recursos solicitados.<\/li>\n<\/ul>\n<h2>Optimize o CSS<\/h2>\n<p>Agora sabemos que o navegador tem que esperar at\u00e9 que ele pegue e processe o c\u00f3digo CSS antes que ele possa renderizar a p\u00e1gina (<a href=\"https:\/\/kinsta.com\/pt\/blog\/bloqueio-de-renderizacao-no-wordpress\/\">CSS \u00e9 o bloqueio de renderiza\u00e7\u00e3o<\/a>). <strong>Mas nem todos os recursos do CSS est\u00e3o a bloquear a renderiza\u00e7\u00e3o<\/strong>.<\/p>\n<p>O CSS pode ser escopo para condi\u00e7\u00f5es particulares, e podemos otimiz\u00e1-lo usando tipos de m\u00eddia e consultas de m\u00eddia. Se voc\u00ea estiver visualizando uma p\u00e1gina na tela, o navegador enviar\u00e1 um pedido de tipo de m\u00eddia impressa, mas n\u00e3o bloquear\u00e1 a renderiza\u00e7\u00e3o da p\u00e1gina para este recurso.<br \/>\nPegue a seguinte etiqueta de <code>link<\/code>:<\/p>\n<pre><code class=\"language-html\">&lt;link rel=\"stylesheet\" href=\"style.css\" \/&gt;<\/code><\/pre>\n<p>A folha de estilo referenciada desta etiqueta aplica-se em qualquer condi\u00e7\u00e3o, independentemente do tipo de m\u00eddia atual, resolu\u00e7\u00e3o de tela, orienta\u00e7\u00e3o do dispositivo, etc. Isto significa que o recurso CSS est\u00e1 sempre em bloqueio de renderiza\u00e7\u00e3o.<\/p>\n<p>Felizmente, podemos enviar um pedido para um recurso CSS sob condi\u00e7\u00f5es espec\u00edficas. Podemos mover estilos de impress\u00e3o para um arquivo separado e usar o atributo de <code>media<\/code> para dizer ao navegador que a folha de estilo especificada s\u00f3 deve ser carregada ao imprimir a p\u00e1gina, e n\u00e3o precisa bloquear a renderiza\u00e7\u00e3o na tela:<\/p>\n<pre><code class=\"language-php\">&lt;link rel=\"stylesheet\" href=\"print.css\" media=\"print\" \/&gt;<\/code><\/pre>\n<p>O navegador ainda faz o download da folha de estilo<em> print.css<\/em>, mas ela n\u00e3o bloqueia a renderiza\u00e7\u00e3o. Al\u00e9m disso, o navegador tem que baixar menos dados para o arquivo CSS principal, o que nos ajudaria a acelerar o download. Podemos especificar qualquer consulta de m\u00eddia no atributo do <code>link<\/code>, para que possamos dividir o CSS em v\u00e1rios arquivos e carreg\u00e1-los condicionalmente:<\/p>\n<pre><code class=\"language-php\">&lt;link rel=\"stylesheet\" href=\"style.css\" media=\"screen\" \/&gt;\n&lt;link rel=\"stylesheet\" href=\"portrait.css\" media=\"orientation:portrait\" \/&gt;\n&lt;link rel=\"stylesheet\" href=\"widescreen.css\" media=\"(min-width: 42rem)\" \/&gt;<\/code><\/pre>\n<p>Certifique-se de que os seus estilos s\u00e3o realmente necess\u00e1rios para renderizar a p\u00e1gina. Se n\u00e3o estiverem, voc\u00ea pode adicionar um valor apropriado ao atributo media tag e desbloquear a renderiza\u00e7\u00e3o.<\/p>\n<p>Tipos de m\u00eddia e consultas podem nos ajudar a acelerar a renderiza\u00e7\u00e3o da p\u00e1gina, mas n\u00f3s podemos fazer muito mais.<\/p>\n<ul>\n<li><strong>Minify CSS<\/strong>: espa\u00e7o em branco e coment\u00e1rios apenas nos ajudam a ler as declara\u00e7\u00f5es CSS. Ao remover coment\u00e1rios e espa\u00e7os em branco da folha de estilos podemos reduzir significativamente o n\u00famero de bytes de um arquivo CSS<\/li>\n<li><strong>Combinar v\u00e1rios arquivos CSS<\/strong>: isso <a href=\"https:\/\/kinsta.com\/pt\/blog\/fazer-menos-solicitacoes-http\/\">reduziria o n\u00famero de solicita\u00e7\u00f5es HTTP<\/a>. Esta a\u00e7\u00e3o \u00e9 particularmente importante nas conex\u00f5es m\u00f3veis, onde o desempenho \u00e9 afetado pela alta lat\u00eancia (<a href=\"https:\/\/kinsta.com\/pt\/blog\/latencia-de-rede\/\" target=\"_blank\" rel=\"noopener noreferrer\">leia-se more on latency<\/a>).<\/li>\n<li><strong>CSS cr\u00edticos em linha<\/strong>: alguns estilos s\u00e3o cr\u00edticos no sentido em que s\u00e3o necess\u00e1rios para renderizar o acima-o-dobra da p\u00e1gina. Voc\u00ea deve sempre considerar estilos cr\u00edticos inline diretamente na marca\u00e7\u00e3o HTML para evitar solicita\u00e7\u00f5es HTTP adicionais. Mas evite a formata\u00e7\u00e3o de grandes arquivos CSS, pois isso pode exigir viagens adicionais de ida e volta para renderizar o arquivo acima, e isso resultaria em um aviso de PageSpeed.<\/li>\n<\/ul>\n<p>Voc\u00ea pode executar um impulso r\u00e1pido e f\u00e1cil em seu site diretamente no painel de <a href=\"https:\/\/kinsta.com\/pt\/mykinsta\/\">controle MyKinsta<\/a>. Basta usar o <a href=\"https:\/\/kinsta.com\/pt\/docs\/hospedagem-de-wordpress\/cdn-wordpress\/cdn-kinsta\/#code-minification-1\">recurso de minifica\u00e7\u00e3o de c\u00f3digo<\/a> que lhe \u00e9 fornecido para ativar a modifica\u00e7\u00e3o autom\u00e1tica de CSS e Javascript com o clique de um bot\u00e3o.<\/p>\n<h2>Acelera\u00e7\u00e3o do Layout e Processos de Pintura<\/h2>\n<p>O tempo despendido pelo navegador para fazer o layout do documento depende do n\u00famero de elementos DOM a serem layoutados e da complexidade desses layouts.<\/p>\n<ul>\n<li>Se voc\u00ea tiver muitos elementos DOM, o navegador pode demorar muito tempo para calcular a posi\u00e7\u00e3o e as dimens\u00f5es de todos eles: evite o layout sempre que poss\u00edvel.<\/li>\n<li>Prefira o novo modelo Flexbox, pois \u00e9 mais r\u00e1pido que o antigo Flexbox e layouts flutuantes.<\/li>\n<li>Evite layout s\u00edncrono for\u00e7ado com JavaScript<\/li>\n<\/ul>\n<p>O tamanho e a posi\u00e7\u00e3o dos elementos de computa\u00e7\u00e3o leva tempo e reduz o desempenho. Tornar o DOM o mais simples poss\u00edvel, e evitar o uso do JavaScript para antecipar o processo de layout ajudaria o navegador a acelerar a renderiza\u00e7\u00e3o da p\u00e1gina (<a href=\"https:\/\/developers.google.com\/web\/fundamentals\/performance\/rendering\/avoid-large-complex-layouts-and-layout-thrashing\">ler more on layout optimization<\/a>).<\/p>\n<p>Estritamente ligado ao Layout est\u00e1 o processo de Pintura, que \u00e9 provavelmente a etapa mais demorada na sequ\u00eancia do Caminho de Renderiza\u00e7\u00e3o Cr\u00edtica, porque sempre que voc\u00ea muda o layout de um elemento ou qualquer propriedade n\u00e3o geom\u00e9trica, o navegador aciona um evento de pintura. Tornar as coisas t\u00e3o simples quanto poss\u00edvel nesta fase pode ajudar o navegador a acelerar o processo de pintura. Por exemplo, uma propriedade de <code>box-shadow<\/code>, que requer algum tipo de c\u00e1lculo, levaria mais tempo para pintar do que uma cor de borda s\u00f3lida.<\/p>\n<figure id=\"attachment_14825\" aria-describedby=\"caption-attachment-14825\" style=\"width: 1024px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-14825 size-large\" src=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2017\/11\/paint-flashing-1024x491.png\" alt=\"DevTools cromados permitem identificar as por\u00e7\u00f5es da p\u00e1gina que est\u00e3o sendo pintadas\" width=\"1024\" height=\"491\"><figcaption id=\"caption-attachment-14825\" class=\"wp-caption-text\">DevTools cromados permitem identificar as por\u00e7\u00f5es da p\u00e1gina que est\u00e3o sendo pintadas<\/figcaption><\/figure>\n<p>A otimiza\u00e7\u00e3o do processo de pintura pode n\u00e3o ser t\u00e3o f\u00e1cil, e voc\u00ea deve fazer uso das ferramentas de desenvolvimento do seu navegador para medir o tempo que o navegador leva para acionar cada evento de pintura. Voc\u00ea pode ler mais sobre este t\u00f3pico no <a href=\"https:\/\/developers.google.com\/web\/fundamentals\/performance\/rendering\/simplify-paint-complexity-and-reduce-paint-areas\" target=\"_blank\" rel=\"noopener noreferrer\">guia de desempenho do Google Rendering Performance<\/a>.<\/p>\n<h2>Fa\u00e7a o desbloqueio do JavaScript<\/h2>\n<p>Quando o navegador encontra uma tag de script, ele tem que parar de analisar o c\u00f3digo HTML. Os scripts em linha s\u00e3o executados no ponto exato em que est\u00e3o no documento e bloqueiam a constru\u00e7\u00e3o do DOM at\u00e9 o motor JS terminar de funcionar. Em outras palavras, o JavaScript em linha pode atrasar significativamente a renderiza\u00e7\u00e3o inicial da p\u00e1gina. Mas o JavaScript tamb\u00e9m permite manipular as propriedades do CSS, ent\u00e3o o navegador tem que pausar a execu\u00e7\u00e3o do script at\u00e9 que ele tenha terminado de baixar e construir o CSSOM, tamb\u00e9m. Isto significa que o<strong> JavaScript \u00e9 um bloqueio de parser<\/strong>.<\/p>\n<p>No caso de arquivos JS externos, o analisador tamb\u00e9m deve esperar at\u00e9 que o recurso tenha sido buscado no cache ou no servidor remoto, o que pode atrasar bastante o tempo para a primeira renderiza\u00e7\u00e3o da p\u00e1gina.<br \/>\nDito isto, o que podemos fazer para minimizar o tempo gasto pelo navegador para carregar e executar o JavaScript?<\/p>\n<ul>\n<li><strong>Carregar o JavaScript de forma ass\u00edncrona<\/strong>: o atributo boolean <code>async<\/code> da tag do script instrui o navegador a executar o <code>script<\/code> de forma ass\u00edncrona, se poss\u00edvel, sem bloquear a constru\u00e7\u00e3o do DOM. O navegador envia o pedido HTTP para o script, e continua analisando o DOM. Al\u00e9m disso, o script n\u00e3o bloqueia a constru\u00e7\u00e3o do CSSOM, o que significa que ele n\u00e3o bloquear\u00e1 o Caminho de Renderiza\u00e7\u00e3o Cr\u00edtica (consulte <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Element\/script\" target=\"_blank\" rel=\"noopener noreferrer\">os documentos MDN<\/a> para obter mais informa\u00e7\u00f5es sobre os atributos da etiqueta do <strong>script<\/strong>)<\/li>\n<li><strong>Deferir JavaScript<\/strong>: o atributo booleano <code>defer<\/code> da tag <code>script<\/code> diz ao navegador para executar o script ap\u00f3s o documento ter sido analisado, mas antes de disparar o evento <code>DOMContentLoaded<\/code>. Este atributo n\u00e3o deve ser utilizado se o atributo src estiver ausente, ou seja, scripts em linha (leia mais em <a href=\"https:\/\/hacks.mozilla.org\/2009\/06\/defer\/\" target=\"_blank\" rel=\"noopener noreferrer\">Mozilla Hacks<\/a>)<\/li>\n<li><strong>Adiar o JavaScript inline<\/strong>: muitos scripts n\u00e3o manipulam o DOM ou o CSSOM, por isso n\u00e3o h\u00e1 uma boa raz\u00e3o para que eles bloqueiem <a href=\"https:\/\/kinsta.com\/pt\/blog\/adiar-a-analise-de-aviso-do-javascript\/\" target=\"_blank\" rel=\"noopener noreferrer\">a an\u00e1lise<\/a>. Infelizmente, n\u00e3o podemos usar atributos <code>async<\/code> e <code>defer<\/code> para scripts em linha, ent\u00e3o a \u00fanica maneira de carreg\u00e1-los depois que o documento for carregado \u00e9 movendo-os para o fundo. A vantagem \u00e9 que os scripts inline n\u00e3o requerem solicita\u00e7\u00f5es HTTP adicionais. No entanto, scripts inlining usados em v\u00e1rias p\u00e1ginas resultariam em c\u00f3digo redundante.<\/li>\n<\/ul>\n<h2>Regras de Otimiza\u00e7\u00e3o de Embalagem<\/h2>\n<p>Isso \u00e9 muita coisa, n\u00e3o \u00e9? Vamos respirar fundo e escrever uma lista das a\u00e7\u00f5es de otimiza\u00e7\u00e3o descritas at\u00e9 agora.<\/p>\n<ul>\n<li>Minimize, comprima e armazene recursos HTML, CSS e JavaScript.<\/li>\n<li>Minimizar o uso de recursos de bloqueio de render (especificamente CSS)\n<ul>\n<li>Use consultas de m\u00eddia em etiquetas de <code>link<\/code><\/li>\n<li>Folhas de estilo divididas e CSS em linha cr\u00edtica<\/li>\n<li>Combinar v\u00e1rios arquivos CSS<\/li>\n<\/ul>\n<\/li>\n<li>Minimizar o uso de recursos de bloqueio de parser (JavaScript)\n<ul>\n<li>Use o atributo <code>defer<\/code> nas etiquetas do script<\/li>\n<li>Usar atributo <code>async<\/code> nas etiquetas do script<\/li>\n<li>JavaScript em linha e mover etiquetas de <code>script<\/code> para a parte inferior do documento<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>Agora que conhecemos os conceitos b\u00e1sicos da Critical Rendering Path Optimization, podemos dar uma olhada em alguns plugins de otimiza\u00e7\u00e3o populares do WordPress.<\/p>\n<h2>Otimizando o Caminho Cr\u00edtico de Renderiza\u00e7\u00e3o no WordPress<\/h2>\n<p>Os usu\u00e1rios do WordPress podem tirar proveito de v\u00e1rios plugins que cobrem quase todos os aspectos do processo de otimiza\u00e7\u00e3o. Voc\u00ea pode instalar um plugin completo, ou pode instalar v\u00e1rios plugins ao mesmo tempo, cada um fornecendo recursos de otimiza\u00e7\u00e3o espec\u00edficos.<\/p>\n<blockquote><p>Se o seu site \u00e9 hospedado pela Kinsta, voc\u00ea n\u00e3o precisar\u00e1 de um plugin de cache porque <a href=\"https:\/\/kinsta.com\/pt\/blog\/cache-wordpress\/\" target=\"_blank\" rel=\"noopener noreferrer\">n\u00e3o h\u00e1 necessidade de plugins de cache do WordPress na Kinsta<\/a>.<\/p><\/blockquote>\n<h3>W3 Total Cache<\/h3>\n<p>Este \u00fanico plugin cobre quase todas as etapas do processo de otimiza\u00e7\u00e3o do Caminho de Renderiza\u00e7\u00e3o Cr\u00edtica. \u00c0 primeira vista, a configura\u00e7\u00e3o do plugin pode ser esmagadora, mas uma vez que voc\u00ea se familiarizar mais com a sequ\u00eancia do Critical Rendering Path, voc\u00ea ser\u00e1 capaz de tirar proveito de um poderoso conjunto de ferramentas de desempenho.<\/p>\n<figure id=\"attachment_14842\" aria-describedby=\"caption-attachment-14842\" style=\"width: 1539px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/wordpress.org\/plugins\/w3-total-cache\/\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-14842 size-full\" src=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2017\/11\/w3-total-cache-wordpress-plugin.jpg\" alt=\"W3 Total Cache WordPress plugin\" width=\"1539\" height=\"495\"><\/a><figcaption id=\"caption-attachment-14842\" class=\"wp-caption-text\">W3 Total Cache WordPress plugin<\/figcaption><\/figure>\n<p>Aqui est\u00e1 uma lista de alguns recursos de plugin:<\/p>\n<ul>\n<li>HTML (posts e p\u00e1ginas), caching CSS e JavaScript na mem\u00f3ria, em disco ou em CDN<\/li>\n<li>Cache de feeds, resultados de pesquisa, objetos de banco de dados, objetos WordPress e fragmentos<\/li>\n<li>Minifica\u00e7\u00e3o de HTML (posts e p\u00e1ginas)<\/li>\n<li>JavaScript e minifica\u00e7\u00e3o CSS<\/li>\n<li>Optimiza\u00e7\u00e3o JavaScript com <code>async<\/code> e <code>defer<\/code><\/li>\n<li>Caching de navegadores usando cache-control, cabe\u00e7alhos de expira\u00e7\u00e3o futura e tags de entidades<\/li>\n<li><a href=\"https:\/\/kinsta.com\/pt\/blog\/ativar-compressao-gzip\/\">compress\u00e3o<\/a> HTTP (gzip)<\/li>\n<li>Resultados do Google PageSpeed no painel de controle do WordPress<\/li>\n<\/ul>\n<p>Voc\u00ea pode ler mais sobre todas as caracter\u00edsticas, <a href=\"https:\/\/kinsta.com\/pt\/blog\/w3-total-cache\/\" target=\"_blank\" rel=\"noopener noreferrer\">configura\u00e7\u00f5es e op\u00e7\u00f5es do plugin<\/a> neste guia detalhado.<\/p>\n<figure id=\"attachment_14826\" aria-describedby=\"caption-attachment-14826\" style=\"width: 779px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-14826 size-full\" src=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2017\/11\/w3tc-js-minify.png\" alt=\"W3 Total Cache JavaScript minify settings\" width=\"779\" height=\"501\"><figcaption id=\"caption-attachment-14826\" class=\"wp-caption-text\">W3 Total Cache JavaScript minify settings<\/figcaption><\/figure>\n<h3>WP Super Cache<\/h3>\n<p><a href=\"https:\/\/wordpress.org\/plugins\/wp-super-cache\/\" target=\"_blank\" rel=\"noopener noreferrer\">O WP Super Cache<\/a> \u00e9 outro plugin popular para o desempenho do site.<\/p>\n<figure id=\"attachment_14843\" aria-describedby=\"caption-attachment-14843\" style=\"width: 1539px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/wordpress.org\/plugins\/wp-super-cache\/\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-14843 size-full\" src=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2017\/11\/wp-super-cache-wordpress-plugin.png\" alt=\"WP Super Cache WordPress plugin\" width=\"1539\" height=\"495\"><\/a><figcaption id=\"caption-attachment-14843\" class=\"wp-caption-text\">WP Super Cache WordPress plugin<\/figcaption><\/figure>\n<p>Ele vem com um bom n\u00famero de recursos de otimiza\u00e7\u00e3o, mas \u00e9 menos abrangente do que o W3 Total Cache anterior e pode parecer mais acess\u00edvel para usu\u00e1rios iniciantes e intermedi\u00e1rios.<\/p>\n<figure id=\"attachment_14827\" aria-describedby=\"caption-attachment-14827\" style=\"width: 621px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-14827 size-full\" src=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2017\/11\/wordpress-super-cache-tester.png\" alt=\"WordPress Super Cache tester\" width=\"621\" height=\"807\"><figcaption id=\"caption-attachment-14827\" class=\"wp-caption-text\">WordPress Super Cache tester<\/figcaption><\/figure>\n<p>Basicamente, fornece recursos de cache e compress\u00e3o HTTP, mas carece de minifica\u00e7\u00e3o de recursos e otimiza\u00e7\u00e3o JavaScript com atributos <code>async<\/code> e <code>defer<\/code>. No entanto, mais de um milh\u00e3o de instala\u00e7\u00f5es ativas provam que o plugin vale a pena tentar.<\/p>\n<figure id=\"attachment_14828\" aria-describedby=\"caption-attachment-14828\" style=\"width: 747px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-14828 size-full\" src=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2017\/11\/wpsc-gzip.png\" alt=\"GZIP op\u00e7\u00e3o em WP Super Cache\" width=\"747\" height=\"477\"><figcaption id=\"caption-attachment-14828\" class=\"wp-caption-text\">GZIP op\u00e7\u00e3o em WP Super Cache<\/figcaption><\/figure>\n<h3>Autoptimize<\/h3>\n<p>Com mais de 1.000.000 instala\u00e7\u00f5es ativas, o <a href=\"https:\/\/wordpress.org\/plugins\/autoptimize\/\" target=\"_blank\" rel=\"noopener noreferrer\">Autoptimize<\/a> \u00e9 um dos plugins gratuitos mais populares para minifica\u00e7\u00e3o.<\/p>\n<figure id=\"attachment_14844\" aria-describedby=\"caption-attachment-14844\" style=\"width: 1539px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/wordpress.org\/plugins\/autoptimize\/\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-14844 size-full\" src=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2017\/11\/autoptimize-wordpress-plugin.jpg\" alt=\"Autoptimize WordPress plugin\" width=\"1539\" height=\"495\"><\/a><figcaption id=\"caption-attachment-14844\" class=\"wp-caption-text\">Autoptimize WordPress plugin<\/figcaption><\/figure>\n<p>Ele vem com uma p\u00e1gina de op\u00e7\u00f5es dividida em v\u00e1rias se\u00e7\u00f5es onde o administrador do site pode configurar separadamente a minifica\u00e7\u00e3o HTML, CSS e JavaScript.<\/p>\n<figure id=\"attachment_14829\" aria-describedby=\"caption-attachment-14829\" style=\"width: 768px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-14829 size-full\" src=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2017\/11\/optimize-html.png\" alt=\"Otimizar automaticamente a op\u00e7\u00e3o de otimiza\u00e7\u00e3o HTML\" width=\"768\" height=\"299\"><figcaption id=\"caption-attachment-14829\" class=\"wp-caption-text\">Otimizar automaticamente a op\u00e7\u00e3o de otimiza\u00e7\u00e3o HTML<\/figcaption><\/figure>\n<p>Voc\u00ea tamb\u00e9m pode agregar scripts ou folhas de estilo independentes e definir exce\u00e7\u00f5es para recursos espec\u00edficos. Al\u00e9m disso, o Autoptimize permite o cache de recursos minificados em disco ou em CDN e salvar ativos otimizados como arquivos est\u00e1ticos. Para encontrar as melhores configura\u00e7\u00f5es para o seu site WordPress, voc\u00ea pode seguir nosso <a href=\"https:\/\/kinsta.com\/pt\/blog\/configuracoes-do-autoptimize\/\" target=\"_blank\" rel=\"noopener noreferrer\">guia detalhado do Autoptimize bem aqui<\/a>.<\/p>\n<p>Outros plugins de otimiza\u00e7\u00e3o que voc\u00ea pode querer tentar:<\/p>\n<ul>\n<li><a href=\"https:\/\/wordpress.org\/plugins\/minify-html-markup\/\" target=\"_blank\" rel=\"noopener noreferrer\">Minify HTML Markup<\/a><\/li>\n<li><a href=\"https:\/\/wordpress.org\/plugins\/wp-super-minify\/\" target=\"_blank\" rel=\"noopener noreferrer\">WP Super Minify<\/a><\/li>\n<li><a href=\"https:\/\/wordpress.org\/plugins\/fast-velocity-minify\/\" target=\"_blank\" rel=\"noopener noreferrer\">Fast Velocity Minify<\/a><\/li>\n<li><a href=\"https:\/\/wordpress.org\/plugins\/jch-optimize\/\" target=\"_blank\" rel=\"noopener noreferrer\">JCH Optimize<\/a><\/li>\n<\/ul>\n<h3>Swift Performance<\/h3>\n<p><a href=\"https:\/\/swteplugins.com\/product\/swift-performance\/\" target=\"_blank\" rel=\"noopener noreferrer\">O Swift Performance<\/a> \u00e9 outro plugin que voc\u00ea pode querer verificar. Este \u00e9 um plugin premium que pode ajudar a aumentar as suas pontua\u00e7\u00f5es de desempenho e foi desenvolvido especificamente para o ajudar a tentar alcan\u00e7ar aquelas <a href=\"https:\/\/kinsta.com\/pt\/blog\/google-pagespeed-insights\/\">100\/100 pontua\u00e7\u00f5es do Google PageSpeed Insights<\/a>.<\/p>\n<figure id=\"attachment_15045\" aria-describedby=\"caption-attachment-15045\" style=\"width: 1539px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/swteplugins.com\/product\/swift-performance\/\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-15045 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2017\/11\/swift-performance-wordpress-plugin.png\" alt=\"Swift Performance WordPress plugin\" width=\"1539\" height=\"495\"><\/a><figcaption id=\"caption-attachment-15045\" class=\"wp-caption-text\">Swift Performance WordPress plugin<\/figcaption><\/figure>\n<p>Algumas das suas principais caracter\u00edsticas incluem:<\/p>\n<ul>\n<li>Voc\u00ea n\u00e3o s\u00f3 pode minificar e combinar arquivos CSS e javascript, mas tamb\u00e9m pode<strong> criar CSS cr\u00edticos na hora<\/strong> para as suas p\u00e1ginas.<\/li>\n<li>Caching inteligente, assim como AJAX e solicita\u00e7\u00f5es din\u00e2micas.<\/li>\n<li>Compress\u00e3o de imagem sem perdas incorporada.<\/li>\n<li>Suporte CDN.<\/li>\n<\/ul>\n<p>Voc\u00ea encontrar\u00e1 uma vis\u00e3o mais profunda nos plugins de otimiza\u00e7\u00e3o do WordPress em <a href=\"https:\/\/kinsta.com\/pt\/blog\/bloqueio-de-renderizacao-no-wordpress\/\" target=\"_blank\" rel=\"noopener noreferrer\">Como eliminar o Render-Blocking JavaScript e CSS<\/a><\/p>\n<h2>Conclus\u00f5es<\/h2>\n<p>A Otimiza\u00e7\u00e3o do Caminho de Renderiza\u00e7\u00e3o Cr\u00edtica \u00e9 um processo de melhoria e medi\u00e7\u00e3o que requer uma compreens\u00e3o clara de cada tarefa que o navegador executa para converter o c\u00f3digo em pixels e assim renderizar uma p\u00e1gina na tela. Voc\u00ea pode saber mais sobre o Critical Rendering Path no <a href=\"https:\/\/developers.google.com\/web\/fundamentals\/performance\/critical-rendering-path\/\" target=\"_blank\" rel=\"noopener noreferrer\">guia de otimiza\u00e7\u00e3o do Google<\/a>.<\/p>\n<p>Aqui na Kinsta Blog, n\u00f3s tentamos cobrir qualquer aspecto da otimiza\u00e7\u00e3o de desempenho. Aqui est\u00e1 uma lista de outras leituras:<\/p>\n<ul>\n<li><a href=\"https:\/\/kinsta.com\/pt\/blog\/latencia-de-rede\/\" target=\"_blank\" rel=\"noopener noreferrer\">Network Latency &#8211; Comparando o impacto em seu site WordPress<\/a><\/li>\n<li><a href=\"https:\/\/kinsta.com\/pt\/blog\/cdn-para-wordpress\/\" target=\"_blank\" rel=\"noopener noreferrer\">WordPress CDN &#8211; Por que voc\u00ea deveria estar usando um<\/a><\/li>\n<li><a href=\"https:\/\/kinsta.com\/pt\/blog\/otimizar-imagens-para-web\/\" target=\"_blank\" rel=\"noopener noreferrer\">Como Optimizar Imagens para Web e Desempenho<\/a><\/li>\n<li><a href=\"https:\/\/kinsta.com\/pt\/blog\/ttfb\/\" target=\"_blank\" rel=\"noopener noreferrer\">Como reduzir o TTFB para melhorar os tempos de carregamento da p\u00e1gina do WordPress<\/a><\/li>\n<li><a href=\"https:\/\/kinsta.com\/pt\/blog\/teste-de-velocidade-gtmetrix\/\" target=\"_blank\" rel=\"noopener noreferrer\">Um mergulho profundo na ferramenta de teste de velocidade GTmetrix<\/a><\/li>\n<li><a href=\"https:\/\/kinsta.com\/pt\/blog\/teste-de-velocidade-do-seu-site\/\" target=\"_blank\" rel=\"noopener noreferrer\">14 Ferramentas Gr\u00e1tis de Teste de Velocidade de Website para Usu\u00e1rios do WordPress<\/a><\/li>\n<li><a href=\"https:\/\/kinsta.com\/pt\/blog\/plugins-de-desempenho-para-wordpress\/\" target=\"_blank\" rel=\"noopener noreferrer\">8 Plugins de Desempenho WordPress de Menor Difus\u00e3o (mas \u00dateis)<\/a><\/li>\n<li><a href=\"https:\/\/kinsta.com\/pt\/blog\/google-pagespeed-insights\/\" target=\"_blank\" rel=\"noopener noreferrer\">Como pontuar 100\/100 no Google PageSpeed Insights com WordPress<\/a><\/li>\n<\/ul>\n<p><em>Quanto tempo demora para optimizar o Caminho Cr\u00edtico de Renderiza\u00e7\u00e3o dos seus sites? E quais s\u00e3o os aspectos do processo de otimiza\u00e7\u00e3o que voc\u00ea mais deve dominar? Informe-nos nos coment\u00e1rios abaixo.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>O Caminho de Renderiza\u00e7\u00e3o Cr\u00edtica \u00e9 a sequ\u00eancia de tarefas que o navegador executa para primeiro renderizar uma p\u00e1gina na tela, ou seja, para baixar, processar &#8230;<\/p>\n","protected":false},"author":36,"featured_media":34860,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[27,30],"topic":[1032,1026],"class_list":["post-34842","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-webperf","tag-wordpress","topic-desempenho-do-wordpress","topic-desenvolvimento-wordpress"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.6 (Yoast SEO v24.6) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Como Optimizar o Caminho de Renderiza\u00e7\u00e3o Cr\u00edtica no WordPress<\/title>\n<meta name=\"description\" content=\"O Critical Rendering Path \u00e9 a seq\u00fc\u00eancia de tarefas que o navegador executa para renderizar uma p\u00e1gina na tela. Porque \u00e9 cr\u00edtico e como podemos optimiz\u00e1-lo?\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinsta.com\/pt\/blog\/caminho-de-renderizacao-critica\/\" \/>\n<meta property=\"og:locale\" content=\"pt_PT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Como Optimizar o Caminho de Renderiza\u00e7\u00e3o Cr\u00edtica no WordPress\" \/>\n<meta property=\"og:description\" content=\"O Critical Rendering Path \u00e9 a seq\u00fc\u00eancia de tarefas que o navegador executa para renderizar uma p\u00e1gina na tela. Porque \u00e9 cr\u00edtico e como podemos optimiz\u00e1-lo?\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/pt\/blog\/caminho-de-renderizacao-critica\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinstapt\/\" \/>\n<meta property=\"article:published_time\" content=\"2020-02-05T08:41:31+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-02-20T09:45:25+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2020\/02\/caminho-da-renderizacao-cr\u00edtica.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"730\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Carlo Daniele\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"O Critical Rendering Path \u00e9 a seq\u00fc\u00eancia de tarefas que o navegador executa para renderizar uma p\u00e1gina na tela. Porque \u00e9 cr\u00edtico e como podemos optimiz\u00e1-lo?\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2020\/02\/caminho-da-renderizacao-cr\u00edtica.png\" \/>\n<meta name=\"twitter:creator\" content=\"@carlodaniele\" \/>\n<meta name=\"twitter:site\" content=\"@kinsta_pt\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Carlo Daniele\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tempo estimado de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"17 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/caminho-de-renderizacao-critica\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/caminho-de-renderizacao-critica\/\"},\"author\":{\"name\":\"Carlo Daniele\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63\"},\"headline\":\"Como Optimizar o Caminho de Renderiza\u00e7\u00e3o Cr\u00edtica no WordPress\",\"datePublished\":\"2020-02-05T08:41:31+00:00\",\"dateModified\":\"2025-02-20T09:45:25+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/caminho-de-renderizacao-critica\/\"},\"wordCount\":3631,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/caminho-de-renderizacao-critica\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2020\/02\/caminho-da-renderizacao-cr\u00edtica.png\",\"keywords\":[\"webperf\",\"WordPress\"],\"articleSection\":[\"Tutoriais de Desempenho do WordPress\"],\"inLanguage\":\"pt-PT\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/pt\/blog\/caminho-de-renderizacao-critica\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/caminho-de-renderizacao-critica\/\",\"url\":\"https:\/\/kinsta.com\/pt\/blog\/caminho-de-renderizacao-critica\/\",\"name\":\"Como Optimizar o Caminho de Renderiza\u00e7\u00e3o Cr\u00edtica no WordPress\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/caminho-de-renderizacao-critica\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/caminho-de-renderizacao-critica\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2020\/02\/caminho-da-renderizacao-cr\u00edtica.png\",\"datePublished\":\"2020-02-05T08:41:31+00:00\",\"dateModified\":\"2025-02-20T09:45:25+00:00\",\"description\":\"O Critical Rendering Path \u00e9 a seq\u00fc\u00eancia de tarefas que o navegador executa para renderizar uma p\u00e1gina na tela. Porque \u00e9 cr\u00edtico e como podemos optimiz\u00e1-lo?\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/caminho-de-renderizacao-critica\/#breadcrumb\"},\"inLanguage\":\"pt-PT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/pt\/blog\/caminho-de-renderizacao-critica\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/caminho-de-renderizacao-critica\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2020\/02\/caminho-da-renderizacao-cr\u00edtica.png\",\"contentUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2020\/02\/caminho-da-renderizacao-cr\u00edtica.png\",\"width\":1460,\"height\":730,\"caption\":\"Caminho da Renderiza\u00e7\u00e3o Cr\u00edtica\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/caminho-de-renderizacao-critica\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/pt\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Desempenho do WordPress\",\"item\":\"https:\/\/kinsta.com\/pt\/topicos\/desempenho-do-wordpress\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Como Optimizar o Caminho de Renderiza\u00e7\u00e3o Cr\u00edtica no WordPress\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/pt\/#website\",\"url\":\"https:\/\/kinsta.com\/pt\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Solu\u00e7\u00f5es de hospedagem Premium, r\u00e1pida e segura\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/pt\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-PT\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/pt\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/pt\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinstapt\/\",\"https:\/\/x.com\/kinsta_pt\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63\",\"name\":\"Carlo Daniele\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/429e5568f88110fd9a409b84cb22197e?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/429e5568f88110fd9a409b84cb22197e?s=96&d=mm&r=g\",\"caption\":\"Carlo Daniele\"},\"description\":\"Carlo is a passionate lover of webdesign and front-end development. He has been playing with WordPress for more than 20 years, also in collaboration with Italian and European universities and educational institutions. He has written hundreds of articles and guides about WordPress, published both on Italian and international websites, as well as on printed magazines. You can find him on LinkedIn.\",\"sameAs\":[\"https:\/\/frammentidicodice.com\/\",\"https:\/\/x.com\/carlodaniele\"],\"url\":\"https:\/\/kinsta.com\/pt\/blog\/author\/carlodaniele\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Como Optimizar o Caminho de Renderiza\u00e7\u00e3o Cr\u00edtica no WordPress","description":"O Critical Rendering Path \u00e9 a seq\u00fc\u00eancia de tarefas que o navegador executa para renderizar uma p\u00e1gina na tela. Porque \u00e9 cr\u00edtico e como podemos optimiz\u00e1-lo?","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinsta.com\/pt\/blog\/caminho-de-renderizacao-critica\/","og_locale":"pt_PT","og_type":"article","og_title":"Como Optimizar o Caminho de Renderiza\u00e7\u00e3o Cr\u00edtica no WordPress","og_description":"O Critical Rendering Path \u00e9 a seq\u00fc\u00eancia de tarefas que o navegador executa para renderizar uma p\u00e1gina na tela. Porque \u00e9 cr\u00edtico e como podemos optimiz\u00e1-lo?","og_url":"https:\/\/kinsta.com\/pt\/blog\/caminho-de-renderizacao-critica\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinstapt\/","article_published_time":"2020-02-05T08:41:31+00:00","article_modified_time":"2025-02-20T09:45:25+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2020\/02\/caminho-da-renderizacao-cr\u00edtica.png","type":"image\/png"}],"author":"Carlo Daniele","twitter_card":"summary_large_image","twitter_description":"O Critical Rendering Path \u00e9 a seq\u00fc\u00eancia de tarefas que o navegador executa para renderizar uma p\u00e1gina na tela. Porque \u00e9 cr\u00edtico e como podemos optimiz\u00e1-lo?","twitter_image":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2020\/02\/caminho-da-renderizacao-cr\u00edtica.png","twitter_creator":"@carlodaniele","twitter_site":"@kinsta_pt","twitter_misc":{"Escrito por":"Carlo Daniele","Tempo estimado de leitura":"17 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/pt\/blog\/caminho-de-renderizacao-critica\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/pt\/blog\/caminho-de-renderizacao-critica\/"},"author":{"name":"Carlo Daniele","@id":"https:\/\/kinsta.com\/pt\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63"},"headline":"Como Optimizar o Caminho de Renderiza\u00e7\u00e3o Cr\u00edtica no WordPress","datePublished":"2020-02-05T08:41:31+00:00","dateModified":"2025-02-20T09:45:25+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/pt\/blog\/caminho-de-renderizacao-critica\/"},"wordCount":3631,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/pt\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/pt\/blog\/caminho-de-renderizacao-critica\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2020\/02\/caminho-da-renderizacao-cr\u00edtica.png","keywords":["webperf","WordPress"],"articleSection":["Tutoriais de Desempenho do WordPress"],"inLanguage":"pt-PT","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/pt\/blog\/caminho-de-renderizacao-critica\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/pt\/blog\/caminho-de-renderizacao-critica\/","url":"https:\/\/kinsta.com\/pt\/blog\/caminho-de-renderizacao-critica\/","name":"Como Optimizar o Caminho de Renderiza\u00e7\u00e3o Cr\u00edtica no WordPress","isPartOf":{"@id":"https:\/\/kinsta.com\/pt\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/pt\/blog\/caminho-de-renderizacao-critica\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/pt\/blog\/caminho-de-renderizacao-critica\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2020\/02\/caminho-da-renderizacao-cr\u00edtica.png","datePublished":"2020-02-05T08:41:31+00:00","dateModified":"2025-02-20T09:45:25+00:00","description":"O Critical Rendering Path \u00e9 a seq\u00fc\u00eancia de tarefas que o navegador executa para renderizar uma p\u00e1gina na tela. Porque \u00e9 cr\u00edtico e como podemos optimiz\u00e1-lo?","breadcrumb":{"@id":"https:\/\/kinsta.com\/pt\/blog\/caminho-de-renderizacao-critica\/#breadcrumb"},"inLanguage":"pt-PT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/pt\/blog\/caminho-de-renderizacao-critica\/"]}]},{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinsta.com\/pt\/blog\/caminho-de-renderizacao-critica\/#primaryimage","url":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2020\/02\/caminho-da-renderizacao-cr\u00edtica.png","contentUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2020\/02\/caminho-da-renderizacao-cr\u00edtica.png","width":1460,"height":730,"caption":"Caminho da Renderiza\u00e7\u00e3o Cr\u00edtica"},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/pt\/blog\/caminho-de-renderizacao-critica\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/pt\/"},{"@type":"ListItem","position":2,"name":"Desempenho do WordPress","item":"https:\/\/kinsta.com\/pt\/topicos\/desempenho-do-wordpress\/"},{"@type":"ListItem","position":3,"name":"Como Optimizar o Caminho de Renderiza\u00e7\u00e3o Cr\u00edtica no WordPress"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/pt\/#website","url":"https:\/\/kinsta.com\/pt\/","name":"Kinsta\u00ae","description":"Solu\u00e7\u00f5es de hospedagem Premium, r\u00e1pida e segura","publisher":{"@id":"https:\/\/kinsta.com\/pt\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/pt\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-PT"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/pt\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/pt\/","logo":{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinstapt\/","https:\/\/x.com\/kinsta_pt","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinsta.com\/pt\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63","name":"Carlo Daniele","image":{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinsta.com\/pt\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/429e5568f88110fd9a409b84cb22197e?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/429e5568f88110fd9a409b84cb22197e?s=96&d=mm&r=g","caption":"Carlo Daniele"},"description":"Carlo is a passionate lover of webdesign and front-end development. He has been playing with WordPress for more than 20 years, also in collaboration with Italian and European universities and educational institutions. He has written hundreds of articles and guides about WordPress, published both on Italian and international websites, as well as on printed magazines. You can find him on LinkedIn.","sameAs":["https:\/\/frammentidicodice.com\/","https:\/\/x.com\/carlodaniele"],"url":"https:\/\/kinsta.com\/pt\/blog\/author\/carlodaniele\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts\/34842","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/users\/36"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/comments?post=34842"}],"version-history":[{"count":13,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts\/34842\/revisions"}],"predecessor-version":[{"id":50589,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts\/34842\/revisions\/50589"}],"alternate":[{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/34842\/translations\/es"},{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/34842\/translations\/en"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/34842\/translations\/fr"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/34842\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/34842\/translations\/pt"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/34842\/translations\/de"},{"href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/34842\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/media\/34860"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/media?parent=34842"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/tags?post=34842"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/topic?post=34842"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}