Jak zoptymalizować CLS?


1
Jak zoptymalizować CLS?

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.

Cumulative Layout Shift (CLS) – wynik

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”.

GSC – Podstawowe wskaźniki internetowe
Widok CLS w panelu Google Search Console

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)
wskaźniki Cumulative Layout Shift

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.

rozwiń sekcję „Unikaj dużych przesunięć…”

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.

efekt przeprowadzonej optymalizacji

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ą.


Podoba ci się? Podziel się z przyjaciółmi!
1
Jeremiasz Nowak
Na co dzień młodszy programista php, ale nie unika frontendowych technologii. Interesuje się szeroko pojętym pozycjonowaniem (seo). W tej sferze stara się wykorzystać swoje umiejętności programowania w php - w oparciu o najpopularniejsze platformy, cmsy.

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *