Het critical rendering path is de reeks stappen die de browser neemt om HTML, CSS en JS om te zetten in pixels. Als je dit begrijpt, kun je zien wat het renderen blokkeert en hoe je pagina's sneller kunt laten schilderen.
De stappen
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
Wat blokkeert het renderen
De browser zal niet schilderen totdat de CSSOM klaar is (om een flits van ongestyleerde inhoud te voorkomen). Daarom vertraagt grote/langzame CSS de eerste paint — houd kritieke CSS klein en inline het wanneer mogelijk.