Spis treści
Czytasz teraz:
CLS – jak poprawić Cumulative Layout Shift? Kompleksowy przewodnik
Zamknij
Termin CLS może przywodzić na myśl model Mercedesa. Nie o motoryzacji tym razem mowa, a o parametrze odgrywającym bardzo istotną rolę w SEO. Nie da się jednak ukryć, że o dobry współczynnik CLS na swojej stronie warto zabiegać nie mniej niż o ekskluzywne auto. Dowiedz się, za co odpowiada ten wskaźnik i w jaki sposób skutecznie zoptymalizować go na własnej witrynie.
Co to jest CLS?
Widoczność Twojej marki w wyszukiwarce zależy od spełniania jak największej liczby kryteriów (Core Web Vitals), na podstawie których algorytm Google klasyfikuje strony. Pozycjonowanie służy zatem dostosowaniu strony internetowej do najwyższych standardów. Jest wiele czynników podlegających ocenie, a jeden z nich stanowi CLS, czyli Cumulative Layout Shift.
Ten enigmatyczny czynnik to nic innego jak miara stabilności wizualnej. Określa ona, jak często użytkownicy doświadczają nieoczekiwanych zmian położenia poszczególnych elementów interfejsu. Wzorcowo cała zawartość witryny powinna ładować się równie szybko. W przypadku gorzej zoptymalizowanych stron często jednak bywa, że niektóre elementy pojawiają się z opóźnieniem, już po wstępnym wczytaniu interfejsu. Należy zatem dołożyć wszelkich starań, aby wyzbyć się takich uchybień.
Dlaczego trzeba zadbać o Cumulative Layout Shift?
Aby dokładniej zobrazować znaczenie opisywanego wskaźnika, warto postawić się na miejscu użytkownika odwiedzającego stronę internetową. Posłużmy się zatem przykładem. Wyobraź sobie, że chcesz kliknąć wybrany przycisk, a w ostatniej chwili doładowuje się w tym miejscu dodatkowy baner. Tym samym trafiasz w zupełnie inne miejsce, niż oczekujesz.
(Dalszą część artykułu znajdziesz pod formularzem)
Wypełnij formularz i odbierz wycenę
Zapoznamy się z Twoim biznesem i przygotujemy indywidualną ofertę cenową na optymalny dla Ciebie mix marketingowy. Zupełnie za darmo.
Administratorem Twoich danych osobowych jest Verseo spółka z ograniczoną odpowiedzialnością z siedzibą w Poznaniu, przy ul. Węglowej 1/3.
O Verseo
Siedziba Spółki znajduje się w Poznaniu. Spółka jest wpisana do rejestru przedsiębiorców prowadzonego przez Sąd Rejonowy Poznań – Nowe Miasto i Wilda w Poznaniu, Wydział VIII Gospodarczy Krajowego Rejestru Sądowego pod numerem KRS: 0000910174, NIP: 7773257986. Możesz skontaktować się z nami listownie na podany wyżej adres lub e-mailem na adres: ochronadanych@verseo.pl
Masz prawo do:
- dostępu do swoich danych,
- sprostowania swoich danych,
- żądania usunięcia danych,
- ograniczenia przetwarzania,
- wniesienia sprzeciwu co do przetwarzania danych osobowych,
- przenoszenia danych osobowych,
- cofnięcia zgody.
Jeśli uważasz, że przetwarzamy Twoje dane niezgodnie z wymogami prawnymi masz prawo wnieść skargę do organu nadzorczego – Prezesa Urzędu Ochrony Danych Osobowych.
Twoje dane przetwarzamy w celu:
- obsługi Twojego zapytania, na podstawie art. 6 ust. 1 lit. b ogólnego rozporządzenia o ochronie danych osobowych (RODO);
- marketingowym polegającym na promocji naszych towarów i usług oraz nas samych w związku z udzieloną przez Ciebie zgodą, na podstawie art. 6 ust. 1 lit. a RODO;
- zabezpieczenia lub dochodzenia ewentualnych roszczeń w związku z naszym uzasadnionym interesem, na podstawie art. 6 ust. 1 lit. f. RODO.
Podanie przez Ciebie danych jest dobrowolne. Przy czym, bez ich podania nie będziesz mógł wysłać wiadomości do nas, a my nie będziemy mogli Tobie udzielić odpowiedzieć.
Twoje dane możemy przekazywać zaufanym odbiorcom:
- dostawcom narzędzi do: analityki ruchu na stronie, wysyłki informacji marketingowych.
- podmiotom zajmującym się hostingiem (przechowywaniem) strony oraz danych osobowych.
Twoje dane będziemy przetwarzać przez czas:
- niezbędny do zrealizowania określonego celu, w którym zostały zebrane, a po jego upływie przez okres niezbędny do zabezpieczenia lub dochodzenia ewentualnych roszczeń
- w przypadku przetwarzanie danych na podstawie zgody do czasu jej odwołania. Odwołanie przez Ciebie zgody nie wpływa na zgodność z prawem przetwarzania przed wycofaniem zgody.
Nie przetwarzamy danych osobowych w sposób, który wiązałby się z podejmowaniem wyłącznie zautomatyzowanych decyzji co do Twojej osoby. Więcej informacji dotyczących przetwarzania danych osobowych zawarliśmy w Polityce prywatności.
Co do zasady, cierpliwość użytkowników internetu wyczerpuje się bardzo szybko. Czasem wystarczą drobne niedoskonałości, aby ktoś porzucił chęć zapoznania się z Twoją ofertą. Kiepski CLS może zatem sprawić, że stracisz szansę na pozyskanie nowego klienta.
Oprócz kwestii związanych z wrażeniami odbiorców liczą się również odczyty robotów Google. Jeśli algorytm skanujący Twoją stronę wykryje kiepski CLS, skutkiem bywa obniżenie pozycji w wyszukiwarce na rzecz konkurencji. Można zatem uznać, że CLS stanowi parametr z pogranicza UX oraz SEO.
W jaki sposób mierzony jest współczynnik CLS?
Google uznaje, że dobry wynik CLS wynosi nie więcej niż 0,1. Jeśli uzyskujesz wynik poniżej 0,25, trafiasz do grona najgorszych stron pod tym względem. Wszystkie wartości pomiędzy wskazanymi przedziałami wypadają średnio, a więc wymagają usprawnień. Rezultat obliczany jest na podstawie następujących czynników:
- rozmiar obrazów,
- dynamiczna zawartość, np. banery reklamowe,
- czcionki o zmiennej stylistyce,
- czas ładowania poszczególnych elementów osadzonych na stronie.
Przy wykonywaniu pomiarów liczą się komponenty odległości oraz wpływu. Ten pierwszy odnosi się do dystansu pomiędzy faktyczną pozycją a pierwotną. Z kolei kwestia wpływu dotyczy zakresu zajmowanego miejsca na ekranie urządzenia.
Jak sprawdzić CLS?
Google zapewnia kompleksowe narzędzia pozwalające na monitorowanie bieżącego wskaźnika CLS. Pierwszą propozycję stanowi Page Speed Insights. Wystarczy przy użyciu tego narzędzia wygenerować analizę, aby uzyskać dane dotyczące urządzeń mobilnych oraz stacjonarnych.
Alternatywne rozwiązanie stanowi Lighthouse Tools będący wtyczką działającą w środowisku Google Chrome. Po zainstalowaniu tego narzędzia wejdź do menu narzędzi, a następnie rozwiń sekcję z narzędziami dla programistów. Tam uzyskasz możliwość wygenerowania raportu. W podsumowaniu znajdziesz wyniki uwzględniające również CLS badanej strony. Warto podkreślić, że Lighthouse Tools pozwala na uzyskanie bardziej szczegółowych wyników niż Page Speed Insights. To zatem doskonałe rozwiązanie dla zaawansowanych pozycjonerów, którzy doskonale wiedzą jaki użytek zrobić z precyzyjnych danych.
Jak poprawić CLS?
Skoro wiesz już co to jest CLS, czas na gwóźdź programu, czyli praktyczne wskazówki pozwalające na udoskonalenie optymalizacji strony internetowej. Zapoznaj się z poniższymi wytycznymi.
- Przypisuj obrazom dokładne wymiary
Wiele niedoskonałości obniżających wynik CLS jest konsekwencją używania grafik o niedoprecyzowanym rozmiarze. Takie elementy mogą dynamicznie zmieniać swój układ w zależności od używanego urządzenia. W konsekwencji czasem trudno zapanować nad ich położeniem. Rozwiązaniem jest właśnie określenie konkretnego rozmiaru. Używaj do tego parametrów „width” oraz „height”.
- Utrzymuj reklamy w ryzach
W ciągu ostatnich lat dużą popularność zdobyły dynamiczne formaty reklamowe. Ich sekret tkwi w dostosowaniu do preferencji odbiorcy. Trzeba jednak mieć na uwadze, że takie kreacje mogą narobić bałaganu na stronie internetowej i tym samym obniżyć współczynnik CLS. Warto zatem wyznaczyć określoną przestrzeń przeznaczoną na prezentację reklam.
- Unikaj dynamicznych szablonów
Gdy dobierasz gotowy szablon, wybierz statyczną opcję. Podobnymi założeniami staraj się kierować, jeśli chcesz skorzystać z autorskiego motywu. Ograniczona ilość spektakularnych efektów wcale nie musi oznaczać, że trudniej będzie zrobić wrażenie na odbiorcy. Użyteczność stanowi priorytet w internecie, a minimalizm pozostaje w cenie mimo upływu czasu i zmieniających się trendów. Użytkownicy z pewnością docenią przejrzystość i czytelność interfejsu.
- Zadbaj o ładowanie czcionek
Zdecyduj się na tzw. preload kluczowych fontów. Polega to na wcześniejszym załadowaniu wykorzystywanych czcionek. Dzięki temu strona nie będzie musiała na bieżąco zaciągać z serwera danych dotyczących stosowanej typografii. To wpłynie korzystnie zarówno na prędkość ładowania strony, jak i spójny układ całego interfejsu.
- Zrezygnuj z asynchronicznie doczytywanych elementów
Czasem kreatywna koncepcja przyświecająca budowie strony może zakładać załadowanie części zawartości z opóźnieniem. Takie zabiegi bywają efektowne, ale wpływają niekorzystnie na Cumulative Layout Shift. Jeśli zatem zależy Ci na jak najwyższej pozycji w wyszukiwarce, warto unikać tego rodzaju urozmaiceń.
Bądź pierwszym który napisze komentarz.