Co mierzy CLS
CLS mierzy sumę wszystkich nieoczekiwanych przesunięć layoutu, które użytkownik widzi podczas ładowania strony. Typowe przyczyny to: obrazy bez zdefiniowanych wymiarów, fonty ładowane z opóźnieniem i dynamicznie wstrzykiwane elementy.
Dlaczego to ważne
Wysoki CLS oznacza, że użytkownik widzi „skaczącą" stronę. To degraduje doświadczenie, szczególnie na urządzeniach mobilnych, i negatywnie wpływa na pozycjonowanie w Google.
Jak osiągnąć CLS bliski zeru
- definiować wymiary obrazów w HTML,
- używać placeholderów (np. Blur Base64),
- unikać dynamicznego wstrzykiwania elementów nad widoczną treścią,
- ładować fonty z preloadem.
W systemach z natywnym potokiem mediów (np. automatycznym resize i generowaniem placeholderów) CLS bliski zeru wynika z architektury, a nie z późniejszego łatania.