O Caminho de Renderização Crítica é a sequência de tarefas que o navegador executa para primeiro renderizar uma página na tela, ou seja, para baixar, processar e converter código HTML, CSS e JavaScript em pixels reais, e pintá-los na tela.

A Otimização do Caminho de Renderização Crítica é o processo de minimizar o tempo gasto pelo navegador para realizar cada etapa da seqüência priorizando a exibição do conteúdo relacionado com a ação atual do usuário.

Grande parte deste processo diz respeito à parte da página que é visível sem rolar pela janela do navegador. Essa seção também é conhecida como Above the Fold. Para uma melhor usabilidade, a ATF deve ser entregue o mais rápido possível, e isto pode ser feito reduzindo ao mínimo o número de viagens de ida e volta da rede. Os recursos necessários para renderizar a ATF são considerados críticos, e otimizar o Above the Fold significa minimizar o impacto dos recursos críticos no tempo para a primeira renderização da página.

Neste post, vamos caminhar pela seqüência de otimização do Critical Rendering Path.

A Sequência do Caminho de Renderização Crítica

Aqui está a sequência de passos executados pelo navegador para renderizar uma página:

O DOM

Como bem explicado no guia Optimização do Caminho de Renderização Crítica do Google, o browser constrói o Modelo de Objetos de Documento numa sequência de quatro passos:

O que é importante notar aqui é que o navegador constrói o DOM de forma incremental. Isto dá-nos a oportunidade de acelerar a renderização da página através da criação de estruturas DOM eficientes.

Estrutura CSSOM

Estrutura CSSOM

O CSSOM

Quando o analisador encontra uma tag de link 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ça a construir uma estrutura de dados em árvore dos nós CSS.

Ao contrário da construção DOM, a construção CSSOM não é incremental. O navegador não 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ção até receber e analisar todo o CSS. Isto significa que o CSS está a tornar o bloqueio.

Estrutura CSSOM

Estrutura CSSOM

A árvore de Renderização

O navegador combina DOM e CSSOM na árvore de renderização, que é a estrutura de árvore final contendo todos os nós e propriedades que estão sendo usados para renderizar a página para a tela.

A árvore de Renderização contém apenas os nós necessários para renderizar uma página. Como consequência, os nós invisíveis são omitidos.

O navegador usa a árvore de Renderização para calcular as dimensões e a posição do nó e, finalmente, como um input para o processo de pintura.

Estrutura da árvore de renderização

Estrutura da árvore de renderização

Layout e Pintura

Na etapa de layout, o navegador calcula as dimensões e a posição de cada nó da árvore de Renderização. Nesta fase, o navegador atravessa a árvore Render a partir da sua raiz e produz um modelo de caixa. Esta informação é finalmente utilizada para converter cada nó da árvore de renderização em pixels reais na tela.

Otimização do Caminho de Renderização Crítica

O tempo necessário para executar o processo inteiro pode ser variável. Depende de muitos fatores como o tamanho do documento, o número de pedidos, os estilos aplicados, o dispositivo do usuário, etc.
Uma das recomendações mais relevantes do Google é priorizar o conteúdo visível de modo a tornar o Above the Fold o mais rápido possível, e fornece duas regras principais a seguir:

Como bem explicado no guia PageSpeed do Google, se a quantidade de dados necessários para renderizar a ATF exceder a janela inicial de congestionamento (14,6kb), será necessário fazer viagens adicionais de ida e volta à rede entre o servidor e o navegador. Em redes móveis, com altas latências, isso atrasaria significativamente o carregamento da página (leia-se more on latency).
O browser constrói o DOM de forma incremental, e isto dá-nos a oportunidade de reduzir o tempo necessário para renderizar a ATF, estruturando o HTML de modo a carregar primeiro o acima-dobrável e adiar o resto da página.

Acima do conteúdo do Fold

Acima do conteúdo do Fold varia de acordo com o dispositivo do usuário

Mas a otimização não termina com a construção de uma estrutura DOM eficaz. Ao contrário, é um processo de melhoria e medição que envolve toda a sequência do Critical Rendering Path.

Vamos mergulhar fundo.

Minimizar as dimensões dos recursos

Podemos reduzir a quantidade de dados que o navegador vai baixar, minificando, comprimindo e armazenando em cache recursos HTML, CSS e JavaScript:

Optimize o CSS

