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.