Google już jakiś czas temu wprowadziło w życie podstawowe wskaźniki internetowe, które ściśle powiązane są z wydajnością naszej strony lub sklepu internetowego. Powstały czynniki takie jak: LCP, FID, czy CLS. Po kolei tłumacząc LCP jest to wskaźnik największego wyrenderowania treści, FID to opóźnienie przy pierwszym działaniu i na sam koniec CLS, który dziś zoptymalizujemy, czyli nowy czynnik rankingowy w google czyli zbiorcze przesunięcia układu.
Jak google oblicza wskaźnik CLS?
Testując naszą witrynę przez PageSpeed Insights lub bezpośrednio przez LightHouse w konsoli zawsze otrzymamy zbiorczy wynik CLS, czyli najniższą wspólną wartość dla 75% wyświetleń adresu URL w danej grupie. Nie inaczej jest z wynikiem otrzymanym w Google Search Console, tam również zawsze będziemy mieli informację o wyniku zbiorczym, a jedyną możliwością jednostkowego podejrzenia wskaźnika CLS dla danej podstrony jest wejście w szczegółowy raport.
Po co w ogóle powstał wskaźnik CLS?
Google stare się rozwija i szuka nowych czynników rankingowych, według których będą ustalane pozycje w wynikach wyszukiwania. Podstawowe wskaźniki internetowe informują nas, że google co raz bardziej będzie zwracało uwagę na wydajność strony i to nie tylko pod kątem samej prędkości, bo jak wspomnieliśmy na wstępie powstało kilka czynników i prawdopodobnie to kwestia czasu, a nie tylko CLS, a wszystkie zaczną mieć realny wpływ na pozycje w wynikach wyszukiwania. Powstał więc po to, żeby twórcy stron i osoby, które je optymalizują zwracały uwagę na aspekty szeroko pojętej wydajności i doświadczenia użytkownika, to dlatego też co raz więcej firm oferuje usługi SEO + UX.
Jak sprawdzić jaki jest mój wynik CLS?
Najprostsze metody to wykorzystanie dwóch ogólnodostępnych narzędzi, czyli: https://developers.google.com/speed/pagespeed/insights/?hl=pl i GSC (Google Search Console). Wybierając pierwsze kliknij w link i wprowadź adres swojej strony internetowej, dla której chcesz zweryfikować prędkość strony i podstawowe wskaźniki internetowe zarazem. Po przeładowaniu systemu poszukaj sekcji, jak na poniższym zdjęciu.
Jeżeli zdecydowaliśmy się na GSC i mamy zweryfikowaną domenę po zalogowaniu na swoje konto w lewej kolumnie znajdziesz „Ulepszenia”, następnie kliknij w „Podstawowe wskaźniki internetowe”.
Ranking CLS – wartości
CLS ma swoje kryteria, to znaczy, że dane wartości w określonym zakresie będą stanowiły adresy dobrej jakości, inne wymagające poprawy lub słabej jakości. Naturalnie najlepiej, żeby w tej sekcji GSC (jak i każdej innej było zielono), a w jakich kryteriach musimy się zmieścić, żeby google uznało w kwestii CLS nasze adresy URL za dobre?
| Dobra jakość (<= 0,1) | Wymagana poprawa (<= 0,25) | Słabej jakości (> 0,25) |
Jakie podjąć działania, żeby poprawić wynik CLS?
Na niechciane z punktu widzenia wskaźników wydajności witryny, przesunięcia układu mogą powstawać z wielu przyczyn. Zanim przejdziemy do wyjaśnień, jakie działania należy podjąć, warto sprawdzić, które w ogóle sekcje ulegają przesunięciu. Sprawdzić to możemy w niezawodnym PageSpeed Insights lub w LightHouse. Wykorzystajmy do tego celu PSI.
Po kliknięciu w „Unikaj dużych przesunięć układu” otrzymasz listę sekcji, które najbardziej ulegają przesunięciu, przez co nasz wynik jest niezadowalający.
Ładowanie czcionek ma wpływ na CLS
Wykorzystaj „” do ładowania czcionek w Twoim serwisie. Przykład:. Zaleca się także korzystanie z „font-display: optional”.
Nie używaj styli w formie inline
Pozbądź się ze swojego kodu styli inline typu div class=”width:55%”, zamiast tego zdefiniuj klasę dla diva i w arkuszach styli zakoduj odpowiednią szerokość.
Reklamy osadzone w górnej części witryny
Jeśli korzystasz z wszelkiego rodzaju reklam, przeprowadź działania, żeby nie wyświetlały się one w górnej części Twojej strony, lepiej jak będą pojawiały się w środku lub na dole.
Osadzaj elementy typu iFrame w przygotowanych sekcjach
Nie wklejaj iframe byle jak, a wrzucaj je tylko do sekcji z określonymi wymiarami height i width.
Dostosuj wymiary grafik
Moim zdaniem najważniejszy aspekt, chociaż to zależy też od jaki jest format naszej strony, ale przeciętnie odpowiednie zoptymalizowanie grafik pozwoli Ci na pozbycie się problemu związanego ze słabą jakością adresów według wskaźnika CLS. Jeśli dotychczas deklarowałeś wymiary grafik na swojej stronie przy pomocy cssa i magicznego „max-width:100%;height:auto;” to jest bardzo prawdopodobne, że przy rozbudowanym serwisie Twój wynik CLS będzie nieodpowiedni. Zamiast tego wypróbuj poniższego kodu. Zastanawiasz się pewnie co z RWD? Z pomocą może przyjść srcset i dostosowanie grafik do odpowiednich wymiarów strony.
<img src="jakiesZdjecie.png" width="100" height="100" alt="optymalizacja CLS"Optymalizacja CLS PrestaShop – Case Study
Pierwsza moja konfrontacja ze wskaźnikiem CLS była na PrestaShop. Sklep jak na tę platformę i standardy w miarę wydajny, bo PSI na mobile ok 60, a na desktopie ok. 80. Wynik CLS niestety jednak fatalny.
Na powyższej grafice widać jak to wyglądało w praktyce. Większość podstron w obrębie całego serwisu miało słaby wynik CLS, a zbiorczo wynik wynosił około: 0,5.
Podjęte działania w celu optymalizacji CLS na PrestaShop
Z racji, że była to moja pierwsza optymalizacja tego wskaźnika, trochę czasu zeszło na to zanim znalazłem genialny środek, który momentalnie pozwolił zapomnieć o słabych adresach URL według google. Na podstronach kategorii zacząłem od sprawdzenia, czy jakiś moduł, który podpięty był pod kategorię nie był problemem. Wyłączanie kolejnych modułów delikatnie poprawiało wynik CLS, ale nie na tyle, żeby zejść do dobrych adresów (zresztą, nie chcemy się też pozbywać niektórych funkcjonalności oferowanych przez moduły). Niestety nie był to dobry trop. Zdefiniowałem ładowanie czcionek przez preload efekt jak w przypadku wyłączania modułów – delikatna poprawa, ale nie zadowalająca. W końcu ruszyłem rozmiary grafik – testowo, a efekt był piorunujący bo wszystko nagle w testerze na zielono! Na kategoriach temat załatwiony, bo wystarczyło odpowiednio określić wymiary zdjęć produktów. Na stronach informacyjnych problem nagle zniknął. Pozostały jeszcze podstrony produktowe i sama strona główna, która finalnie była największym wyzwaniem. Na podstronie produktowej dopasowanie odpowiednich wymiarów zdjęć produktów i sliderów z produktami powiązanymi okazało się skuteczne, a na stronie głównej przeprowadziłem działania, które również były powiązane z rozmiarami grafik, co raczej już Cię dziwić nie powinno, a mnie na pewno już nigdy nie zdziwi. Jeśli coś było statycznego, to prosta robota, więcej działań trzeba przeprowadzić w momencie, kiedy na stronie głównej mamy slidery, które wymiary mają narzucane przez javascript, wtedy trzeba trochę pogrzebać w kodzie lub wymyślić alternatywę i zastąpić slider czymś innym.
Ze wspominanego wcześniej CLS na urządzeniach mobilnych ok. 0,5 udało się zejść do 0,002. Czy te działania zadziałają tak samo u Ciebie? Musisz to zweryfikować jest duża szansa, ale każda strona, sklep jest inny. Portale mogą mieć problemy z dużą ilością reklam, blogi z iframe i tak dalej. Podsumowując – optymalizacja CLS wymaga cierpliwości i testów, ale wszystkie przeprowadzone działania na pewno w przyszłości się opłacą.
