Czy CLS dotyczy też przesunięć po interakcji użytkownika?

Nie — jeśli przesunięcie nastąpiło w ciągu 500 ms od interakcji (klik, klawisz), nie jest liczone. Google odróżnia oczekiwane przesunięcia (otwarcie akordeonu, rozwinięcie menu) od nieoczekiwanych (skok reklamy, doczytanie obrazka).

CLS dotyczy tylko ładowania czy całej sesji?

Od czerwca 2021 obowiązuje „Session Window CLS" — Google sumuje shifty w 5-sekundowych oknach i raportuje największe okno. Czyli skok 5 sekund po starcie strony nadal wlicza się do wyniku — nie tylko to, co się dzieje w pierwszej sekundzie.

Czy lazy loading obrazków psuje CLS?

Tak, jeśli nie podasz wymiarów. Z atrybutami width/height (lub aspect-ratio w CSS) lazy loading jest bezpieczny — przeglądarka rezerwuje slot zanim obrazek się załaduje. Bez wymiarów każdy lazy loaded obraz powoduje przesunięcie.

Mam dobry CLS w lab, słaby w field — dlaczego?

Lab to symulacja w stabilnych warunkach. Field łapie realne scenariusze: wolne sieci powodują dłuższe okna FOUT, reklamy ładują się losowo, użytkownik wchodzi z różnych kontekstów. Optymalizuj pod field — to ranking signal, nie lab.

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.