CLS (Cumulative Layout Shift) – co to jest?

CLS (Cumulative Layout Shift) to ważny wskaźnik stabilności wizualnej witryny podczas jej ładowania – określa, czy elementy na stronie nie przesuwają się nagle w trakcie wczytywania zawartości. Stabilny układ strony jest istotny dla doświadczenia użytkownika – jeśli tekst, obrazy lub przyciski „skaczą” podczas ładowania, korzystanie ze strony staje się frustrujące. Dlatego Google uwzględnia CLS jako element zestawu Core Web Vitals przy ocenie jakości stron pod kątem SEO. Niski wynik CLS oznacza stabilny układ bez nagłych zmian, co zapewnia wygodniejsze przeglądanie i lepszy odbiór witryny przez odwiedzających.

Na czym polega wskaźnik CLS?

Wskaźnik Cumulative Layout Shift (CLS) określa, jak bardzo układ strony internetowej pozostaje stabilny w trakcie jej ładowania. Innymi słowy, mierzy on sumę nieoczekiwanych przesunięć układu, do których dochodzi podczas wczytywania zawartości witryny. Każde takie przesunięcie to nagła zmiana położenia elementu na stronie – ważne, że mowa tu tylko o zmianach niezainicjowanych przez użytkownika. Gdy układ strony przemieszcza się samoczynnie, bez kliknięcia czy interakcji ze strony odwiedzającego, właśnie takie nieplanowane „skoki” wpływają na wartość CLS. Jeśli natomiast zmiana rozmieszczenia elementów jest skutkiem działania użytkownika (np. rozwinięcia ukrytej sekcji z treścią po kliknięciu), nie wpływa ona na ten wskaźnik, ponieważ jest przewidywana i zamierzona.

Na wartość CLS składają się wszystkie drobne i większe przesunięcia elementów, jakie następują od momentu rozpoczęcia ładowania strony. Obliczanie tego wskaźnika uwzględnia wielkość poruszonego elementu oraz dystans jego przesunięcia na ekranie. Każde przesunięcie ma swój wynik cząstkowy zależny od procentu powierzchni ekranu, jaki zajmuje przemieszczony element oraz od ułamka ekranu, o jaki ten element się przesunął. Sumując te wartości dla wszystkich zdarzeń, otrzymujemy łączny wynik CLS dla danej sesji ładowania strony. Im większy ten wynik, tym bardziej „skaczący” i niestabilny był układ strony. W idealnym przypadku CLS wynosi 0, co oznacza absolutną stabilność (brak niespodziewanych zmian). W praktyce jednak drobne przesunięcia zdarzają się często, dlatego za dobry rezultat przyjmuje się wartość CLS poniżej 0,1. Z kolei wynik powyżej 0,25 to już bardzo wysoki poziom, który świadczy o istotnych problemach z wizualną stabilnością witryny.

Co powoduje wysoki CLS?

Istnieje wiele czynników, które mogą prowadzić do wysokiego wyniku CLS, czyli nadmiernego przesuwania się elementów strony podczas ładowania. Najczęściej za problemy ze stabilnością układu odpowiadają elementy osadzane lub wczytywane w sposób nieplanowany. Poniżej wymieniono najczęstsze przyczyny niespodziewanych zmian układu strony, które podwyższają wartości CLS:

• Obrazy bez określonych wymiarów – grafiki, które nie mają zdefiniowanej szerokości i wysokości (np. w kodzie HTML lub CSS). Przeglądarka nie wie wówczas, ile miejsca przeznaczyć na taki obraz i rezerwuje zbyt mało przestrzeni. Gdy plik graficzny w końcu się załaduje, nagle zajmuje więcej miejsca na stronie, rozszerzając sekcję i wypychając tekst oraz inne elementy, co powoduje przesunięcie treści.
• Reklamy i osadzone elementy – mowa o treściach typu banery reklamowe, filmy wideo, mapy czy wtyczki social media. Jeżeli nie przewidziano dla nich stałej przestrzeni w układzie (np. brak określonych wymiarów lub dedykowanego kontenera), pojawiają się one nagle i wypychają istniejące elementy strony. Tego typu zewnętrzne zasoby często wczytują się z opóźnieniem, co dodatkowo potęguje problem przesunięć.
• Dynamicznie dodawane treści – elementy generowane przez skrypty już po początkowym załadowaniu strony (np. wyskakujące komunikaty o cookies, powiadomienia typu pop-up, dodatkowe sekcje doładowywane podczas przewijania). Nagle pojawiające się moduły tego rodzaju naruszają stabilność układu, ponieważ dodają dodatkową zawartość do już wyświetlonej strony i powodują przemieszczenie istniejących elementów.
• Opóźnienia w ładowaniu czcionek – gdy przeglądarka najpierw wyświetla tekst standardową czcionką systemową lub wcale (tzw. efekt FOIT/FOUT), a następnie zastępuje go właściwą czcionką webową, może to zmienić rozmiar lub kształt liter już po ich pojawieniu się. Takie migotanie tekstu bywa powodem nagłych zmian wysokości lub szerokości bloków tekstowych, co również podnosi wartość CLS.
• Oczekiwanie na odpowiedzi sieciowe – gdy strona musi czekać na załadowanie zewnętrznych zasobów lub danych (np. widgety, komentarze z innych serwisów, elementy iframe), początkowy układ strony może ulec zmianie. Gdy oczekiwane zasoby w końcu się pojawią i zaktualizują zawartość, często powoduje to natychmiastowe przesunięcie części strony.

