A otimização do caminho crítico de renderização se refere à priorização da exibição de conteúdo relacionado à ação atual do usuário.
A oferta de uma experiência rápida na Web requer muito trabalho por parte do navegador. A maior parte desse trabalho não aparece para nós, desenvolvedores da Web: escrevemos a marcação, e uma página bonita aparece na tela. Mas como exatamente o navegador transforma o consumo de HTML, CSS e JavaScript em pixels renderizados na tela?
Otimizar para melhorar o desempenho significa entender o que acontece nessas etapas intermediárias entre o recebimento dos 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, podemos melhorar significativamente o tempo da primeira renderização das páginas. Além disso, o entendimento do caminho crítico de renderização também serve como base para criar aplicativos interativos com bom desempenho. O processo de atualizações interativas é o mesmo, mas é feito em um loop contínuo e, idealmente, a 60 quadros por segundo. Mas primeiro, vamos conferir uma visão geral de como o navegador mostra uma página simples.
Outros recursos
- Como criar 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
- Análise do desempenho do caminho crítico de renderização
- Como otimizar o caminho crítico de renderização
- Regras e recomendações do PageSpeed