A critical rendering path az a lépéssorozat, amelyet a böngésző a HTML, CSS és JS pixelekké alakításához végez. Az megértése azt magyarázza, hogy mi blokkolja a megjelenítést és hogyan lehet gyorsabban festeni az oldalakat.
A lépések
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
Mi blokkolja a megjelenítést
A böngésző nem fog rajzolni, amíg a CSSOM kész nem lesz (az unstyled tartalom villanása elkerülésére). Tehát a nagy/lassú CSS késlelteti az első festést — tartsa a kritikus CSS-t kicsire és inline-ja, ha lehetséges.
