Publicado em 31 de março de 2014
Otimizar o caminho crítico de renderização é priorizar a exibição do conteúdo relacionado à ação atual do usuário.
A entrega de uma experiência rápida de web exige muito trabalho do navegador. A maioria esse trabalho está oculto para nós, desenvolvedores web: escrevemos a marcação e que o usuário procura, ele aparece na tela. Mas como exatamente o navegador passa do consumo do HTML, CSS e JavaScript para pixels renderizados na tela?
A otimização do desempenho é baseada no entendimento do que acontece nessas etapas intermediárias entre o recebimento de bytes de HTML, CSS e JavaScript e o processamento necessário para transformá-los em pixels renderizados. Esse é o caminho crítico de renderização.
Ao otimizar o caminho crítico de renderização, é possível melhorar significativamente tempo da primeira renderização das páginas. Além disso, entender o caminho de renderização crítico também serve como base para criar aplicativos interativos com bom desempenho. O processo interativo de atualizações é o mesmo, mas é feito em loop contínuo e, de preferência, a 60 quadros por segundo. Mas primeiro, vamos conferir um resumo de como o navegador exibe uma página simples.
Outros recursos
- Como construir o modelo de objeto
- Construção, layout e pintura da árvore de renderização
- CSS bloqueador de renderização
- Como adicionar interatividade com JavaScript
- Como medir o caminho crítico de renderização
- Como analisar o desempenho do caminho crítico de renderização
- Como otimizar o caminho crítico de renderização
- Regras e recomendações para o PageSpeed