Entender el critical render path es lo que separa a quien escribe código de quien construye productos web sólidos. Cuando empiezas tu carrera como desarrollador, saber cómo funciona el navegador al recibir HTML, CSS y JavaScript te da el control real sobre lo que tu usuario ve y siente al interactuar con tu sitio.

¿Qué pasa cuando escribes una URL en el navegador?

Todo arranca con una petición HTTP, ese protocolo que conecta tu computadora con un servidor para pedirle algo concreto. Si quieres entrar a platzi.com, tu navegador se comunica con el servidor que aloja el proyecto y le solicita los archivos necesarios para mostrarlo.

Hasta ahí, la conversación entre cliente y servidor ya está hecha. Pero cuando esos archivos llegan a tu navegador empieza la parte interesante: el navegador necesita interpretarlos para convertirlos en una página con la que puedas interactuar.

¿Qué es una petición HTTP? Es el protocolo de conexión entre tu computadora y un servidor para obtener recursos, como los archivos de un sitio web. Sin esa petición, no hay sitio que mostrar.

¿Qué es el critical render path y cuáles son sus pasos?

El proceso que sigue el navegador para transformar archivos en una página visible se llama critical render path. Son seis pasos que ocurren en orden y cada uno depende del anterior.

1. DOM: el navegador lee el HTML y construye el árbol de elementos de tu documento.
2. CSSOM: interpreta las hojas de estilo y arma el modelo de objetos del CSS.
3. JavaScript: entre el CSSOM y el siguiente paso, el navegador ejecuta el código JS que encuentra.
4. Render tree: combina DOM y CSSOM para definir qué se va a mostrar y con qué estilos.
5. Layout: calcula posiciones, tamaños y dónde va cada elemento en pantalla.
6. Paint: pinta finalmente el proyecto, eso que tus ojos ven cuando carga la página.

Cada paso tiene una función específica y entenderlos te ayuda a depurar problemas de rendimiento más adelante.

¿Qué es el critical render path? Es la secuencia de seis pasos (DOM, CSSOM, JavaScript, render tree, layout y paint) que ejecuta el navegador para transformar HTML, CSS y JS en una página visible e interactiva.

¿Por qué importa el orden DOM, CSSOM y render tree?

El orden no es casualidad. El DOM describe la estructura, el CSSOM describe los estilos y solo cuando ambos están listos puede formarse el render tree, que es la fusión de ambos. Si un archivo CSS tarda en cargar, el render tree espera. Si un script bloquea la ejecución, el proceso completo se detiene.

Por eso, cuando construyes productos que corren en el navegador, cada decisión sobre cómo cargas tus archivos impacta directamente en la velocidad con la que el usuario ve tu sitio.

¿Cómo se relacionan HTML, CSS y JavaScript en este proceso?

Cada lenguaje cumple un rol distinto dentro del critical render path. El HTML alimenta al DOM, el CSS alimenta al CSSOM y JavaScript se interpreta en medio del flujo, pudiendo modificar tanto la estructura como los estilos antes de que se pinte la página.

Esa es la razón por la que un mal manejo de scripts puede retrasar todo lo demás: JavaScript tiene el poder de reescribir lo que el navegador estaba a punto de mostrar.

En las próximas clases vas a ver a detalle qué hace el navegador con cada uno de estos archivos, cómo se construye el DOM, qué papel juega el CSSOM y por qué layout y paint son los pasos finales antes de que puedas interactuar con la página y, en tu caso, seguir consumiendo cursos para aprender.

¿Qué parte del critical render path te genera más dudas? Cuéntalo en los comentarios.