Czym jest wskaźnik CLS i jak go używać w SEO?

Jeśli interesujesz się pozycjonowaniem stron, na pewno słyszałeś o wskaźnikach Core Web Vitals. Jednym z nich jest wskaźnik CLS – Cumulative Layout Shift, który mierzy stabilność wizualną strony. Choć może brzmieć technicznie, CLS ma realny wpływ na pozycje w Google i doświadczenie użytkowników. W tym artykule wyjaśniamy, czym jest wskaźnik CLS, dlaczego jest ważny i jak go poprawić.

Definicja CLS (Cumulative Layout Shift)?

CLS mierzy, jak bardzo przesuwają się elementy na stronie podczas jej ładowania. Im więcej nieoczekiwanych przesunięć – tym wyższy wynik CLS, co jest złe.
Przykład? Klikasz przycisk, ale nagle przesuwa się on w dół, bo załadowała się reklama – i trafiasz w coś zupełnie innego. Frustrujące? Google też tak uważa.

CLS jest obliczany na podstawie dwóch parametrów:

Frakcja wpływu (impact fraction) – określa, jak dużą część ekranu zajmują przesuwające się elementy (np. jeśli element zajmuje 25% ekranu, frakcja wynosi 0,25).
Frakcja odległości (distance fraction) – wskazuje, jak daleko element się przesunął (np. przesunięcie o połowę wysokości ekranu to 0,5).

Wynik CLS dla danego przesunięcia to iloczyn tych dwóch wartości, a całkowity CLS to suma wszystkich takich przesunięć na stronie.

Dlaczego CLS ma znaczenie dla SEO i UX ?

CLS to część zestawu Core Web Vitals, które Google uwzględnia jako czynnik rankingowy.
Strony, które zapewniają dobrą jakość użytkowania, mają większe szanse na lepsze pozycje w wynikach wyszukiwania. Strony z wysokim CLS są często odbierane jako nieprofesjonalne i chaotyczne.

CLS wpływa na:

Współczynnik odrzuceń (bounce rate),
Czas spędzony na stronie,
Wskaźniki konwersji (np. w e-commerce),
Ogólny odbiór strony przez użytkowników.

Jak mierzyć wskaźnik CLS?

Najłatwiejsze narzędzia to:

PageSpeed Insights – pokazuje wynik CLS i sugeruje poprawki.
Lighthouse – dostępne w przeglądarce Chrome (zakładka „Audyt” lub „Core Web Vitals”).
Google Search Console – sekcja „Podstawowe wskaźniki internetowe” (Core Web Vitals).
Web Vitals extension – dodatek do przeglądarki, który mierzy CLS w czasie rzeczywistym.

✅ dobry wynik CLS: poniżej 0.1
⚠️ średni wynik: 0.1 – 0.25
❌ zły wynik: powyżej 0.25

Najczęstsze przyczyny złego wyniku CLS

obrazy bez zdefiniowanych wymiarów (width i height) – przeglądarka nie otrzymuje informacji, ile miejsca zarezerwować na dany obraz.
reklamy oraz iframe’y, które zajmują miejsce na stronie podczas ładowania.
ładowanie czcionek z opóźnieniem, co przejawia się wizualnym efektem poruszania się tekstu.
animacje CSS lub JavaScript zmieniające układ strony.
dynamiczne treści, bez przewidywalnej struktury, np. wyskakujące powiadomienia, banery cookies (np. RODO) lub rozwijane menu.

Jak poprawić CLS?

Oto kilka praktycznych wskazówek:

🔹 zawsze definiuj rozmiary obrazów (width i height) – nawet przy responsywnych grafikach.
🔹 zarezerwuj przestrzeń pod reklamy lub iframy – np. za pomocą min-height.
🔹 unikaj przesuwania istniejącej treści – zamiast tego dodawaj nowe elementy w sposób przewidywalny.
🔹 używaj font-display: swap – aby nie czekać na załadowanie fontu kosztem layoutu.
🔹 testuj stronę na różnych urządzeniach i połączeniach internetowych – ponieważ problemy z CLS często występują tylko na urządzeniach mobilnych.

Statystyki i ciekawostki dotyczące CLS

Tylko około 46% stron internetowych spełnia obecne zalecenia Google dotyczące CLS (≤ 0,1).
Reklamy odpowiadają za 30-50% problemów z przesunięciami układu.
Średni CLS na urządzeniach mobilnych wynosi około 0,2, podczas gdy na desktopach jest niższy (około 0,1).
Aż 64% użytkowników opuszcza stronę, jeśli layout jest niestabilny.
Strony z zoptymalizowanym CLS mają o 15-20% większe szanse na osiągnięcie wysokich pozycji w wynikach wyszukiwania.

Podsumowanie

CLS to jeden z kluczowych czynników UX i SEO. Niewielkie przesunięcia na stronie mogą negatywnie wpłynąć nie tylko na wrażenia użytkowników, ale także na Twoje pozycje w Google. Na szczęście poprawa CLS nie wymaga rewolucji – wystarczy zadbać o przewidywalność układu i porządek w kodzie.