CLS Google – nowy czynnik rankingowy #1

Cumulative Layout Shift (CLS Google), to jeden z najnowszych czynników rankingowych Google, który w życie wejdzie już w maju 2021 roku. Jeżeli jeszcze o nim nie słyszeliście, to w dzisiejszym artykule zdobędziecie wszystkie niezbędne informacje na jego temat. Przekonajcie się, jakie ma znaczenie dla SEO.

Z pewnością nieraz zdarzyło się Wam podczas przeglądania strony internetowej napotkać błąd w postaci przesuwającej się z niewiadomych przyczyn treści. Na przykład chcąc kliknąć w link okazało się, że nagle zmienił on swoje miejsce i przez przypadek palec nacisnął coś zupełnie innego. Tego typu błędy na stronie powodują obniżenie jej jakości, a co za tym idzie – osłabienie pozycji rankingowej.

Jak wiemy, roboty Google wnikliwie analizują strony internetowe, by dostarczyć internautom możliwie najlepszej jakości treści, zarówno pod względem merytorycznym, jak i technicznym. Dlatego powstał czynnik rankingowy CSL Google, który ma eliminować tego typu nieprawidłowości na stronie.

CLS Google – czym jest?

Cumulative Layout Shift, czyli CLS Google w języku polskim oznacza zbiorcze przesunięcie obrazu lub skumulowane przesunięcie obrazu. Jest to miernik określający doświadczenia użytkownika ze stroną internetową, a dokładniej – z jej stabilnością wizualną.

Jak zostało wspomniane wyżej, na stronie internetowej mogą pojawiać się różnego rodzaju błędy, do których należy między innymi nieoczekiwany ruch zawartości strony. Zwykle jest to spowodowane asynchronicznym ładowaniem zasobów witryny. Przyczyn tego może być wiele, ale o tym później. Oczywiste jest, że takie doznania irytują internautów i przyczyniają się do szybkiego opuszczenia witryny, zwiększając tym samym wskaźnik odrzuceń. Jest to szczególnie istotne dla branż prowadzących działalność przez Internet, które wszelkie swoje działania skupiają na pozyskiwaniu leadów sprzedażowych.

W związku z tym, CLS Google mierzy zbiorczą wartość indywidualnych przesunięć układu na stronie, która jest sumą wszystkich nieoczekiwanych zmian na stronie liczoną od początku istnienia strony.

Co powoduje zbiorcze przesunięcie układu?

Żeby móc zapobiegać nagromadzenia się Cumulative Layout Shift, najpierw trzeba dowiedzieć się, co jest przyczyną jego powstawania.

Oto najczęstsze powody wymieniane przez Google, które osłabiają działania marketingowe:

• wgrywanie obrazów bez określenia ich wymiarów,
• zawarcie reklam i innych elementów bez określonych wymiarów,
• nieodpowiednie czcionki internetowe powodujące FOUT lub FOIT,

FOUT – ang. Flash of Unstyled Text, czyli „mignięcie nieostylowanego tekstu”. Poruszający się tekst na stronie i zmieniający się układ elementów witryny może być skutkiem wystąpienia znacznych różnic w ustawionym foncie domyślnym a docelowym (np. różnica szerokości czy grubości). Przez to internauta może stracić z oczu tekst, który przesunął się w inne miejsce na stronie.

FOIT – ang. Flash of Invisible Text, czyli „mignięcie niewidocznego tekstu”. Ten błąd ma miejsce, gdy internauta przeglądając stronę przewija pustą treść, która się nie załadowała. W związku z tym, początkowo witryna nie dostarcza pożądanej treści dla klienta i jest bezużyteczna.

• treści contentowe dodawane dynamicznie.

Przykładem takich treści są posty z Facebook’a czy też filmiki z Youtube, które często są załączane na stronach internetowych. Treści dynamiczne bywają nieprzewidywalne, a ich struktura budowy czy sama wielkość widżetu, może nie być przystosowana do ilości dostępnego miejsca witryny, co może powodować CLS Google.

Jak rozwiązywać problemy z CLS Google?

Wiedząc już, czym spowodowane są przesunięcia elementów na stronie, czas poznać sposoby optymalizacji CLS Google. W poniższym filmiku jest to bardzo fajnie i szczegółowo omówione.

