Na odczucia odbiorców wpływa wiele różnych czynników. Nie zawsze jesteśmy w stanie to zmienić. Są jednak elementy, na które mamy wpływ, np. przesunięcie układu na stronie. Cumulative Layout Shift to wskaźnik, dzięki któremu da się to sprawdzić. Element Core web Vitals powstał po to, żeby poprawić  doświadczenia użytkowników.

Cumulative Layout Shift – co mierzy CLS?

Cumulative Layout Shift – jest jednym z elementów Core Web Vitals. To wskaźnik, który określa, jak stabilne są części wizualne witryny internetowej. Zbiorcze (skumulowane) przesunięcie elementów układu ruchu na stronie internetowej, który ma wpływ na doświadczenia odbiorców. CLS to istotny wskaźnik z punktu widzenia SEO, ale także część UX marketingu.

Wynik otrzymany z pomiarów CLS pokazuje czy witryna jest odpowiednio zoptymalizowana pod kątem użytkowym. Dzięki niemu można wyłapać błędy występujące podczas ładowania witryny, dostosować okna reklamowe i wpłynąć na oczekiwania odbiorców.

Przyczyny powstania Cumulative Layout Shift

Cumulative Layout Shift, czyli przesunięcie elementów na stronie ma swoje przyczyny. Więc zanim przystąpimy do obliczeń, warto wyjaśnić, skąd się biorą. Jest kilka przyczyn przesunięcia obrazu i wszystkie mają związek z nieodpowiednim wymiarem elementów w witrynie.

Przede wszystkim są to nieodpowiednie wymiary grafik, zdjęć i reklam przeznaczonych na stronę internetową. Wgrywanie elementów witryny, bez uprzedniego sprawdzenia wymiarów skutkuje właśnie anomaliami podczas ładowania strona.

Kolejną kwestą jest zastosowanie nieodpowiednich czcionek, które powodują błędy:

• FOUT – Flash of Unstyled Tekst czyli mignięcie nieostylowanego tekstu, powoduje przesunięcie się treści na stronie internetowej. Przyczyną już różnica w wielkości lub grubości zastosowanego fontu.
• FOIT – Flash of Invisible Text czyli mignięcie niewidocznego tekstu, powoduje brak treści, co jest wynikiem opóźnionego załadowania się tekstu.

 Innym powodem jest udostępnianie w swojej witrynie elementów dynamicznych z innych witryn. Mogą to być posty z mediów społecznościowych, Video YouTube, czy TikTok. Tego rodzaju treści miewają niestandardowe wymiary i mogą wyświetlać się w różnych częściach strony, nie zawsze zgodnie z naszym życzeniem.

Jak dokonać pomiarów CLS?

Do mierzenia CLS wykorzystuje się dwa wskaźniki :

• Impact fraction – pokazuje ile przestrzeni, jest zajmowane, przez dany element na stronie,
• Impact distance – mierzy odległość, jaką pokonał dany element, przesuwając się po witrynie.

CLS = Impact fraction x Impact distance

Dokonując pomiarów można posłużyć się danymi rzeczywistymi, lub symulowanymi.

Korzystając z rzeczywistych danych mamy do dyspozycji narzędzia:

• Google Search Console – raport Core Web Vitals
• PageSpeed Insight – Google
• LightHouse Tools – Chrome

Dane symulowane można wykorzystać, pracując z:

• DevTools – przeglądarka Chrome
• Web Page Test 

Jak poprawić wartość CLS?

Błędy, w postaci złej wartości CLS pojawiają się z powodu nieoczekiwanego przesunięcia elementów, co ma wpływ na zadowolenie użytkowników. Dlatego powinniśmy jak najszybciej poprawić ten stan. Istnieje kilka możliwości poprawy Cumulative Layough Shift:

