Cumulative Layout Shift [CLS] optymalizacja krok po kroku

Nasza strona ma wynik w Google PageSpeed Insight 99/100 i wszystkie czynniki rankingowe Google [First Contentful Paint, First Input Delay, Largest Contentful Paint i Cumulative Layout Shift] na zielono. Chcesz mieć podobny wynik, ale nie chcesz czytać do końca tego poradnika [choć gwarantujemy, że warto]? Kliknij tutaj i napisz do nas, a pomożemy Ci osiągnąć taki sam wynik na Twojej stronie.

Google Page Experience Signals

Zanim przejdziemy do opisu czym to jest Cumulative Layout Shift najpierw musimy wrócić jednej z ostatnich aktualizacji algorytmu Google pod kątem Google Page Experience Signals. W skrócie mówiąc to zapowiedziany od dawna update mający na celu poprawienie stron internetowych przez Google podnosząc ich właścicielom poprzeczkę w kontekście wydajności. A ponieważ aspekt ten ma ogromny wpływ na pozycjonowanie strony w Google to nikt nie może przejść obojętnie wobec Google Page Experience Signals.

Sam algorytm będzie jednak aktualizowany stopniowo, dlatego jak mówi Google:

Sygnały dotyczące jakości strony w rankingu zostaną wdrożone w maju 2021 roku.

Od tego momentu dla właściciel stron internetowych staną się obowiązkowe kryteria określane razem jako Google Core Web Vitals:

1. Largest Contentful Paint – największe wyrenderowanie treści.
2. Cumulative Layout Shift – skumulowane przesunięcie układu.
3. First Input Delay – opóźnienie przy pierwszym działaniu.

Oznacza to, że jeżeli Twoja strona internetowa nie będzie spełniać tych 3 wymogów w teście Google PageSpeed Insight to spadnie w wynikach wyszukiwania. Przynajmniej w teorii przedstawionej przez Google, jednak można spodziewać się, że tak właśnie się stanie przynajmniej za jakiś czas.

Nie oznacza to jednak, że pozostałe czynniki rankingowe poza Google Web Core Vitals, czy też samym skumulowanym przesunięciem układu [CLS] są mniej istotne. Dołączają one po prostu do już aktualnie stosowanych przez Google kryteriów w kontekście oceny strony w Google.

Teraz opiszemy Ci dokładnie czym jest Cumulative Layout Shift, a następnie przejdziemy do tego w jaki sposób możesz samodzielnie poprawić ten wynik w Google PageSpeed Insight. Zanim jednak to zrobisz przeczytaj także o First Contentful Paint [FCP].

Co to Cumulative Layout Shift?

Cumulative Layout Shift po przetłumaczeniu na język polski oznaczania dosłownie skumulowane przesunięcie układu (zwane także jako zbiorcze przesunięcie układu). A tłumacząc to już na język zrozumiały dla laika oznacza to jak wiele elementów na stronie uległo przesunięciu, gdy została ona już w pełni załadowana.

Podążając za informacją z oficjalnej strony Google możemy dowiedzieć się, że istotne jest z punktu widzenia użytkownika, aby unikać niepotrzebnych i niespodziewanych przesunięć układu witryny internetowej. W ten sposób możemy zachować tzw. wizualną stabilność, która ma pozytywny wpływ na wrażenia z użytkowania strony www.

Niespodziewane przesunięcie układu dzieje się wtedy, gdy ładowane asynchroniczne elementy strony lub też DOM zostają dodane powyżej istniejących treści. Może być to element w formie zdjęcia lub filmu, a nawet czcionka, która wczytuje się w wielkości mniejszej niż zapasowy font. Jeżeli w ostatnim czasie pamiętasz, aby na Twoich oczach na jakiejś stronie internetowej elementy w pewnym momencie przeskoczyły, a content zjechał w dół to właśnie to nazywamy Cumulative Layout Shift.

Jak domyślasz się w tym momencie, poziom skomplikowana nowoczesnych stron internetowych oraz mnogość wczytywanych na nich elementów sprawia, że naprawa Cumulative Layout Shift nie będzie prostym zadaniem. I wcale nie miało być łatwo. Aspekty tzw. technicznego SEO przenoszą przenoszą rywalizację w Google na wyższy poziom. Od momentu, gdy składniki Google Web Core Vitals wejdą do powszechnego użytku tylko najlepsze strony posiadające wsparcie najlepszych ekspertów w branży będą wstanie zawalczyć o pierwsze pozycje w Google. I choć za wcześnie, aby mówić o tym jaki dokładnie wpływ będzie miał zestaw Web Core Vitals wraz z Cumulative Layout Shift na pozycje w Google pewne jest jedno: gra toczy się o bardzo dużą stawkę 💵