Wychodzi na to, że kluczową zasadą w uniknięciu przemieszczających się treści na stronie, jest zarezerwowanie “prywatnej” przestrzeni dla obrazów, zdjęć czy reklam, ale też treści dynamicznych. Można to zrobić za pomocą odpowiednich boksów, nie zapominając przy tym o współczynniku proporcji CSS. 

Kolejna ważna kwestia, to przypisywanie odpowiedniej wysokości i szerokości do obrazów i innych elementów na stronie. Można zrobić to w kodzie HTML za pomocą atrybutów width oraz height.

Następna rada, to unikanie umieszczania treści ponad tą, która już istnieje z wyjątkiem sytuacji, w której dochodzi do interakcji z użytkownikiem.

I na koniec – wybieraj animacje gwarantujące płynne przejście, co pozwoli na utrzymanie ciągłości, a internauci podczas przemieszczania się na stronie będą mieli stały punkt odniesienia.

Jak obliczyć skumulowane przesunięcie CLS Google?

Obliczenie CLS Google obejmuje dwie miary:

• impact fraction – informuje o tym, ile miejsca pochłania niestabilny element w całej przestrzeni strony, od momentu jego załadowania na stronie, aż po ostateczne przesunięcie.

Przykład: 

Zdjęcie po lewej stronie obrazuje fragment tekstu zajmujący 50% miejsca na stronie. Prawe zdjęcie ukazuje wygląd strony po całkowitym załadowaniu, gdzie tekst przesunął się w dół o 25%. Przerywana linia czerwona zaznacza wartość impact fraction, która dla powyższego przykładu wynosi 75%.

• distance fraction – mierzy odległość, jaką pokonał element przesuwający się na stronie.

Wyjaśnienie:

Nawiązując do powyższego przykładu, obraz przesunął się w dół o 25% . To jest właśnie wartość distance fraction (zaznaczone niebieską strzałką na grafice powyżej) .

Znając powyższe wartości, obliczenie CLS Google jest banalnie proste.

Zgodnie z przykładem:

CLS = 0,75 x 0,25 = 0,1875

Skumulowane przesunięcie układu można obliczyć za pomocą danych rzeczywistych bądź symulowanych. Narzędzia, które są pomocne w pierwszym przypadku, to:

• PageSpeed Insight,
• wygenerowany raport Core Web Vitals w Google Search Console,
• raport na temat korzystania z Chrome,

natomiast narzędzia wykorzystywane najczęściej przez programistów w drugim przypadku, to:

• WebpageTest
• i Chrome DevTools.

Pewnie zastanawiacie się, jaka miara CLS Google jest dobra? 

Wartości poniżej 0,1 uznawane są za dobre. Wartości będące w granicach 0,1-0,25 wymagają poprawy. Wynik powyżej 0,25 traktowany jest już jako zły i obniżający wartość strony.

Znaczenie CLS Google dla SEO

CLS Google to jeden z trzech najnowszych czynników rankingowych Google mierzących doświadczenia internauty związane z odwiedzeniem konkretnej witryny. Poza nim są jeszcze czynniki:

• FID (First Input Delay) – określający opóźnienie pierwszego wejścia,
• LCP (Largest Contentful Paint) – mierzący wydajność ładowania strony poprzez wyrederowanie największej treści na stronie.

CLS Google z pewnością będzie wpływać na wyniki wyszukiwania strony internetowej i jest istotny z punktu widzenia SEO. Czy warto się nim przejmować? Z pewnością nie polecam go ignorować. Należy dążyć do jego optymalizacji, jak i pozostałych dwóch czynników rankingowych. Co więcej, z pewnością masz świadomość i wiesz z autopsji, że przesuwające się elementy na ekranie potrafią zdenerwować użytkownika. Wszelkie działania pozycjonowania stron nie będą miały sensu, jeżeli zaraz po wejściu w link internauta będzie chciał jak najszybciej uciec.

Podsumowanie

Google chce dla internautów jak najlepiej i nieustannie dąży do tego, by poprawiać jakość oferowanych im treści. Wierzę, że skoro Ty również zapoznajesz się z powyższym wpisem, także pragniesz tworzyć wartościowy i przyjazdy w odbiorze content dla ludzi. Czynnik CLS Google ma wejść w życie w maju 2021 roku. Masz sporo czasu, by wdrożyć się w temat i wprowadzić wszelkie usprawnienia, dzięki którym jego wartość będzie na optymalnym poziomie.