Der Critical Rendering Path ist die Abfolge von Schritten, die der Browser durchführt, um HTML, CSS und JS in Pixel umzuwandeln. Das Verständnis dafür erklärt, was das Rendering blockiert und wie man Seiten schneller rendern lässt.
Die Schritte
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
Was blockiert das Rendering
Der Browser rendert nicht, bis das CSSOM bereit ist (um einen Flash of Unstyled Content zu vermeiden). Daher verzögern große oder langsame CSS-Dateien das erste Rendering — halte kritisches CSS klein und inline es wenn möglich.