Caminho crítico de renderização: o que é e como otimizá-lo

Quando falamos em fornecer aos usuários uma experiência ultrarrápida na Web, geralmente nos concentramos apenas no que nós, como proprietários de sites e desenvolvedores da Web, devemos fazer.

Mas a verdade é:

Oferecer uma experiência rápida na Web também exige muito trabalho do navegador.

Ele recebe nossos arquivos HTML, CSS e JavaScript e executa etapas específicas para convertê-los em pixels na tela.

O segredo para acelerar seu desempenho está em entender o que acontece entre o recebimento dos recursos e seu processamento para transformá-los em pixels renderizados.

Esse processo também é conhecido como caminho crítico de renderização (CRP) .

E neste artigo, você aprenderá tudo o que precisa saber sobre o CRP e como otimizá-lo para uma renderização mais rápida.

• O que é caminho de renderização crítico?
• A sequência do caminho crítico de renderização explicada
• Como otimizar o caminho crítico de renderização do seu site
• 3 plugins do WordPress para otimizar seu CRP
• Lista de verificação de otimização de CRP

Vamos começar!

O que é caminho de renderização crítico?

O caminho crítico de renderização refere-se à sequência de etapas que um navegador da Web executa para converter o código HTML, CSS e JavaScript em uma representação visual na tela do usuário.

Envolve uma série de processos, como construir o Document Object Model (DOM), gerar o CSS Object Model (CSSOM) e combinar ambos para criar a Render Tree. A árvore de renderização é então usada para calcular o layout e pintar os pixels na tela do usuário.

A otimização do Critical Rendering Path, por outro lado, refere-se à redução do tempo gasto pelo navegador da Web para executar cada etapa da sequência, priorizando o conteúdo relevante para a ação atual do usuário.

Para garantir que seus esforços de otimização acertem em cheio, você precisa ter uma compreensão profunda de cada etapa da sequência. Portanto, os próximos parágrafos são essenciais e recomendamos fortemente sua leitura antes de agir.

Explicação da sequência crítica do caminho de renderização

Aqui está uma rápida visão geral das etapas executadas pelo navegador ao renderizar uma página:

1. O navegador baixa e analisa a marcação HTML e cria o DOM.
2. Em seguida, ele baixa e processa a marcação CSS e constrói o CSS Object Model (CSSOM).
3. Em seguida, combina os nós necessários do DOM e do CSSOM para criar a Render Tree, uma estrutura em árvore de todos os nós visíveis necessários para renderizar a página.
4. Ele calcula as dimensões e a posição de cada elemento na página por meio do processo de Layout.
5. Finalmente, o navegador pinta os pixels na tela.

Agora vamos focar em cada etapa.

o DOM

O Document Object Model (DOM) é a representação interna do navegador do documento HTML.

Quando uma página da Web é carregada, o navegador analisa o HTML e cria uma estrutura semelhante a uma árvore de nós que representam os elementos no documento. Cada nó corresponde a um elemento HTML e possui propriedades que descrevem seus atributos, conteúdo e posição na árvore.

Importante: O navegador constrói o DOM gradativamente, permitindo otimizar a renderização da página construindo uma estrutura eficiente e evitando tamanhos excessivos de DOM.

O CSSOM

Enquanto o DOM contém todo o conteúdo da página, o CSSOM inclui todas as informações sobre como estilizar o DOM.

Outra diferença entre DOM e CSSOM é que:

A construção do DOM é gradual, enquanto o CSSOM não é.

Quando um site é carregado, o navegador precisa processar o CSS para aplicar os estilos. Ao contrário do HTML, que pode ser processado pouco a pouco, o CSS precisa ser processado de uma só vez. Isso ocorre porque alguns estilos podem ser substituídos por outros posteriormente no arquivo CSS, portanto, o navegador precisa esperar até ler todo o arquivo CSS antes de decidir quais estilos aplicar.

Isso é feito para evitar a exibição de estilos que serão substituídos posteriormente e desperdiçar recursos.

Simplificando:

O navegador bloqueia o processo de renderização até receber e analisar todo o CSS.

É por isso que o CSS é considerado um recurso de bloqueio de renderização.

A árvore de renderização

A árvore de renderização é a combinação do DOM e CSSOM que o navegador usa para criar a representação visual da página da web.

O navegador usa a árvore de renderização para calcular as dimensões e a posição do nó como entrada para o processo de pintura.

Importante: Somente o conteúdo visível é capturado na árvore de renderização. Normalmente, a seção de cabeçalho não contém informações visíveis e, portanto, é excluída. Além disso, se um elemento tiver uma propriedade display:none , nem o elemento nem seus descendentes serão incluídos na árvore de renderização.

