Wiedza / Diagramy / Wydajność i obrazy

Ścieżka renderowania

Ścieżka renderowania: z HTML i CSS powstaje obraz strony na ekranie.

Co pokazuje ten diagram?

Od pobrania zasobów do wyrenderowania stabilnego widoku oraz pomiaru Core Web Vitals.

Zasoby blokujące renderowanie to pliki CSS i JavaScript, które przeglądarka musi pobrać i przetworzyć, zanim pokaże treść. Ładowane synchronicznie w sekcji <head> wstrzymują pierwsze wyświetlenie strony.

Pomaga połączyć wynik PageSpeed lub audytu z konkretną fazą ładowania, formatem obrazu albo protokołem.

Jak czytać schemat

HTML — DOM
CSS — CSSOM
Drzewo renderowania
Układ (layout)
Malowanie — paint

Pełne wyjaśnienie pojęcia

Zasoby blokujące renderowanie — CSS/JS, które wstrzymują wyświetlenie strony.

Jak użyć diagramu?

Otwórz sam plik SVG, aby powiększyć go bez utraty jakości, albo odwołaj się do tej strony, gdy potrzebujesz również opisu, legendy i powiązanych materiałów.

Powiązane poradniki

Wszystkie diagramy · Poradniki · Słownik