Dlaczego to denerwuje (i kosztuje)
CLS mierzy coś, co każdy zna z frustracji: układ, który przeskakuje w trakcie ładowania. Czytasz tekst, a on nagle zjeżdża w dół, bo nad nim doładowała się grafika. Albo — gorzej — sięgasz po przycisk „Zadzwoń”, a w momencie kliknięcia doskakuje reklama i trafiasz w nią zamiast w przycisk. To nie jest kosmetyczny drobiazg: niestabilny układ bezpośrednio niszczy konwersję, bo użytkownik klika nie tam, gdzie chciał, i traci zaufanie do strony. Dlatego CLS to jeden z trzech filarów Core Web Vitals — mierzy irytację, która realnie odbiera kontakty.
Co powoduje wysoki CLS
Winowajca jest prawie zawsze ten sam: coś pojawia się później i przesuwa to, co już było widoczne. Konkretnie:
- obrazy i reklamy bez zarezerwowanego miejsca — ładują się z opóźnieniem i spychają treść,
- czcionki doładowywane w locie,
- elementy wstrzykiwane skryptami po załadowaniu strony.
Jak naprawić
Rozwiązanie jest zaskakująco proste w idei: rezerwuj z góry miejsce dla wszystkiego, co doładuje się później. Jeśli przeglądarka wie, że obrazek zajmie 400×300 px, zostawi na niego pustą przestrzeń — i nic nie doskoczy, gdy grafika w końcu się pojawi. W praktyce:
- ustaw stałe wymiary obrazków, reklam i osadzonych elementów,
- unikaj wstawiania treści nad tą już widoczną.
Chodzi o to, by układ, który użytkownik zobaczył, pozostał stabilny. CLS domyka trójkę z LCP (szybkość) i INP (responsywność) — dopiero razem opisują pełne wrażenie ze strony.