Core Web Vitals

Co to jest CLS (Cumulative Layout Shift)

Stabilność wizualna strony - mierzy jak bardzo elementy skaczą podczas ładowania.

Aktualizacja:
Krótka odpowiedź

CLS (Cumulative Layout Shift) to metryka Google mierząca stabilność wizualną strony - jak bardzo jej elementy przeskakują podczas ładowania. Każde nieoczekiwane przesunięcie sumuje się do wskaźnika. Dobre CLS to wartość poniżej 0,10, powyżej 0,25 Google klasyfikuje jako słabe. CLS jest częścią Core Web Vitals.

Kluczowe fakty
Pełna nazwa Cumulative Layout Shift
Dobry próg ≤ 0,10 (bezwymiarowa)
Słaby próg > 0,25
Część Core Web Vitals Tak, oficjalna metryka od 2020
Wpływa na ranking Google Tak, od czerwca 2021
Wartość idealna 0,00 (zero przesunięć)

Co to jest CLS?

CLS (Cumulative Layout Shift) mierzy, jak bardzo elementy strony skaczą podczas ładowania. Każde nieoczekiwane przesunięcie - gdy zdjęcie się dopiero dogrywa i wypycha tekst w dół, albo gdy banner cookie nagle pojawia się i przesuwa wszystko - sumuje się do tego wskaźnika.

To jedna z trzech metryk Core Web Vitals.

Dlaczego CLS jest ważne?

Skaczący layout to nie tylko frustrujący efekt wizualny - to konkretny problem UX. Użytkownik próbuje kliknąć w przycisk, a w tym czasie strona przesuwa się i klika coś innego: reklamę, link do innej podstrony, akcję której nie chciał wykonać. To powód do odejścia i utraty zaufania.

Progi Google dla CLS

  • ≤ 0,10 - dobry CLS
  • 0,10-0,25 - wymaga poprawy
  • > 0,25 - słaby CLS

Wartość bezwymiarowa - liczona jako iloczyn rozmiaru przeskakującego elementu i odległości przesunięcia.

Najczęstsze przyczyny słabego CLS

  • Obrazy bez ustawionych wymiarów (width/height w HTML)
  • Reklamy i osadzone widgety, które ładują się asynchronicznie i wypychają treść
  • Czcionki webowe - przeskok przy podmianie z fallback systemowego (FOUT/FOIT)
  • Banner cookie wstawiany z opóźnieniem
  • Dynamicznie wstawiana treść u góry strony (bez rezerwacji miejsca)

Jak poprawić CLS?

  1. Dodaj atrybuty width i height do każdego <img> i <video> - przeglądarka zarezerwuje miejsce
  2. Dla reklam i widgetów ustaw stały kontener z minimalną wysokością
  3. Użyj font-display: optional lub swap z dopasowanym fallbackiem
  4. Banner cookie ładuj jako overlay (fixed/absolute), żeby nie wypychał treści
  5. Animacje używaj wyłącznie transform i opacity - nie zmieniają layoutu

Najczęstsze pytania

Co oznacza CLS równe 0?
CLS równy 0,00 oznacza, że podczas ładowania strony żaden element nie zmienił swojej pozycji - strona jest idealnie stabilna wizualnie. To najlepszy możliwy wynik dla tej metryki.
Dlaczego CLS rośnie nawet po załadowaniu strony?
CLS sumuje wszystkie nieoczekiwane przesunięcia layoutu przez cały czas trwania sesji użytkownika - nie tylko podczas początkowego ładowania. Lazy-loaded obrazy, opóźnione reklamy, doczytywane treści z AJAX mogą zwiększać CLS także po pierwszym renderowaniu.
Czy banner cookie wpływa na CLS?
Tak, jeśli banner wstawia się jako element strony (np. na górze i wypycha całą treść w dół), to znacząco zwiększa CLS. Aby tego uniknąć, banner powinien być pozycjonowany jako fixed/absolute overlay nad stroną, nie wewnątrz przepływu HTML.
Jak Google liczy wartość CLS?
CLS jest iloczynem dwóch czynników: impact fraction (jaka część widoku została objęta przesunięciem) i distance fraction (na jaką odległość przesunął się element, w stosunku do wymiaru viewportu). Sumuje się tylko nieoczekiwane przesunięcia - interakcje użytkownika (kliknięcie w menu, przewijanie) są wyłączone z pomiaru.
Powiązane pojęcia
Core Web Vitals (CWV)LCP (Largest Contentful Paint)INP (Interaction to Next Paint)

Sprawdź swoją stronę

Wpisz adres swojej strony, w 30 sekund zobaczysz konkretną listę problemów do naprawy - wraz z wpływem na sprzedaż, SEO i koszty reklam.

Zacznij test →