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 maior parte desse trabalho não aparece para nós, desenvolvedores web: escrevemos a marcação e uma página bonita é exibida na tela. Mas como exatamente o navegador consumir nosso HTML, CSS e JavaScript para renderizar pixels na tela?
Para otimizar o desempenho, é preciso entender o que acontece nessas etapas intermediárias entre o recebimento dos bytes de HTML, CSS e JavaScript e o processamento para transformá-los em pixels renderizados. Isso é 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, compreender os conceitos o caminho de renderização também serve como base para a criação aplicativos interativos. Na verdade, o processo para as atualizações interativas é o mesmo, mas é feito em loop contínuo e, idealmente, a 60 quadros por segundo. Mas, primeiro, uma visão geral de como o navegador exibe uma página simples.
Outros recursos
- Construir o modelo de objetos
- 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
- Analisar o desempenho do caminho crítico de renderização
- Otimização do caminho crítico de renderização
- Regras e recomendações do PageSpeed