La ruta crítica de renderizado es la secuencia de pasos que el navegador realiza para convertir HTML, CSS y JS en píxeles. Entenderla explica qué bloquea el renderizado y cómo hacer que las páginas se pinten más rápido.
Los pasos
text
1. Parse HTML → DOM tree (the document structure)
2. Parse CSS → CSSOM tree (the style rules)
3. DOM + CSSOM → Render tree (visible nodes + their styles)
4. Layout (reflow) → compute each node's geometry (position/size)
5. Paint → fill in pixels (colors, text, images)
6. Composite → combine layers onto the screen
Qué bloquea el renderizado
El navegador no pintará hasta que el CSSOM esté listo (para evitar un destello de contenido sin estilo). Entonces CSS grande/lento retrasa el primer pintado — mantén el CSS crítico pequeño e insértalo en línea cuando sea posible.