Wszystkie powyższe czynniki mogą znacząco zwiększyć wartość CLS, jeśli twórcy strony nie uwzględnią ich na etapie projektowania i optymalizacji. Kluczem jest zrozumienie źródeł problemu – dzięki temu łatwiej zapobiec przesunięciom układu. Na szczęście wiele z opisanych przyczyn da się wyeliminować za pomocą dobrych praktyk projektowania stron (jak rezerwowanie przestrzeni na elementy czy optymalizacja mediów), o czym przeczytasz w dalszej części.

Jak mierzyć i monitorować CLS?

Prawidłowe zmierzenie CLS jest istotne, aby stwierdzić, czy strona spełnia wytyczne Google w zakresie Core Web Vitals. Istnieją zarówno metody testów syntetycznych (laboratoryjnych), jak i analizy rzeczywistych danych użytkowników (tzw. dane polowe). W praktyce warto korzystać z obu podejść: testy pozwalają szybko zidentyfikować problemy na pojedynczej podstronie, a monitorowanie danych użytkowników pokazuje, jak strona działa na różnych urządzeniach i w różnych warunkach. Na przykład na wolniejszym urządzeniu mobilnym i przy słabszym łączu opóźnienia w ładowaniu elementów strony mogą skutkować większymi przesunięciami, pogarszając wskaźnik CLS.

Wynik CLS wyrażany jest liczbowo – im wyższy, tym większe i częstsze przesunięcia treści występują. Dla orientacji: CLS ≤ 0,1 uznawany jest za wynik dobry, wartości w przedziale 0,1–0,25 wskazują na obszar do poprawy, natomiast CLS powyżej 0,25 to rezultat słaby, oznaczający poważne problemy z doświadczeniem użytkownika. Aby kontrolować te wartości, do dyspozycji mamy szereg narzędzi ułatwiających pomiar tej metryki zarówno w warunkach testowych, jak i na żywo:

Narzędzia do pomiaru CLS

• Google PageSpeed Insights – darmowe narzędzie online od Google, które analizuje wydajność strony. Po wpisaniu adresu URL generuje raport Core Web Vitals, w tym wartość CLS dla wersji mobilnej i desktopowej. Raport wskazuje także, czy wynik mieści się w zalecanym zakresie (oznaczony kolorem zielonym) czy wymaga optymalizacji.
• Chrome Lighthouse – wbudowane w przeglądarkę Chrome narzędzie audytowe dla deweloperów. Umożliwia wygenerowanie szczegółowego raportu laboratoryjnego dla bieżącej strony. Lighthouse prezentuje m.in. uzyskany wynik CLS oraz podświetla elementy odpowiedzialne za ewentualne przesunięcia, co pomaga namierzyć źródło problemu.
• Google Search Console – panel dla właścicieli witryn, zawierający raport Podstawowe wskaźniki internetowe. Wykorzystuje on dane polowe (rzeczywiste) zbierane od użytkowników odwiedzających stronę. W GSC można sprawdzić, jaki odsetek odsłon w obrębie witryny spełnia wymagania CLS, a które podstrony mają z tym trudności – łatwo więc wytypować obszary do optymalizacji.

Warto dodać, że istnieją także inne narzędzia i dodatki (np. Web Vitals Extension do przeglądarki Chrome) umożliwiające bieżący podgląd wartości CLS podczas przeglądania strony. Niezależnie jednak od wybranej metody, regularne monitorowanie tego wskaźnika pozwala szybko wychwycić pogorszenie doświadczenia użytkownika i podjąć odpowiednie działania naprawcze lub optymalizacyjne na stronie.

