Czym jest CLS – Cumulative Layout Shift? Poznaj wskaźnik Core Web Vitals

CLS jest jednym ze wskaźników Core Web Vitals opracowanych przez Google, które dotyczą szybkości i wydajności stron internetowych. Celem wprowadzenia zestawu nowych wskaźników w 2021 roku jest poprawa wrażeń użytkowników. To właśnie zadowolenie odbiorców, czyli potencjalnych klientów, powinno być priorytetem dla właścicieli biznesów dbających o swoje miejsce w sieci. Dowiedz się, jak jest obliczane CLS i jak zapobiegać nieoczekiwanym zmianom układu na stronie.

Spis treści

1. Czym jest CLS?

2. Jak obliczane jest CLS?

3. Kiedy dochodzi do niespodziewanch zmian układu na stronie?

4. Co zrobić, aby zapobiec nieoczekiwanym zmianom?

Czym jest CLS?

Co dokładnie oznacza skrót CLS? Cumulative Layout Shift to wskaźnik, który mierzy stabilność wizualną. Po polsku można by przetłumaczyć skrót CLS jako skumulowane przesunięcie układu.

Dzięki temu wskaźnikowi jesteśmy w stanie zbadać wrażenia użytkownika, a dokładniej częstotliwość przypadków, gdy odwiedzający naszą stronę napotyka na niespodziewane zmiany układu. Przykładem jest sytuacja, gdy internauta chciałby kliknąć w przycisk, jednak nie może tego zrobić, ponieważ przycisk zmienia swoje położenie.

Elementy, które mogą doprowadzić do zmian układu, to oprócz przycisków, m.in.:

• grafiki,
• filmy,
• czcionki,
• formularze kontaktowe.

Nieoczekiwane zmiany układu nie są pożądane i istnieje duże prawdopodobieństwo, że użytkownik nie będzie zadowolony i szybko opuści naszą stronę. A tego z pewnością nie chcemy.

Badania wskazują, że 27% polskich witryn osiągnęło już dobre wartości wskaźników Core Web Vitals[1]. Dlatego też ważne jest, aby zrozumieć, czym jest CLS i jak zoptymalizować go na swojej stronie.

Pozostałe wskaźniki Core Web Vitals, obok CLS, to:

• LCP, czyli Largest Contentful Paint – określa pomiar czasu ładowania strony (w tym jej największego elementu).
• FID, czyli First Input Delay – mierzy czas od pierwszej interakcji użytkownika z odwiedzaną przez niego stroną do momentu, gdy przeglądarka zareaguje na tę interakcję.

Jak obliczane jest CLS?

Obliczenie obejmuje dwie metryki.

Pierwszą z nich jest impact fraction. Pomiar ten informuje, ile miejsca zajmuje niestabilny element na stronie. Pod uwagę brany jest moment jego załadowania, aż po zajęcie przez niego ostatecznej pozycji na stronie.

Przykładem, który przytacza Google, jest element, który zajmuje 50% miejsca na stronie, a następnie spada o 25%. Po zsumowaniu wartość 75% jest wyrażana jako 0,75 (wartość impact fraction została oznaczona na grafice przerywaną linią). Źródło: Cumulative Layout Shift (CLS) (web.dev)

Drugi pomiar to distance fraction. Jest to odległość, o jaką element przesunął się z pozycji początkowej do pozycji końcowej.

W powyższym przykładzie element strony przesunął się o 25%. Wartość distance fraction wyrażana jest jako 0,25 (na grafice została oznaczona fioletową strzałką). Źródło: Cumulative Layout Shift (CLS) (web.dev)

Jak obliczyć CLS? To bardzo proste. Wystarczy pomnożyć powyższe dwie metryki. W tym przypadku będzie to:

0,75 x 0,25 = 0,1875

Jaki wynik jest w porządku? CLS powinien wynosić poniżej 0,1. Słaby wynik wskazuje na problemy na stronie, które należy jak najszybciej rozwiązać. Chcesz sprawdzić kondycję Twojej witryny?

Wykonaj darmowy audyt strony i popraw jej widoczność w wyszukiwarce. Wykonaj teraz >>

Kiedy dochodzi do niespodziewanych zmian układu na stronie?

Według Google jest pięć przyczyn, które doprowadzają do przesunięcia układu:

1. dodawanie grafik bez określenia ich wymiarów,
2. umieszczanie reklam, również bez określenia wymiarów,
3. dodawanie dynamicznego contentu (przykładami takich treści są posty z mediów społecznościowych, filmiki z YouTube’a czy tweety, które często są osadzane na stronach),
4. używanie nieodpowiednich czcionek (sprawiają, że użytkownik traci z oczu tekst, który się przesuwa lub ładuje się z opóźnieniem),
5. akcje oczekujące odpowiedzi od sieci przed zaktualizowaniem DOM-u (Document Object Model).

Co zrobić, aby zapobiec nieoczekiwanym zmianom?

• W przypadku obrazów, grafik czy filmów – zadbaj, by miały one przypisane odpowiednie wymiary wysokości i szerokości w kodzie HTML. Możesz to zrobić za pomocą atrybutów width oraz height. Zadbaj o responsywność, upewnij się, że różne rozmiary obrazów dla różnych rozdzielczości, mają te same proporcje.
• W przypadku reklam – używaj alternatywnych banerów reklamowych lub obrazów zastępczych.
• W przypadku czcionek – używaj rel = “preload” do ich pobierania. W ten sposób wskażesz przeglądarce, że zasoby te są konieczne do poprawnego wyświetlenia strony, dlatego musi pobrać je ona już na wczesnym etapie ładowania.

Ponadto nigdy nie wstawiaj treści powyżej tej już istniejącej, chyba że do takiego stanu rzeczy ma prowadzić akcja użytkownika. Poza tym wykorzystuj animacje, które gwarantują płynne przejście. Pozwoli to na utrzymanie ciągłości[2].

Źródła:

[1]     The importance of mobile user experience – Think with Google

[2]     Cumulative Layout Shift – Overview of 2021 Google Ranking Factor (searchenginejournal.com); Cumulative Layout Shift (CLS) (web.dev)