CLS (ang. Cumulative Layout Shift, skumulowane przesunięcie układu) to bezjednostkowy wskaźnik z zestawu Core Web Vitals, który mierzy, jak bardzo widoczne elementy strony niespodziewanie zmieniają pozycję podczas jej życia – wynik do 0,1 uznaje się za dobry, powyżej 0,25 za słaby. Dla marketera CLS to miara stabilności wizualnej: strona, na której przycisk „Kup” ucieka spod kursora, bo doładował się baner, traci konwersje i ocenę w Google. Wraz z LCP (szybkość wyświetlenia głównej treści) i INP (responsywność na interakcje) współtworzy sygnał Page Experience oceniany w wyszukiwarce.
Jak działa CLS i co dokładnie mierzy?
Przeglądarka rejestruje każdą zmianę pozycji elementu widocznego w viewportcie, która nie nastąpiła w ciągu 500 ms po akcji użytkownika (kliknięciu, stuknięciu, wpisaniu tekstu). Takie „oczekiwane” przesunięcia – np. rozwinięcie menu po kliknięciu – nie są liczone. Każde nieoczekiwane przesunięcie otrzymuje wynik według wzoru:
wynik przesunięcia = frakcja wpływu × frakcja odległości
- Frakcja wpływu – jaką część viewportu zajmuje niestabilny element przed i po przesunięciu łącznie.
- Frakcja odległości – o jaką część większego wymiaru viewportu element się przesunął.
Przesunięcia grupuje się w tzw. okna sesji (maksymalnie 5 sekund, przerwa między przesunięciami do 1 sekundy), a CLS strony to najwyższa suma w jednym oknie. Google ocenia adres URL według 75. percentyla realnych wizyt (dane z Chrome UX Report), a nie pojedynczego testu laboratoryjnego.
Jak obliczyć CLS – przykład
Załóżmy, że blok treści zajmuje 50% wysokości ekranu, a nad nim doładowuje się reklama i spycha go o 25% wysokości viewportu w dół. Frakcja wpływu = 0,5 + 0,25 = 0,75, frakcja odległości = 0,25. Wynik przesunięcia = 0,75 × 0,25 = 0,1875 – już ten jeden ruch klasyfikuje stronę jako „wymaga poprawy”.
| Wartość CLS | Ocena Google | Typowa przyczyna |
|---|---|---|
| ≤ 0,1 | Dobra | Zarezerwowane miejsce dla mediów i reklam |
| 0,1 – 0,25 | Wymaga poprawy | Pojedynczy baner lub obraz bez wymiarów |
| > 0,25 | Słaba | Wiele dynamicznych wstawek, podmiana fontów, paski cookie |
Najczęstsze przyczyny wysokiego CLS
- Obrazy i wideo bez atrybutów
width/heightlub bez zdefiniowanegoaspect-ratiow CSS. - Reklamy, embedy i iframe’y bez zarezerwowanego kontenera o stałych rozmiarach.
- Treści dodawane dynamicznie nad istniejącą zawartością – paski powiadomień, bannery cookie, formularze newslettera.
- Fonty webowe powodujące podmianę kroju (FOUT) i zmianę wysokości linii – brak
font-displayi preloadu. - Animacje właściwości wpływających na layout (
top,left,height) zamiasttransform.
Kiedy CLS ma znaczenie, a kiedy nie?
CLS jest ważny wszędzie tam, gdzie użytkownik czyta lub klika w trakcie ładowania: w sklepach, serwisach contentowych i na landing pages z formularzami. Ma mniejsze znaczenie na stronach niemal statycznych, bez reklam i lazy-loadingu, gdzie naturalnie utrzymuje się blisko zera. Warto pamiętać, że Core Web Vitals to jeden z wielu sygnałów rankingowych – dobry CLS nie zastąpi wartościowej treści ani linków, ale słaby wynik realnie podnosi współczynnik odrzuceń i obniża konwersję.
CLS w praktyce ICBM
W audycie technicznym SEO analizujemy CLS na dwóch poziomach: dane terenowe z Search Console i CrUX pokazują, które grupy adresów faktycznie przekraczają próg 0,1, a testy laboratoryjne (Lighthouse, nakładka Web Vitals w Chrome) wskazują konkretny element odpowiedzialny za przesunięcie. Najczęstsze poprawki to zdefiniowanie wymiarów mediów, stałe kontenery na reklamy i przeniesienie dynamicznych wstawek pod fold lub w warstwę nad treścią. Zasady oceny i szczegóły pomiaru opisuje dokumentacja Google web.dev, a pozostałe pojęcia z tego obszaru znajdziesz w kategorii SEO bazy wiedzy ICBM.
Najczęściej zadawane pytania
Czym CLS różni się od LCP i INP?
LCP mierzy, po jakim czasie pojawia się największy element treści, INP – jak szybko strona reaguje na interakcje, a CLS – jak stabilny wizualnie jest układ. Razem tworzą trzy filary Core Web Vitals; można mieć świetny LCP i jednocześnie fatalny CLS, jeśli treść „skacze” po załadowaniu.
Dlaczego CLS w Lighthouse różni się od wyniku w Search Console?
Lighthouse mierzy jedno symulowane ładowanie i kończy pomiar krótko po nim, natomiast Search Console korzysta z realnych wizyt użytkowników Chrome, w których przesunięcia zachodzą także podczas scrollowania. Do oceny rankingowej liczą się dane terenowe z 75. percentyla.
Czy baner cookie zawsze psuje CLS?
Nie, jeśli jest pozycjonowany jako nakładka (position: fixed lub absolute) i nie przesuwa pozostałej treści. Problem powstaje, gdy baner wstawia się w normalny przepływ dokumentu na górze strony i spycha całą zawartość w dół.