Agora sabemos que o navegador tem que esperar até que ele pegue e processe o código CSS antes que ele possa renderizar a página (CSS é o bloqueio de renderização). Mas nem todos os recursos do CSS estão a bloquear a renderização.
O CSS pode ser escopo para condições particulares, e podemos otimizá-lo usando tipos de mídia e consultas de mídia. Se você estiver visualizando uma página na tela, o navegador enviará um pedido de tipo de mídia impressa, mas não bloqueará a renderização da página para este recurso.
Pegue a seguinte etiqueta de link:

<link rel="stylesheet" href="style.css" />

A folha de estilo referenciada desta etiqueta aplica-se em qualquer condição, independentemente do tipo de mídia atual, resolução de tela, orientação do dispositivo, etc. Isto significa que o recurso CSS está sempre em bloqueio de renderização.
Felizmente, podemos enviar um pedido para um recurso CSS sob condições específicas. Podemos mover estilos de impressão para um arquivo separado e usar o atributo de mídia para dizer ao navegador que a folha de estilo especificada só deve ser carregada ao imprimir a página, e não precisa bloquear a renderização na tela:

<link rel="stylesheet" href="print.css" media="print" />

O navegador ainda faz o download da folha de estilo print.css, mas ela não bloqueia a renderização. Além 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ídia no atributo do link, para que possamos dividir o CSS em vários arquivos e carregá-los condicionalmente:

<link rel="stylesheet" href="style.css" media="screen" />
<link rel="stylesheet" href="portrait.css" media="orientation:portrait" />
<link rel="stylesheet" href="widescreen.css" media="(min-width: 42rem)" />

Certifique-se de que os seus estilos são realmente necessários para renderizar a página. Se não estiverem, você pode adicionar um valor apropriado ao atributo media tag e desbloquear a renderização.

Tipos de mídia e consultas podem nos ajudar a acelerar a renderização da página, mas nós podemos fazer muito mais.

Aceleração do Layout e Processos de Pintura

O tempo despendido pelo navegador para fazer o layout do documento depende do número de elementos DOM a serem layoutados e da complexidade desses layouts.

O tamanho e a posição dos elementos de computação leva tempo e reduz o desempenho. Tornar o DOM o mais simples possível, e evitar o uso do JavaScript para antecipar o processo de layout ajudaria o navegador a acelerar a renderização da página (ler more on layout optimization).

Estritamente ligado ao Layout está o processo de Pintura, que é provavelmente a etapa mais demorada na sequência do Caminho de Renderização Crítica, porque sempre que você muda o layout de um elemento ou qualquer propriedade não geométrica, o navegador aciona um evento de pintura. Tornar as coisas tão simples quanto possível nesta fase pode ajudar o navegador a acelerar o processo de pintura. Por exemplo, uma propriedade de box shadow, que requer algum tipo de cálculo, levaria mais tempo para pintar do que uma cor de borda sólida.

DevTools cromados permitem identificar as porções da página que estão sendo pintadas

DevTools cromados permitem identificar as porções da página que estão sendo pintadas

A otimização do processo de pintura pode não ser tão fácil, e você 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ê pode ler mais sobre este tópico no guia de desempenho do Google Rendering Performance.

Faça o desbloqueio do JavaScript

Quando o navegador encontra uma tag de script, ele tem que parar de analisar o código HTML. Os scripts em linha são executados no ponto exato em que estão no documento e bloqueiam a construção do DOM até o motor JS terminar de funcionar. Em outras palavras, o JavaScript em linha pode atrasar significativamente a renderização inicial da página. Mas o JavaScript também permite manipular as propriedades do CSS, então o navegador tem que pausar a execução do script até que ele tenha terminado de baixar e construir o CSSOM, também. Isto significa que o JavaScript é um bloqueio de parser.
No caso de arquivos JS externos, o analisador também deve esperar até que o recurso tenha sido buscado no cache ou no servidor remoto, o que pode atrasar bastante o tempo para a primeira renderização da página.
Dito isto, o que podemos fazer para minimizar o tempo gasto pelo navegador para carregar e executar o JavaScript?

Regras de Otimização de Embalagem

Isso é muita coisa, não é? Vamos respirar fundo e escrever uma lista das ações de otimização descritas até agora.

Agora que conhecemos os conceitos básicos da Critical Rendering Path Optimization, podemos dar uma olhada em alguns plugins de otimização populares do WordPress.

Otimizando o Caminho Crítico de Renderização no WordPress

