critical rendering path je niz koraka koje preglednik poduzima da pretvori HTML, CSS i JS u piksele. Razumijevanje toga objašnjava što blokira rendriranje i kako učiniti da se stranice brže iscrtavaju.
Koraci
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
Što blokira rendriranje
Preglednik neće iscrtati dok CSSOM nije spreman (kako bi se izbjegao bljesak nestylanog sadržaja). Dakle, veliki/spora CSS odgađa prvi prikaz — čuvajte kritičan CSS mali i inline ga kada je moguće.