Disposição

Após a construção da árvore de renderização, a próxima etapa é o layout. O layout estabelece o posicionamento e a orientação de cada elemento na página, definindo suas dimensões, posição e inter-relações.

Mas é o seguinte:

O desempenho do layout é afetado pelo DOM.

Em outras palavras:

Quanto maior o número de nós DOM, mais longo é o processo de layout.

Pintar

A etapa final é a pintura dos pixels na tela, que segue a criação da árvore de renderização e do layout.

Inicialmente, toda a tela é pintada durante o processo de carregamento. Posteriormente, apenas as partes afetadas da tela são repintadas, pois os navegadores são projetados para repintar apenas a área necessária.

Lembre-se de que a duração do estágio de pintura depende da natureza das atualizações implementadas na árvore de renderização.

Agora vamos ver quais otimizações você pode aplicar para ajudar o navegador e acelerar alguns dos processos.

Como otimizar o caminho de renderização crítico do seu site

O tempo necessário para o navegador executar todo o processo pode variar. Existem muitas partes móveis que contribuem para o comprimento do caminho crítico:

• Tamanho do documento
• Número de solicitações
• Dispositivo do usuário
• Estilos aplicados

No entanto, existem três técnicas que são consideradas as melhores opções quando se trata de otimização de CRP:

1. Minimize o número de recursos críticos adiando os não críticos ou eliminando-os completamente
2. Otimize o número de solicitações necessárias junto com o tamanho do arquivo de cada solicitação
3. Priorize o download de ativos críticos, reduzindo assim o comprimento do caminho crítico

Vamos nos aprofundar um pouco mais em como implementar cada uma das estratégias de otimização recomendadas:

Otimize os recursos CSS e JS de bloqueio de renderização

Você já sabe que quando o navegador encontra recursos CSS e JS de bloqueio de renderização, ele deve baixá-los, analisá-los e executá-los antes de fazer qualquer outra coisa, incluindo a renderização.

Quando se trata de otimizar CSS, você pode implementar as seguintes técnicas:

• CSS crítico. Ele identifica o conjunto mínimo de regras CSS necessárias para renderizar a parte visível de uma página da Web e as entrega ao navegador como CSS embutido, em vez de carregar uma folha de estilo completa. Ao carregar apenas o CSS necessário para o conteúdo acima da dobra, o navegador pode renderizar a página mais rapidamente e melhorar a experiência do usuário . Isso ocorre porque o navegador não precisa esperar que toda a folha de estilo seja carregada antes de renderizar a página.
  
• Combine arquivos CSS. A concatenação CSS é o processo de combinar vários arquivos CSS em um único arquivo. Essa técnica melhora o desempenho reduzindo o número de solicitações HTTP necessárias para carregar uma página da Web , pois o navegador só precisa baixar e analisar um único arquivo CSS em vez de vários.

Em termos de seus arquivos JavaScript, veja o que você pode fazer:

• Atrasa o carregamento do JS. Adiar o carregamento JS é uma técnica que irá acelerar o seu site atrasando o carregamento de arquivos JavaScript até que o documento HTML tenha sido carregado e analisado . Você pode usar o atributo defer na tag de script que faz referência ao arquivo JS. É importante observar que o atributo defer deve ser usado apenas para arquivos JS que não precisam ser executados imediatamente após o carregamento (por exemplo, arquivos que são usados ​​apenas em páginas específicas), pois a ordem de execução pode ser imprevisível se vários scripts adiados são usados.
  
• Carrega JS de forma assíncrona. Alguns arquivos JS podem exigir o uso do atributo async, que permite que o arquivo seja carregado e executado de forma assíncrona com a análise do documento HTML.

Existem algumas otimizações que você pode aplicar ao CSS e ao JavaScript:

• Minificação. A minificação envolve a remoção de caracteres desnecessários, como espaços em branco, comentários e quebras de linha, de arquivos CSS e JavaScript. Este processo pode reduzir significativamente o tamanho dos arquivos sem afetar sua funcionalidade ou aparência .
  
• Remova CSS e JS não utilizados. CSS e JS não utilizados referem-se a regras específicas que não são usadas em uma página específica, mas ainda são carregadas. A remoção dessas partes de seus arquivos afetará diretamente a rapidez com que o navegador cria a árvore de renderização .

Otimize seus recursos de bloqueio de renderização no piloto automático. Instalar o NitroPack →

Reduza o tamanho dos seus arquivos

Para reduzir a quantidade de dados que o navegador precisa baixar, podemos empregar técnicas como minificação, compactação e cache de recursos HTML, CSS e JavaScript.

Você já sabe o que significa minificação, então vamos nos concentrar nos outros dois:

