CLS (Cumulative Layout Shift)
CLS (Cumulative Layout Shift) to wskaźnik niestabilności wizualnej strony — sumuje wszystkie nieoczekiwane przesunięcia elementów w trakcie ładowania i interakcji. Trzecia metryka Core Web Vitals i sygnał, który użytkownicy boleśnie odczuwają, klikając „nie ten przycisk".
Jak liczy się CLS
Wzór: (udział viewportu przesuniętego) × (odległość przesunięcia). Każdy „shift event" dodaje do sumy. CLS to wartość bezwymiarowa — 0,1 to próg dobrego doświadczenia, 0,25 to już poważny problem dla użytkownika.
Progi
Dobry: ≤ 0,1.
Wymaga poprawy: 0,1–0,25.
Słaby: > 0,25.
Klasyczne przyczyny CLS
Obrazki bez wymiarów — przeglądarka rezerwuje 0 px, dopiero po pobraniu obrazka wstawia 800 px, reszta strony skacze w dół. Reklamy ładujące się dynamicznie nad treścią. Web fonts z FOUT — tekst przerysowuje się po wczytaniu fontu, layout się przesuwa. Pop-up consent banner wstawiający się po sekundzie i przepychający content. Lazy injecting komponentów (dynamic imports w React) bez placeholdera o tej samej wysokości.
Jak poprawić
Zawsze ustawiaj width i height na obrazkach/videach (lub aspect-ratio w CSS). Rezerwuj sloty na reklamy (min-height). font-display: optional lub swap + preload critical fontów. Placeholder o tej samej wysokości pod content ładowany dynamicznie. Cookie banner — pozycja fixed, nigdy nie pushuj layoutu.