Cumulative Layout Shift (CLS)

Cumulative Layout Shift: jak bardzo strona skacze podczas ładowania. Dobrze to poniżej 0,1, a zwykłą przyczyną są obrazki i reklamy bez zarezerwowanego miejsca.

• Pomoc

Cumulative Layout Shift mierzy stabilność wizualną: jak bardzo widoczna treść przeskakuje podczas korzystania ze strony. Zero oznacza, że nic się nie przesunęło; każde nieoczekiwane przesunięcie — tekst zepchnięty w dół przez obrazek, który właśnie się wczytał, przycisk uciekający spod palca, gdy otwiera się baner — dokłada się do sumy. CLS to jedna z trzech metryk Core Web Vitals.

Progi

SiteScan stosuje granice Google: do 0,1 — dobrze, do 0,25 — wymaga poprawy, powyżej — słabo. Wartość laboratoryjna pochodzi z przebiegu Lighthouse dla strony głównej i obejmuje tylko samo ładowanie; wartość od prawdziwych użytkowników, jeśli Chrome UX Report ją ma, to 75. percentyl z 28 dni i uwzględnia przesunięcia, które zdarzają się później, przy przewijaniu i klikaniu. Dlatego obie liczby mogą się wyraźnie różnić.

Typowe przyczyny i rozwiązania

• Obrazy, filmy i ramki iframe bez wymiarów — należy dodać atrybuty width i height albo CSS aspect-ratio, by przeglądarka zarezerwowała miejsce.
• Reklamy, osadzenia i banery cookies wstawiane nad istniejącą treścią — warto dać im stałe miejsce albo nakładać je zamiast przesuwać.
• Fonty o innych metrykach — pomaga font-display: optional lub dopasowanie fontu zastępczego przez size-adjust.
• Animacje top czy height — lepiej animować transform.

Szerzej w artykule o Core Web Vitals.