CLS

CLS (ang. Cumulative Layout Shift, skumulowane przesunięcie układu) to wskaźnik należący do zestawu Core Web Vitals, który mierzy stabilność wizualną strony podczas jej ładowania. CLS ocenia, jak bardzo elementy interfejsu niespodziewanie przeskakują, gdy przeglądarka doładowuje treści. Wysoki CLS oznacza frustrujące doświadczenie: użytkownik chce kliknąć przycisk, a ten w ostatniej chwili przesuwa się w inne miejsce.

Jak działa pomiar CLS

Wskaźnik oblicza się jako iloczyn dwóch czynników: udziału widocznego ekranu, na którym doszło do przesunięcia, oraz odległości, o jaką elementy się przemieściły. Przesunięcia, które następują tuż po interakcji użytkownika (np. rozwinięcie menu), nie są liczone jako niepożądane. Sumowane są jedynie niespodziewane, samoistne zmiany układu w trakcie ładowania.

Głównymi winowajcami są elementy, dla których nie zarezerwowano miejsca. Obrazy bez atrybutów szerokości i wysokości, reklamy doładowywane asynchronicznie, banery cookie oraz czcionki wczytywane z opóźnieniem — wszystko to potrafi zepchnąć widoczną treść i podbić CLS. Nieumiejętnie wdrożone lazy loading również bywa źródłem problemu.

Zastosowanie w praktyce

Optymalizację CLS zaczyna się od pomiaru w narzędziach takich jak PageSpeed Insights czy Lighthouse, a następnie eliminuje najczęstsze przyczyny.

• Rezerwuj wymiary — zawsze podawaj szerokość i wysokość obrazów oraz kontenerów na reklamy.
• Ładuj czcionki stabilnie — stosuj font-display i wczytywanie z wyprzedzeniem, by uniknąć skoku tekstu.
• Nie wstawiaj treści nad widoczną — dynamiczne elementy dodawaj poniżej lub w zarezerwowanym miejscu.

CLS jest jednym z sygnałów rankingowych Google, dlatego jego poprawa przekłada się zarówno na lepszy odbiór strony przez użytkowników, jak i na potencjalnie wyższe pozycje. Razem z LCP i INP tworzy pełny obraz jakości doświadczenia na stronie.