Il critical rendering path è la sequenza di passaggi che il browser segue per trasformare HTML, CSS e JS in pixel. Comprenderlo spiega cosa blocca il rendering e come rendere le pagine più veloci.
I passaggi
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
Cosa blocca il rendering
Il browser non disegnerà finché il CSSOM non è pronto (per evitare un flash di contenuto non stilizzato). Quindi CSS grande/lento ritarda il first paint — mantieni il CSS critico piccolo e incorporalo quando possibile.