Wiedza / Diagramy / Wydajność i obrazy
CLS — rezerwowanie miejsca
Podanie wymiarów lub aspect-ratio pozwala przeglądarce zarezerwować miejsce zanim obraz dotrze, dzięki czemu treść nie zmienia położenia.
Co pokazuje ten diagram?
Od pobrania zasobów do wyrenderowania stabilnego widoku oraz pomiaru Core Web Vitals.
CLS (Cumulative Layout Shift) mierzy, jak bardzo elementy strony „przeskakują” w trakcie ładowania. Każde nagłe przesunięcie, którego użytkownik się nie spodziewał, zwiększa wynik — a niższy jest lepszy.
Pomaga połączyć wynik PageSpeed lub audytu z konkretną fazą ładowania, formatem obrazu albo protokołem.
Jak czytać schemat
- BEZ WYMIARÓW
- pierwszy render
- przesunięcie
- obraz dociera później
- treść skacze → CLS
- MIEJSCE ZAREZERWOWANE
- od pierwszego renderu
- znane aspect-ratio
Pełne wyjaśnienie pojęcia
Cumulative Layout Shift (CLS) — Stabilność układu podczas ładowania.
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.