Jak poprawić wartość CLS na stronie?

Obniżenie wskaźnika CLS wymaga podjęcia działań, które zapobiegną niespodziewanym zmianom układu podczas ładowania strony. Najczęściej oznacza to wprowadzenie drobnych poprawek w kodzie HTML/CSS (np. dodanie brakujących atrybutów szerokości i wysokości w tagach <img> dla obrazów) oraz zadbanie o odpowiednie rozmieszczenie i kolejność ładowania zasobów. Warto przyjrzeć się elementom, które powodują największe przesunięcia – zwykle są to obrazy, reklamy lub dynamicznie dodawane sekcje. Poniżej kilka sprawdzonych praktyk, które pomagają zredukować CLS i zapewnić stabilność wizualną witryny:

• Ustal wymiary obrazów i elementów multimedialnych – zawsze definiuj szerokość i wysokość (lub proporcje) dla zdjęć, grafik, filmów czy ramek iframe. Dzięki temu przeglądarka z góry rezerwuje właściwą ilość miejsca na te elementy, co zapobiega późniejszemu „rozpychaniu” się treści po ich załadowaniu.
• Rezerwuj miejsce na reklamy i osadzone widgety – jeżeli na stronie mają pojawiać się banery reklamowe albo np. okno czatu czy mapka z innego serwisu, zadbaj o wcześniejsze zarezerwowanie dla nich stałej przestrzeni. Najlepiej zrobić to, stosując odpowiednie kontenery o ustalonych wymiarach albo po prostu pozostawienie pustego miejsca w układzie strony. Unikaj sytuacji, w której zewnętrzny element wskakuje nagle, wypychając zawartość – zaplanowanie jego miejsca eliminuje ten problem.
• Stosuj lazy loading dla obrazów poza ekranem – technika opóźnionego wczytywania obrazów powoduje, że grafiki znajdujące się poniżej obszaru widocznego od razu nie ładują się natychmiast przy otwarciu strony. Dzięki temu początkowy układ nie jest obciążony dużą liczbą elementów graficznych na starcie, co zmniejsza ryzyko przesunięć. Pamiętaj jednak, by również dla tych „leniwie” ładowanych obrazów ustawić rezerwację miejsca, aby gdy się pojawią podczas przewijania, nie zaburzyły układu.
• Unikaj nagłego dodawania treści po załadowaniu – wszelkie komunikaty (np. baner zgody na cookies, pop-up z newsletterem) lub dodatkowe bloki wczytywane po starcie powinny być zaplanowane tak, by nie zaburzyć układu. Dobrym rozwiązaniem jest wyświetlanie ich jako nakładki (overlay) lub umieszczenie w dolnej części strony, zamiast wpychać je na górze w istniejącą treść. Jeśli dodajesz nowy moduł, rozważ zastosowanie animacji przejścia, która płynnie ujawni treść, zamiast powodować gwałtowny skok układu.
• Optymalizuj wyświetlanie czcionek – problem FOIT (znikający tekst) i FOUT (tekst bez stylów) zminimalizujesz, używając właściwego font-display przy imporcie fontów webowych. Dzięki temu przeglądarka od razu wyświetli tekst w stylu zastępczym lub domyślnym, a po załadowaniu fontu zamieni go bez drastycznego przeskoku layoutu. Warto też korzystać z czcionek systemowych tam, gdzie to możliwe, by uniknąć długiego oczekiwania na webfonty.

Wdrożenie powyższych praktyk pozwala wyeliminować główne źródła wysokiego CLS. Dla pewności warto testować zmiany – np. uruchomić ponownie audyt w Lighthouse lub sprawdzić raport w PageSpeed Insights po wprowadzeniu poprawek. Przykładowo, serwis który początkowo notował CLS ≈ 0,3 z powodu niezadeklarowanych wymiarów grafik i banerów reklamowych, po wprowadzeniu powyższych usprawnień może osiągnąć wynik rzędu 0,05. Różnica jest odczuwalna – znikają uciążliwe przeskoki treści, a użytkownicy mogą wygodniej konsumować zawartość. Usprawnienia związane ze stabilnością układu przekładają się bezpośrednio na lepsze odczucia użytkowników podczas korzystania ze strony. Co więcej, witryna z niskim CLS zyskuje przewagę w kontekście SEO, ponieważ spełnia kryteria jakości Google i oferuje bardziej dopracowane doświadczenie odbiorcom. Warto pamiętać, że przeciętny użytkownik może nie znać terminu CLS, ale zdecydowanie odczuwa różnicę – strona zachowująca się stabilnie wydaje się bardziej dopracowana i profesjonalna, co buduje zaufanie do marki.

