SEOMaster
Cumulative Layout Shift (CLS)
Stabilność układu podczas ładowania.
Cumulative Layout Shift w 30 sekund
- 01 · Zrozum: CLS (Cumulative Layout Shift) mierzy, jak bardzo elementy strony „przeskakują” w trakcie ładowania.
- 02 · Sprawdź: Lighthouse i PageSpeed pokazują wartość CLS oraz elementy, które najbardziej przesuwają układ.
- 03 · Unikaj: Obrazy i wideo bez podanych wymiarów (width/height)
Co to jest Cumulative Layout Shift?
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.
Klasyczny winowajca to obraz albo reklama bez zarezerwowanego miejsca: tekst już jest, a po chwili coś się doładowuje i spycha go w dół. Próg dobrego wyniku to 0,1.
Dlaczego to ważne dla SEO
Skaczący układ to nie tylko irytacja — prowadzi do błędnych kliknięć (np. w reklamę zamiast w przycisk) i psuje zaufanie do strony.
Jak to sprawdzić
Lighthouse i PageSpeed pokazują wartość CLS oraz elementy, które najbardziej przesuwają układ. Obejrzyj stronę przy wolnym łączu — przeskoki wtedy widać gołym okiem.
Częste błędy
- Obrazy i wideo bez podanych wymiarów (width/height)
- Reklamy i banery bez zarezerwowanego miejsca
- Czcionki webowe powodujące przeskok tekstu
Przykład
CLS 0,05 → dobry · 0,15 → wymaga poprawy · 0,3 → słaby
Najczęstsze pytania
Jaki wynik CLS jest dobry?
Do 0,1. Powyżej 0,25 układ skacze na tyle, że użytkownicy klikają nie w to, w co chcieli.
Skąd bierze się skakanie układu?
Z obrazków i ramek bez podanych wymiarów, z banerów wstawianych nad treścią po wczytaniu oraz z czcionek podmienianych po pierwszym renderze.
Jak to naprawić najszybciej?
Podać width i height każdemu obrazkowi oraz zarezerwować miejsce na wszystko, co dogrywa się później. To zwykle załatwia większość problemu.
Poradniki na ten temat
- Jak czytać PageSpeed Insights i Core Web Vitals — Zacznij od danych polowych, potem użyj laboratorium do diagnozy. Wynik 100/100 nie jest celem samym w sobie — ważniejsze są LCP, INP i CLS prawdziwych użytkowników oraz poprawki, które usuwają konkretną przyczynę.
- Jak poprawić Core Web Vitals — LCP, INP i CLS po kolei — Trzy metryki, trzy zupełnie różne przyczyny. Ten poradnik idzie od zmian, które zajmują kwadrans i dają najwięcej, do przebudów, w które warto wchodzić dopiero na końcu.