Cumulative Layout Shift (CLS)

Cumulative Layout Shift (CLS) to metryka jakości doświadczenia użytkownika, która mierzy łączną „niestabilność” układu strony widoczną jako nieoczekiwane przesunięcia elementów w trakcie ładowania i działania witryny. Innymi słowy, CLS opisuje, jak bardzo i jak często treści „skaczą” na ekranie w sposób, którego użytkownik nie inicjuje.

CLS jest częścią szerszego zagadnienia stabilności wizualnej: użytkownik oczekuje, że po wejściu na stronę elementy pozostaną na swoich miejscach, a interakcje (np. kliknięcie przycisku) nie będą utrudniane przez nagłe przemieszczenia treści. Typowym objawem wysokiego CLS jest sytuacja, w której użytkownik próbuje kliknąć link, a w ostatniej chwili pod kursorem pojawia się inny element (np. baner, przycisk lub reklama), bo układ strony przesunął się w dół lub w bok. Z perspektywy właściciela strony i zespołu produktowego CLS jest sygnałem, że sposób ładowania zasobów (obrazy, fonty, reklamy, komponenty aplikacji) lub dynamiczne wstawianie treści powoduje niepożądane zmiany geometrii elementów.

Metryka CLS jest liczona na podstawie zdarzeń przesunięć układu (layout shifts) obserwowanych w obszarze widocznym dla użytkownika (viewport). Każde takie zdarzenie ma „wagę” zależną od tego, jak duża część ekranu została dotknięta zmianą oraz jak daleko elementy się przesunęły. Wynik CLS jest sumą tych zdarzeń w trakcie sesji użytkownika (w praktyce w ramach określonego okna czasowego), dlatego nawet kilka drobnych przesunięć może dać zauważalny wynik, a pojedyncze duże przesunięcie potrafi zdominować całość. Ważne jest też rozróżnienie: CLS dotyczy przesunięć nieoczekiwanych (bez intencji użytkownika). Zmiany układu będące bezpośrednią konsekwencją działania użytkownika (np. rozwinięcie akordeonu po kliknięciu) są traktowane inaczej niż „samoczynne” przeskoki w trakcie ładowania.

W kontekście wyszukiwarek CLS bywa omawiany jako element jakości strony, ponieważ stabilny układ ułatwia konsumpcję treści i interakcję, a niestabilny zwiększa liczbę błędnych kliknięć, frustrację i ryzyko porzucenia strony. Dla redaktorów treści CLS jest istotny, bo decyzje edytorskie (np. wstawianie obrazów bez wymiarów, osadzanie multimediów, dodawanie bloków „polecane artykuły” nad treścią) mogą nieświadomie pogarszać stabilność. Dla inżynierów CLS jest sygnałem do uporządkowania sposobu renderowania: rezerwowania miejsca na zasoby, kontrolowania ładowania fontów, unikania wstrzykiwania elementów „nad” już wyrenderowaną treścią oraz projektowania komponentów tak, by ich rozmiary były przewidywalne.

Kluczowe właściwości / Typowe konteksty / Częste nieporozumienia

• Kluczowa właściwość: CLS mierzy przesunięcia układu, a nie szybkość ładowania.

Strona może ładować się szybko, a mimo to mieć wysoki CLS (np. gdy reklamy lub obrazy pojawiają się później i wypychają treść). I odwrotnie: wolne ładowanie nie musi oznaczać wysokiego CLS, jeśli układ jest stabilny i miejsce na elementy jest zarezerwowane.

• Typowe konteksty: obrazy, wideo i osadzenia bez z góry określonych wymiarów.

Przykład: artykuł zawiera obraz wstawiony bez informacji o szerokości i wysokości; przeglądarka nie wie, ile miejsca zarezerwować, więc po pobraniu pliku obraz „wpycha się” w układ i przesuwa akapity. Podobnie działa osadzone wideo, mapa lub post z mediów społecznościowych, jeśli jego wysokość jest ustalana dopiero po załadowaniu.

• Typowe konteksty: reklamy i komponenty dynamiczne wstawiane nad treścią.

Przykład: po 2 sekundach od wejścia na stronę pojawia się baner promocyjny na górze artykułu (w normalnym przepływie dokumentu), co przesuwa cały tekst w dół. To klasyczny przypadek nieoczekiwanego przesunięcia. Mniej problematyczne są elementy nakładane (overlay), które nie zmieniają geometrii układu, choć mogą pogarszać użyteczność z innych powodów.

• Częste nieporozumienie: „CLS dotyczy tylko pierwszego ładowania strony”.

CLS może rosnąć także po załadowaniu, np. gdy aplikacja doczytuje moduły, personalizuje treści, wstawia rekomendacje, ładuje czcionki lub zmienia wysokość nagłówka po pobraniu dodatkowych zasobów. Stabilność układu jest więc istotna również w trakcie dalszej interakcji i przewijania.

• Częste nieporozumienie: „Każda zmiana układu to zły CLS”.

Zmiany wynikające z działania użytkownika (np. kliknięcie „pokaż więcej”, otwarcie menu, rozwinięcie sekcji FAQ) są naturalne i oczekiwane. Problemem są przesunięcia, które dzieją się bez intencji użytkownika lub w sposób trudny do przewidzenia, np. automatyczne doładowanie elementu nad miejscem, które użytkownik właśnie czyta lub w które zamierza kliknąć.

W praktyce praca nad CLS polega na projektowaniu i implementacji stron tak, aby układ był możliwie przewidywalny: rezerwować przestrzeń na zasoby (media, reklamy, komponenty), unikać wstawiania nowych elementów „nad” istniejącą treścią bez uprzedniego miejsca, oraz kontrolować zachowanie fontów i komponentów, które mogą zmieniać swoje wymiary po załadowaniu. Dzięki temu użytkownik widzi stabilną stronę, a interakcje są mniej podatne na błędne kliknięcia i utratę kontekstu czytania.