O que é o caminho crítico de renderização de páginas web?

É uma sequência de passos que o navegador realiza para exibir o conteúdo da página na tela, começando com a obtenção do documento HTML. Inclui:

1. Construção do DOM (Modelo de Objeto do Documento): Análise do código HTML e criação de uma árvore de objetos que representam a estrutura do documento.
2. Construção do CSSOM (Modelo de Objeto CSS): Análise de ficheiros CSS e estilos inline para criar uma árvore de objetos que representam os estilos dos elementos.
3. Construção da Árvore de Renderização: União do DOM e CSSOM. É criada uma árvore apenas dos elementos que serão renderizados com os estilos aplicados.
4. Layout (ou Reflow): Definição das dimensões geométricas e da posição de cada elemento na página.
5. Paint (ou Repaint): Preenchimento de pixels na tela com base na Árvore de Renderização e nos dados de layout.

A otimização do caminho crítico de renderização visa que o navegador exiba o primeiro conteúdo significativo (First Meaningful Paint) ou a interatividade (Time to Interactive) o mais rapidamente possível. Isso é alcançado minimizando recursos bloqueantes (JS e CSS), otimizando o tamanho dos recursos e seu carregamento no momento adequado.