Co je to kritická cesta vykreslování webových stránek?

Jedná se o sled kroků, které prohlížeč provádí při zobrazování obsahu stránky na obrazovce, počínaje získáním HTML dokumentu. Zahrnuje:

1. Vytvoření DOM (Document Object Model): Parsování HTML kódu a vytvoření stromu objektů, které představují strukturu dokumentu.
2. Vytvoření CSSOM (CSS Object Model): Parsování CSS souborů a inline stylů pro vytvoření stromu objektů, které představují styly prvků.
3. Vytvoření renderovacího stromu: Spojení DOM a CSSOM. Vytvoří se strom pouze s renderovatelnými prvky s aplikovanými styly.
4. Rozložení (Layout nebo Reflow): Určení geometrických rozměrů a pozice každého prvku na stránce.
5. Vykreslení (Paint nebo Repaint): Vyplnění pixelů na obrazovce na základě renderovacího stromu a dat rozložení.

Optimalizace kritické cesty vykreslování má za cíl, aby prohlížeč co nejrychleji zobrazil první smysluplný obsah (First Meaningful Paint) nebo interaktivitu (Time to Interactive). Toho se dosahuje minimalizací blokujících zdrojů (JS a CSS), optimalizací velikosti zdrojů a jejich načítáním ve vhodný okamžik.