1. Określ konkretne wymiary elementów na stronie – rozmiar zdjęć, filmów czy grafik jest przyczyną przesunięć. Jeśli zdefiniujemy określonych wymiarów pliki na stronie, wyszukiwarka będzie poinformowana, jaką ilością miejsca dysponuje twoja witryna. Ponadto dokładnie rozplanuj układ strony. Zaplanuj CTA takie jak „czytaj dalej” czy „więcej” zaowocuje większą ilością miejsca. W ten sposób zapanujesz nad niespodziewanymi przesunięciami, a CLS twojej witryny wypadnie pozytywnie.
2. Google Publisher Tag – to narzędzie, które pomoże Ci zrozumieć świat reklamy i rozdysponować miejsce, na twojej stronie, aby uniknąć przesunięć układu strony.
3. Zastanów się, nad zmianą na stabilny szablon strony internetowej – w ten sposób masz szansę całkowicie wyeliminować problemy z układem. 
4. Na bieżąco sprawdzaj układ graficzny i czcionki na stronie internetowej –  aby szybko dokonać niezbędnych zmian.
5. Do określenia pozycji elementów w witrynie używaj CSS.
6. Nie wykorzystuj JavaScript do ustawiania elementów na stronie.

Jak zapobiegać zmianom układu CLS ?

Wiemy, co zrobić, by poprawić wynik CLS. Są także sposoby, które mogą zapobiec skumulowanym przesunięciom układu. Co w praktyce możemy zrobić, aby uniknąć problemom CLS? Oto kilka porad:

• zachowaj kolejność na szablonie strony internetowej, umieszczając wszystkie ważne elementy na górze, na wysokości wzroku odbiorców, zanim zaczną przewijać całość,
• dbaj o rozmiar tekstu dostosowany do wymiarów grafik,
• sprawdzaj i zmniejszaj rozmiar grafiki, zanim wstawisz ją na witrynę,
• na bieżąco sprawdzaj układ strony za pomocą programów do monitorowania Core Web Vitals  np. Google Search Console, Google PageSeed Insight, LightHouse.

Jakie są skutki kiepskiego wyniku Cumulative Layout Shift?

W sytuacji, kiedy wynik Cumulative Layout Shift jest zbyt wysoki, niestety niosą za sobą szereg negatywnych konsekwencji. Przede wszystkim wysoki CLS może prowadzić do złych wrażeń użytkownika, który odwiedza stronę internetową. Kiedy użytkownicy doświadczają nieoczekiwanych zmian układu strony, wprowadza to zamęt, a często skutkuje nawet rezygnacją z przeglądania jej zawartości. W rezultacie możemy zaobserwować mniej wejść na witrynę i spadek popytu, jeśli jest to witryna sprzedażowa. Spadek zainteresowania stroną, to odwrotność tego, czego oczekują wszyscy właściciele stron internetowych. Dlatego analiza CLS i częsta optymalizacja jest niezbędna, żeby zachować stałe grono odbiorców.

Należy też zwrócić szczególną uwagę na urządzenia mobilne, ponieważ to właśnie tam niestabilne elementy, które zmieniają swoją pozycję, powodują największą frustrację użytkowników. Na pewno wpływa na to mały ekran i brak odpowiedniej ilości miejsca na wyskakujące i nakładające się na siebie okna z reklamami. W takim przypadku warto nawet wziąć pod uwagę zmniejszenie liczby reklam, na rzecz poprawy samopoczucia użytkowników. 

Gorszy wynik CLS może negatywnie działać na pozycjonowanie strony. CLS jest w tym momencie jednym z czynników rankingowych. Google analizując użyteczność serwisu, jego stabilność i odczucia odbiorców, uzna taką stronę za gorszą w porównaniu do konkurencji i obniży jej pozycję w wynikach wyszukiwania.

Podsumowując, analiza i optymalizacja CLS są niezbędne dla wydajności strony

Nieoczekiwane zmiany układu strony, to coś, co bardzo negatywnie wpływa na odbiorców. Dlatego trzeba unikać każdego nieoczekiwanego przesunięcia, bo może ono odbić się zarówno na ilość wejść, jak i pozycjonowaniu strony. Wskaźnik Cumulative Layout Shift, wchodzi w skład Core Web Vitals, które Google bierze pod uwagę w rankingu wyszukiwań. Tak więc zrozumienie i optymalizacja CLS mają duże znaczenie dla SEO. Warto więc unikać problemów z CLS, pilnując wysokości i szerokości obrazów, animacji i innych atrybutów reklamowych. Natomiast w sytuacji, gdy widoczny element zmienia swoją pozycję, natychmiast reagować i dokonywać niezbędnych zmian w szablonie witryny.