Wpływ CLS na pozycjonowanie (SEO)

Google kładzie coraz większy nacisk na wskaźniki doświadczenia użytkownika przy ustalaniu rankingu wyników wyszukiwania. Od 2021 roku Core Web Vitals (w tym CLS) oficjalnie stały się czynnikami rankingowymi w tzw. aktualizacji Page Experience. Oznacza to, że oprócz trafności treści i autorytetu strony, liczy się także komfort jej użytkowania. Witryny z wysokim CLS (czyli sprawiające problemy ze stabilnością układu) mogą być oceniane gorzej przez algorytm – Google nie chce kierować internautów na strony, które potencjalnie frustrują odbiorców. W praktyce, jeśli dwie strony mają podobną wartość merytoryczną, ale jedna z nich ma dużo niższy CLS, to właśnie ona ma większą szansę na lepszą pozycję w wynikach wyszukiwania.

Wysoki CLS może także pośrednio wpływać na SEO poprzez zachowanie użytkowników. Gdy elementy strony „skaczą”, odwiedzający częściej odczuwają dyskomfort i mogą szybciej opuścić witrynę. Taki zwiększony współczynnik odrzuceń (ang. bounce rate) czy krótszy czas przebywania na stronie to sygnały, które mogą sugerować, że strona nie spełniła oczekiwań odwiedzającego. Chociaż Google nie ujawnia dokładnie, w jakim stopniu analizuje takie dane behawioralne, logiczne jest, że witryna zapewniająca lepsze doświadczenie (m.in. dzięki niskiemu CLS) będzie bardziej angażować odbiorców. W efekcie może zdobywać więcej udostępnień, powracających użytkowników, a ostatecznie zyskiwać przewagę konkurencyjną w wynikach wyszukiwania.

Wpływ CLS na doświadczenie użytkownika (UX)

Ze wszystkich aspektów związanych z Cumulative Layout Shift to właśnie wpływ na odczucia użytkowników jest najbardziej bezpośredni. Wysoki CLS oznacza, że elementy strony przemieszczają się podczas ładowania – dla odwiedzającego przekłada się to na irytujące doznania. Strona, na której treści nieustannie „skaczą”, w oczach użytkowników wydaje się nieprofesjonalna lub niedopracowana. Użytkownik może mieć trudność z przeczytaniem artykułu, gdy akapit nagle zmieni położenie, lub z kliknięciem właściwego przycisku, jeśli tuż przed jego dotknięciem przesunie się on w inne miejsce. Na urządzeniach mobilnych, z mniejszym ekranem, nawet drobne przesunięcie potrafi całkowicie zaburzyć komfort przeglądania strony.

Przykład: Podczas czytania artykułu internetowego nagle w górnej części ekranu wczytuje się reklama banerowa, która spycha tekst w dół. Czytelnik traci wątek, bo akapit, który właśnie czytał, nagle „uciekł” mu z pola widzenia. Taka niespodziewana zmiana układu wywołuje frustrację – część osób zamknie stronę, nie doczekawszy końca ładowania zawartości.

Inny przykład: Na stronie sklepu online klient próbuje nacisnąć przycisk Dodaj do koszyka, ale w tym momencie wczytuje się duży obraz produktu powyżej i wszystko się przesuwa. Zamiast przycisku, użytkownik trafia palcem w zupełnie inny element lub pusty obszar. Taki incydent nie tylko wydłuża proces zakupowy, ale przede wszystkim zniechęca klienta – może on zrezygnować z zakupu, uznając sklep za źle działający.

Stabilność wizualna strony jest zatem niezwykle istotna dla pozytywnego user experience. Zapewnienie niskiego CLS przekłada się na większe zadowolenie odbiorców: mogą oni swobodnie konsumować treści i wchodzić w interakcje z witryną bez niespodzianek. Zwiększa to prawdopodobieństwo, że pozostaną na stronie dłużej, ponowią wizytę w przyszłości lub dokonają konwersji (np. wypełnią formularz, dokonają zakupu). W dłuższej perspektywie dobra opinia użytkowników o wygodzie korzystania z serwisu buduje też pozytywny wizerunek marki.