Wszystkie parametry Web Core Vitals oceniane są jako:

• Dobrej jakości
• Wymagające poprawienia
• Słabej jakości

W przypadku Cumulative Layout Shift kryteria oceny są następujące:

• Poniżej 0,1
• Pomiędzy 0,1 a 0,25
• Powyżej 0,25

Dokładny wzór wyliczania skumulowanego przesunięcia układu znajdziesz na web.dev.

Wyniki te możesz sprawdzić za pomocą wspomnianego narzędzia Google PageSpeed Insight, przeglądarki Google Chrome lub też z poziomu Google Search Console. Poniżej możesz zobaczyć jak zmieniły się one ze „złych” na „dobre” po naszej optymalizacji u jednego z klientów:

Ok, jak więc osiągnąć taki wynik w Google, poprawić SEO oraz pozycje strony internetowej? Masz dwa wyjścia: możesz napisać do nas i zrobimy to za Ciebie lub spróbować naprawić to na własną rękę,

Cumulative Layout Shift krok po kroku

Przedstawimy Ci teraz jak samodzielnie krok po kroku spróbować podjąć się naprawy Cumulative Layout Shift. Ostrzegamy jednak, że nie będzie to łatwe, ale damy Ci kilka porad, które znacznie uproszą to zadanie. A ponieważ uwielbiamy system WordPress to pokażemy Ci jak zrobić to właśnie na przykładzie tego systemu.

To co, zaczynamy? 🤓

Krok 1. Wykonaj kopię zapasową

Zanim przejdziesz do jakichkolwiek prac pamiętaj, aby wykonać kopię zapasową strony internetowej. Jeżeli korzystasz z WordPress możesz zrobić to korzystając z naszego poradnika Kopie zapasowe WordPress [backup] krok po kroku.

Krok 2. Zaktualizuj motyw

Jeżeli Twoja strona korzysta z gotowego motywu to pierwszą rzeczą jaką musisz wykonać to jego aktualizacji. Co raz więcej twórców motywów WordPress dostosowuje swoje swoje dzieła do wymogów Google Web Core Vitals. Być może po aktualizacji motywu dalsza praca nie będzie już konieczna.

Jeżeli korzystasz z innego systemu CMS niż WordPress to również możesz zaktualizować motyw jeżeli istnieje taka możliwość. Jeżeli jednak motyw lub strona są napisane od zera to koniecznie będzie skorzystanie z naszej pomocy ☺️

Krok 3. Sprawdź Google Search Console

Otwórz w przeglądarce narzędzie Google Search Console i zobacz w zakładce Podstawowe wskaźniki internetowe, które podstrony posiadają za niski wynik Cumulative Layout Shift. Aby to zrobić musisz wybrać np. Urządzenia mobilne [przycisk Pobierz raport], a następnie kliknąć na dole w adresy URL dobrej, średniej lub złej jakości.

U nas wygląda to np. tak 🙃

Krok 4. Sprawdź adres URL w Google PageSpeed Insight

Jeżeli posiadasz adresy URL złej jakości lub te wymagające poprawienia to skopiuj je, a następnie sprawdź w narzędziu Google PageSpeed Insight, aby potwierdzić, czy problem nadal istnieje.

Google Search Console przedstawia ocenę stron w momencie ich ostatniego sprawdzania przez robota.

Jeżeli Twój wynik dla adresów URL wygląda mniej więcej tak:

To wiedz, że czeka Cię sporo pracy 🤷‍♂️

Krok 5. Otwórz konsolę przeglądarki

Tak, zapowiada się ciężko i łatwiej już nie będzie. Kliknij w Google Chrome prawym przyciskiem myszym w dowolnym miejscu na stronie i wybierz Zbadaj. Przejdź teraz do zakładki Performance i kliknij w przycisk przeładowania w lewym górnym rogu konsoli.

Google Chrome wykona parę dziwnych rzeczy, a Twoim oczom objawi się linia czasu:

Znajdziesz na niej wiele przydatnych informacji o czasie ładowania strony internetowej, a także o Cumulative Layout Shift [CLS]. Gdy najedziesz myszką na ten element podświetli się on na stronie, a Ty dowiesz się co powoduje ten niski wynik w Google PageSpeed Insight.