• Compressão. A compactação é uma técnica que aplica algoritmos para reescrever o código binário dos arquivos usando menos bits que o original. Como resultado, seus arquivos são de tamanho muito menor, o que reduz o tempo de carregamento da página e o uso da largura de banda.
  
• Cache. O cache aproveita o cache HTTP implementado em todos os navegadores. Para garantir um cache eficaz, devemos garantir que cada resposta do servidor forneça os cabeçalhos HTTP corretos, instruindo o navegador quando e por quanto tempo ele deve armazenar em cache os recursos solicitados.

Conte com o mecanismo de cache mais avançado. Adquira o NitroPack hoje →

Priorize o download de ativos críticos

Em geral, os navegadores são muito bons em priorizar os recursos mais importantes e buscá-los primeiro. No entanto, em alguns casos, você pode ajudá-los a carregar seu site ainda mais rápido, priorizando manualmente os recursos mais importantes.

Você pode usar dicas de recursos para informar ao navegador como lidar com recursos ou páginas da web específicos.

Aqui estão os três principais:

• Link rel=pré-busca. Prefetch é uma dica de recurso de baixa prioridade que permite ao navegador buscar recursos que podem ser necessários posteriormente e armazená-los no cache do navegador.

• Link rel=pré-conectado. A diretiva preconnect ajuda o navegador a estabelecer conexões iniciais antes de enviar uma solicitação inicial ao servidor.

• Link rel=pré-carregar. O pré-carregamento é usado para forçar o navegador a baixar um recurso mais cedo do que o navegador o descobriria porque é crucial para a página.

Importante: A pré-busca e a pré-conexão são dicas de recursos e são executadas conforme o navegador achar adequado. A diretiva preload é um comando obrigatório para os navegadores. Saiba mais sobre como implementar dicas de recursos.

Agora que você sabe como lidar com a otimização do Critical Rendering Path, vamos ver alguns plugins do WordPress que podem automatizar o processo.

3 plugins do WordPress para otimizar o caminho crítico de renderização

Todas as otimizações mencionadas acima podem ser feitas manualmente. No entanto, alguns deles exigem conhecimento técnico para garantir que você não quebre seu site durante o processo.

Felizmente para todos os usuários do WordPress, existem plugins que podem ajudar na otimização do CRP. Vamos verificar os 3 principais candidatos, em nossa opinião:

NitroPack - A solução tudo-em-um

O NitroPack é a principal solução de otimização de velocidade de site tudo-em-um que combina mais de 35+ recursos de desempenho da web. Quando se trata de otimizar seu caminho de renderização crítico, o NitroPack lidará automaticamente com otimizações como:

• CSS crítico
• Minificação de CSS e JS
• Compressão CSS e JS
• Cache
• Atrasar o carregamento do JS
• Remova CSS e JS não utilizados

Mas os recursos de otimização não terminam aqui. Você também receberá o kit de ferramentas de desempenho completo:

• CDN integrado
• Pilha de otimização de imagem completa
• Otimização de fonte
• Cache do carrinho de comércio eletrônico
• suporte 24/7

Acelere seu site automaticamente. Adquira o NitroPack hoje →

WP Super Cache - Plug-in somente para cache

O WP Super Cache é um plug-in de cache que oferece principalmente recursos de cache e compactação HTTP, mas fica aquém da minificação de recursos e da otimização do JavaScript com atributos assíncronos e deferidos.

Os recursos mais notáveis ​​incluem:

• Habilitar cache para todos os visitantes
• Desabilitar cache para visitantes logados
• Compacte as páginas para que elas sejam exibidas mais rapidamente aos visitantes
• Reconstrução de cache

Desempenho Swift

Swift Performance é outro plugin que você pode achar útil em sua busca por CRP otimizado. Algumas de suas características incluem:

• Minimizando arquivos CSS e JavaScript
• CSS crítico
• Cache
• Otimização de imagem

Otimizando o Caminho de Renderização Crítico [Lista de Verificação]

Cobrimos muito assunto neste artigo, então aqui está uma lista de verificação útil de todas as otimizações que mencionamos:

• Gerar CSS crítico
• Combinar arquivos CSS
• Atrasar o carregamento do JavaScript
• Carregar JavaScript de forma assíncrona
• Minimize CSS e JavaScript
• Comprimir CSS e JavaScript
• Remova CSS e JavaScript não utilizados
• Aplicar minificação
• Aplicar compressão
• Usar cache
• Implementar link rel=pré-carregar
• Implementar link rel=prefetch
• Implementar link rel=pré-conectar

Baixe a lista de verificação de otimização de CRP →

E por último, mas não menos importante - não se esqueça de testar antes e depois de cada otimização!