¿Qué es la ruta crítica de renderizado de páginas web?

Es una secuencia de pasos que el navegador realiza para mostrar el contenido de la página en la pantalla, comenzando con la obtención del documento HTML. Incluye:

1. Construcción del DOM (Modelo de Objeto del Documento): Análisis del código HTML y creación de un árbol de objetos que representan la estructura del documento.
2. Construcción del CSSOM (Modelo de Objeto CSS): Análisis de archivos CSS y estilos en línea para crear un árbol de objetos que representan los estilos de los elementos.
3. Construcción del árbol de renderizado: Unión del DOM y CSSOM. Se crea un árbol solo de los elementos que se van a renderizar con los estilos aplicados.
4. Layout (o Reflow): Determinación de las dimensiones geométricas y la posición de cada elemento en la página.
5. Paint (o Repaint): Relleno de píxeles en la pantalla basado en el árbol de renderizado y los datos de layout.

La optimización del camino crítico de renderizado busca que el navegador muestre lo antes posible el contenido significativo inicial (First Meaningful Paint) o la interactividad (Time to Interactive). Esto se logra minimizando los recursos bloqueantes (JS y CSS), optimizando el tamaño de los recursos y su carga en el momento adecuado.