CLS, czyli nowy czynnik rankingowy. Co powinieneś o nim wiedzieć?

CLS, czyli nowy czynnik rankingowy. Co powinieneś o nim wiedzieć?

Pod koniec maja 2020 roku Google ogłosiło inicjatywę, której celem jest poprawa user experience na stronach internetowych. Doświadczenie użytkowników w najbliższych miesiącach zacznie odgrywać coraz większą rolę. Stanie się tak zwłaszcza w 2021 roku, kiedy to zostanie wprowadzony nowy czynnik rankingowy, czyli CLS.

Czym jest ów CLS i jak się do niego przygotować? Tego dowiesz się w tym artykule.

CLS – czym jest?

CLS to skrót od Cumulative Layout Shift. Sam Layout Shift (zmiana układu) odnosi się do ruchu zachodzącego na stronie internetowej po jej załadowaniu. Oficjalna definicja brzmi:

Cumulative Layout Shift (CLS) – metryka należąca do Core Web Vitals, która mierzy niestabilność treści poprzez sumowanie tych zmian w layoucie, które nie pojawiają się w ciągu 500 ms od podjęcia akcji przez użytkownika (user input). CLS analizuje ilość contentu przeniesionego w sekcji widocznej dla użytkownika (impact fraction), jak również odległości, na jakie zostały przesunięte owe elementy (distance fraction).

Layout Shift jest obliczany według poniższego wzoru:

Layout Shift Score = Impact Fraction * Distance Fraction

Google przypisuje wartość zmiany układu do każdego elementu z osobna, a następnie dodaje je ze sobą, aby uzyskać tytułowy Cumulative Layout Shift.

Google posługuje się następującym przykładem, aby wyjaśnić owo pojęcie: jeśli czytasz artykuł, nie chcesz, aby któryś z jego fragmentów nagle zmienił pozycję, zwłaszcza gdy jesteś w połowie czytania. Gdy tak się stanie, „ucieknie” Ci miejsce, w którym byłeś i będziesz musiał szukać go jeszcze raz.

Załóżmy też, że masz zamiar kliknąć przycisk na stronie, a on nagle przesuwa się w górę na ekranie, przez co po prostu w niego nie trafiasz. Na pewno nie należy to do przyjemnych doświadczeń.

Przy ocenie CLS wynik poniżej 0,1 uznawany jest za dobry, a powyżej 0,25 traktowany jest jako zły:

Co warto jeszcze wiedzieć o Cumulative Layout Shift?

Ekrany telefonów komórkowych są mniejsze, dlatego wszelkie zmiany układu, które na nich występują, bardziej rzucają się w oczy. Jako że Google kładzie duży nacisk na mobile, powinieneś koniecznie zadbać o Cumulative Layout Shift, jeśli zależy Ci na optymalizacji pod te urządzenia.

Pamiętaj także, że nie wszystkie zmiany w układzie muszą być złe. Za niechciane uważa się je wtedy, gdy dochodzi do nich bez udziału użytkownika, zakłócając przy tym to, co aktualnie robi na stronie. Wiele z nich jest tak naprawdę inicjowanych przez odwiedzającego stronę. Niektóre witryny mają choćby przycisk, który po kliknięciu przewija stronę na sam dół, aby w ten sposób szybko przeskoczyć do komentarzy użytkowników. Taka funkcja jest jak najbardziej przydatna i pożądana.

Google rozumie to i dlatego przy obliczeniach wartości współczynnika wyklucza wszelkie zmiany układu, które następują w ciągu 0,5 sekundy od podjęcia akcji przez użytkownika (czyli gdy zajdzie po jego stronie tzw. input). Warto o tym pamiętać podczas implementowania funkcji, które powodują zmiany w układzie strony. Jeżeli chodzi o wcześniejszy przykład przycisku przenoszącego użytkownika na sam dół strony, wszystko to powinno odbyć się w minimum 0,5 sekundy, aby akcja ta nie została ujęta w CLS.

Jak zadbać o dobrą wartość CLS?

Do nagromadzenia się Cumulative Layout Shift prowadzi:

  • Nieodpowiednie stosowanie czcionek, które powoduje tzw. flash of invisible text (FOIT) lub flash of unstyled text (FOUT). FOIT zachodzi wtedy, gdy przeglądarka potrzebuje informacji o czcionce z serwera. Dopóki jej nie otrzyma, docelowy tekst nie jest widoczny, a użytkownik w jego miejscu nic nie widzi. FOUT ma miejsce z podobnych powodów, ale w tym przypadku tekst się ładuje. Jako że przeglądarka także z opóźnieniem otrzymuje informację o czcionce, przez chwilę widoczny tekst nie ma odpowiedniej stylistyki.
  • Umieszczanie obrazów bez dokładnego określenia ich wymiarów.
  • Reklamy w postaci banerów bez określenia wymiarów.
  • Akcje, które oczekują odpowiedzi od sieci przed zaktualizowaniem DOM-u (Document Object Model).
  • Jakikolwiek content, który jest dodawany dynamicznie.

Oto kilka zasad, które pozwolą Ci uniknąć problemów z CLS:

  • Zawsze umieszczaj atrybuty rozmiaru na zdjęciach i elementach wideo lub w inny sposób zarezerwuj wymaganą przestrzeń, np. za pomocą pól proporcji CSS. Dzięki temu przeglądarka zawsze będzie w stanie z góry przydzielić odpowiednią ilość miejsca na stronie podczas ładowania obrazu. Możesz także skorzystać z tzw. unsized-media feature policy, dzięki której takie zachowanie podczas skalowania będzie domyślne.
  • Nigdy nie umieszczaj contentu ponad tym, który już istnieje. Wyjątkiem jest sytuacja, kiedy do takiego stanu rzeczy ma prowadzić akcja użytkownika. Dzięki temu wszelkie zachodzące w układzie zmiany nie będą niespodziewane (a więc i niepożądane).
  • Stosuj animacje, które zapewniają płynne przejście. Takie rozwiązanie sprawia, że podczas przejścia na stronie użytkownik stale widzi, gdzie jest przenoszony, dzięki czemu zachowuje punkt odniesienia.

CLS – podsumowanie

Google zdaje sobie sprawę, że COVID-19 spowodował wystarczająco dużo zamieszania, dlatego postanowił nie wprowadzać zmian związanych z CLS w najbliższych miesiącach, lecz dopiero w 2021 roku. Oprócz tego firma poinformuje o dokładnej dacie aktualizacji 6 miesięcy wcześniej.

Google udostępnia także przydatne narzędzia jak Chrome DevTools oraz Lighthouse, które pozwalają zmierzyć CLS. Choć o omawiany czynnik warto dbać, to jednak według oficjalnych zapewnień nie ma jeszcze potrzeby podejmować natychmiastowych akcji.

5 przykładów wykorzystania maszynowego uczenia się w e-commerce
Jakich błędów unikać podczas pozycjonowania sklepów internetowych?
Komentarze
Dodaj komentarz

Twój komentarz zostanie poprawiony przez stronę w razie potrzeby.

Nowa lokalizacja