Critical rendering path (krytyczna ścieżka renderowania) to ciąg kroków, które przeglądarka wykonuje, aby zamienić HTML, CSS i JavaScript w piksele na ekranie.
Etapy
- Budowa DOM z HTML.
- Budowa CSSOM ze styli.
- Połączenie ich w drzewo renderowania.
- Obliczenie układu (layout).
- Malowanie (paint) i kompozycja warstw.
Co blokuje renderowanie?
Pliki CSS i synchroniczne skrypty w sekcji head wstrzymują wyświetlanie strony. Aby przyspieszyć pierwsze malowanie, wydziela się krytyczne style, odracza skrypty (defer) i ogranicza liczbę zasobów blokujących.
Mniej bajtów i mniej zasobów blokujących oznacza szybszy pierwszy widok.
Jak skrócić ścieżkę?
Zmniejsz liczbę i rozmiar zasobów potrzebnych do pierwszego widoku: zminifikuj pliki, usuń nieużywany CSS, odrocz skrypty niekrytyczne, a krytyczne zasoby wskaż przeglądarce za pomocą preload. Kolejność ma znaczenie: im wcześniej przeglądarka dowie się o ważnych zasobach, tym szybciej zacznie je pobierać. Efekty widać w zakładce wydajności narzędzi deweloperskich, gdzie fazy układu i malowania są pokazane na osi czasu.
Czym jest zasób blokujący renderowanie?
To plik (zwykle CSS lub skrypt), który musi zostać pobrany i przetworzony, zanim przeglądarka wyświetli jakąkolwiek treść. Raport Lighthouse wskazuje takie zasoby.
Zobacz w praktyce
Działanie strony internetowej w przeglądarce 
Jak zmniejszyć rozmiar DOM i przyspieszyć stronę 
Core Web Vitals - poradnik jak poprawić wskaźniki