Os usuários do WordPress podem tirar proveito de vários plugins que cobrem quase todos os aspectos do processo de otimização. Você pode instalar um plugin completo, ou pode instalar vários plugins ao mesmo tempo, cada um fornecendo recursos de otimização específicos.

Se o seu site é hospedado pela Kinsta, você não precisará de um plugin de cache porque não há necessidade de plugins de cache do WordPress na Kinsta.

W3 Total Cache

Este único plugin cobre quase todas as etapas do processo de otimização do Caminho de Renderização Crítica. À primeira vista, a configuração do plugin pode ser esmagadora, mas uma vez que você se familiarizar mais com a sequência do Critical Rendering Path, você será capaz de tirar proveito de um poderoso conjunto de ferramentas de desempenho.

W3 Total Cache WordPress plugin

W3 Total Cache WordPress plugin

Aqui está uma lista de alguns recursos de plugin:

Estas são apenas algumas das muitas características do W3TC. Você pode ler mais na página do plugin do WordPress.org.

W3 Total Cache JavaScript minify settings

W3 Total Cache JavaScript minify settings

WP Super Cache

O WP Super Cache é outro plugin popular para o desempenho do site.

Lutando com tempo de inatividade e problemas no WordPress? Kinsta é a solução de hospedagem projetada para economizar seu tempo! Confira nossos recursos
WP Super Cache WordPress plugin

WP Super Cache WordPress plugin

Ele vem com um bom número de recursos de otimização, mas é menos abrangente do que o W3 Total Cache anterior e pode parecer mais acessível para usuários iniciantes e intermediários.

WordPress Super Cache tester

WordPress Super Cache tester

Basicamente, fornece recursos de cache e compressão HTTP, mas carece de minificação de recursos e otimização JavaScript com atributos async e defer. No entanto, mais de um milhão de instalações ativas provam que o plugin vale a pena tentar.

GZIP opção em WP Super Cache

GZIP opção em WP Super Cache

Autoptimize

Com mais de 400.000 instalações ativas, o Autoptimize é um dos plugins gratuitos mais populares para minificação.

Autoptimize WordPress plugin

Autoptimize WordPress plugin

Ele vem com uma página de opções dividida em várias seções onde o administrador do site pode configurar separadamente a minificação HTML, CSS e JavaScript.

Otimizar automaticamente a opção de otimização HTML

Otimizar automaticamente a opção de otimização HTML

Você também pode agregar scripts ou folhas de estilo independentes e definir exceções para recursos específicos. Além disso, o Autoptimize permite o cache de recursos minificados em disco ou em CDN e salvar ativos otimizados como arquivos estáticos.

Acima da Otimização de Dobras

Este plugin fornece um conjunto abrangente de ferramentas para a otimização Above the Fold. É uma ferramenta para profissionais e usuários avançados com o objetivo de pontuar 100/100 no teste Google PageSpeed.

Above the Fold Optimization WordPress plugin

Above the Fold Optimization WordPress plugin

Aqui estão algumas das características mais interessantes:

Ferramentas CSS críticas:

Otimização da carga do CSS:

Otimização da carga JS:

Além disso, o plugin fornece suporte para o Google Progressive Web App e para a otimização de fontes Web do Google. Outros plugins de otimização que você pode querer tentar:

Swift Performance

O Swift Performance é outro plugin que você pode querer verificar. Este é um plugin premium que pode ajudar a aumentar as suas pontuações de desempenho e foi desenvolvido especificamente para o ajudar a tentar alcançar aquelas 100/100 pontuações do Google PageSpeed Insights.

Swift Performance WordPress plugin

Swift Performance WordPress plugin

Algumas das suas principais características incluem:

Você encontrará uma visão mais profunda nos plugins de otimização do WordPress em Como eliminar o Render-Blocking JavaScript e CSS

Conclusões

A Otimização do Caminho de Renderização Crítica é um processo de melhoria e medição que requer uma compreensão clara de cada tarefa que o navegador executa para converter o código em pixels e assim renderizar uma página na tela. Você pode saber mais sobre o Critical Rendering Path no guia de otimização do Google.

Aqui na Kinsta Blog, nós tentamos cobrir qualquer aspecto da otimização de desempenho. Aqui está uma lista de outras leituras:

Quanto tempo demora para optimizar o Caminho Crítico de Renderização dos seus sites? E quais são os aspectos do processo de otimização que você mais deve dominar? Informe-nos nos comentários abaixo.


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