Czym jest krytyczna ścieżka renderowania stron internetowych?

To se sekwencja kroków, które przeglądarka wykonuje, aby wyświetlić zawartość strony na ekranie, zaczynając od pobrania dokumentu HTML. Obejmuje:

1. Budowa DOM (Model Obiektu Dokumentu): Parsowanie kodu HTML i tworzenie drzewa obiektów reprezentujących strukturę dokumentu.
2. Budowa CSSOM (Model Obiektu CSS): Parsowanie plików CSS i stylów inline w celu utworzenia drzewa obiektów reprezentujących style elementów.
3. Budowa drzewa Render: Połączenie DOM i CSSOM. Tworzone jest drzewo zawierające tylko elementy do wyrenderowania z zastosowanymi stylami.
4. Layout (lub Reflow): Określenie wymiarów geometrycznych i położenia każdego elementu na stronie.
5. Paint (lub Repaint): Wypełnienie pikseli na ekranie na podstawie drzewa Render i danych layoutu.

Optymalizacja krytycznej ścieżki renderowania ma na celu jak najszybsze wyświetlenie przez przeglądarkę pierwszej istotnej treści (First Meaningful Paint) lub interaktywności (Time to Interactive). Osiąga się to poprzez minimalizację zasobów blokujących (JS i CSS), optymalizację rozmiarów zasobów i ich ładowanie w odpowiednim momencie.