Ok, a to dopiero połowa sukcesu i dalej będzie już tylko trudniej. Nie będziemy ukrywać: jeżeli nie jesteś programistą istnieją minimalne szanse na to, że samodzielnie poprawisz element wpływające na Cumulative Layout Shift. Jednak nie zostawiamy Cię z tym problemem i przedstawimy Ci kilka porad, które choć nie pomogą Ci całkowicie rozwiązać ten problem to jednak mogą znacznie podnieść wynik strony w Google.

Krok 6. Pamiętaj o zdefiniowanych wymiarach

Dotyczących zdjęć, czcionek oraz elementów osadzonych i ramek iframe. Dzięki temu już na etapie ładowania strony internetowej przeglądarka będzie „znała” wymiary np. obrazu zanim zostanie on dodany, a Twoja strona uniknie słabej oceny Cumulative Layout Shift.

Przykładowy kod HTML ładowania zdjęcia powinien więc wyglądać tak:

<img src="https://siriuspro.pl/wp-content/uploads/zdjecie.jpg width="1280" height="720" />

Ważne jest także, aby w przypadku reklam na stronie również określić ich wymiary np. umieszczając je w elemencie <div>. Uważaj także na leniwe zdjęcia – potrafią obniżyć wynik Cumulative Layout Shift❗️

Możesz więc sprawdzić wszystkie zdjęcia na stronie, czy posiadają napewno one z góry zdefiniowane wymiary. Kto wie, może uda Ci się w ten sposób naprawić CLS.

Krok 7. Zaktualizuj WordPress

Nie tylko motyw, ale i wtyczki oraz cały system CMS. Korzystając z aktualnej wersji WordPress masz pewność, że Twoja strona internetowa jest dobrze przygotowana pod dalsze optymalizacje i nie posiada zbyt wiele błędów 🙃

Przeczytaj te poradniki, aby dowiedzieć się jak tego dokonać:

1. Aktualizacja WordPress krok po kroku
2. Jak zaktualizować WordPress ręcznie

Krok 8. Zainstaluj wtyczkę Autoptimize

Jeżeli korzystasz z WordPress koniecznie zainstaluj i skonfiguruj wtyczkę Autoptimize. Pomoże Ci ona bardzo mocno zoptymalizować stronę internetową pod kątem szybkości wczytywania oraz może pozytywnie wpłynąć na wyniki CLS, LCP oraz FID.

Więcej o tym jak skonfigurować Autoptimize przeczytasz tutaj: Jak wyeliminować zasoby blokujące renderowanie

Krok 9. Zmień hosting na lepszy

Szybki serwer zawsze dobrze wpływa na… szybkość strony internetowej ☺️ nawet jeżeli jest słabo zoptymalizowana to w naszej praktyce zawsze zaczynamy od oceny serwera klienta, ponieważ ma on największy wpływ na wynik Google PageSpeed Insight.

Ale co się będziemy dużo rozpisywać. Kliknij w nasz poradnik i zobacz, który hosting strony internetowej warto wybrać dla WordPress [i nie tylko]: Najlepszy hosting WordPress.

Krok 10. Popraw wydajność strony

Na naszym blogu możesz znaleźć bardzo fajny poradnik o tym jak przyspieszyć WordPress. Znajdziesz w nim praktyczne wskazówki, które pozwolą Ci poprawić wydajność strony WordPress, ale znajdą one także zastosowanie w przypadku innych systemów CMS jak i stron zbudowanych od podstaw.

Kliknij, naprawdę warto ☺️

Krok 11. Skorzystaj z CloudFlare

Które pozwoli Ci znacząco przyspieszyć stronę internetową i zmniejszyć m.in. czas Time to first byte. O tym jak wdrożyć CloudFlare przeczytasz w naszym artykule: CloudFlare WordPress [przewodnik po konfiguracji].

Na konie sprawdź jeszcze raz wynik w Google PageSpeed Insight. Mamy nadzieję, że się poprawił 🤓

Napraw razem z nami Cumulative Layout Shift

Dzięki, że z nami jesteś ☺️ jak widzisz, bardzo staramy się pomóc Ci bez naszej pomocy, ale nie zawsze jest to możliwe, dlatego bardzo chętnie przyjmiemy Twoją stronę WordPress w nasze ręce 💁‍♂️ napisz do nas, a my wycenimy Ci optymalizację Cumulative Layout Shift oraz parametrów Web Core Vitals.

Jesteśmy praktykami, nie teoretykami i zawsze wiemy co robimy ☺️ no to do usłyszenia ✋