Dołącz do czytelników
Brak wyników

Artykuł sponsorowany

1 września 2021

NR 59 (Sierpień 2021)

Jak zoptymalizować sklep internetowy pod kątem Core Web Vitals?

16

Po elementach optymalizacyjnych związanych z mobile-friendly, walką ze spamem czy odwieczną walką z wydobywaniem na pierwsze pozycje najbardziej wartościowych treści przyszedł czas na Core Web Vitals (CWV), czyli wskaźniki oparte na rzeczywistych danych o użytkowaniu witryny.

Trzy główne wskaźniki CWV

Core Web Vitals to kolejny krok maksymalizacji użyteczności strony przez lepsze i ujednolicone page experience. Update algorytmu Google wpłynie na faworyzowanie witryn internetowych „najlepiej funkcjonujących”, tj. wpasowujących się w nowe oczekiwania wyszukiwarki. W tym przypadku nie chodzi o samą jakość treści czy liczbę reklam, a o elementy rdzeniowe witryny. Trzy najważniejsze wskaźniki, które będą brane pod uwagę przy ocenie CWV to LCP (Largest Contentful Paint), FID (First Input Delay) oraz CLS (Cumulative Layout Shift).

Chrome User Experience Report

Warto mieć świadomość, że Google do swoich analiz pobiera dane z przeglądarki internetowej – Chrome.
Oznacza to, że wszelkie próby oszukania „systemów liczących”, polegające na rozpoznawaniu agenta wchodzącego na sklepową witrynę i np. JavaScriptu czy niewykonywania niektórych funkcji, nie dadzą żadnych efektów. Może i w PageSpeed Insights (https://developers. google.com/speed/pagespeed/insights/) liczba uzyskanych punktów się poprawi, ale realne wyniki, z których korzysta przeglądarka, się nie zmienią.

Largest Contentful Paint

Largest Contentful Paint mówi o tym, ile czasu musi minąć od wejścia użytkownika na stronę do załadowania się treści głównej. Roboty analizują największą treść (tekstową bądź multimedialną) przez kod HTML. Z tego powodu największy element witryny może ulegać zmianie wraz z przesuwaniem witryny w dół lub w górę. Poziom Largest Contentful Paint mierzony jest na skali sekundowej, gdzie czas ładowania do 2,5 s jest dopuszczalny, do 4 s należy poprawić, natomiast powyżej 4 s oznacza, że witryna nie jest user-friendly.
W celu poprawy tego wskaźnika należy odnaleźć elementy spowalniające ładowanie i odpowiednio je zoptymalizować. Pomóc może tu np. usunięcie nieużywanego kodu źródłowego czy asynchroniczne ładowanie skryptów. W kwestii elementów multimedialnych obrazy warto kompresować, aby miały jak najmniejszą wagę. Natomiast pliki wideo warto przesyłać przez portale zewnętrzne, jak np. YouTube, dzięki któremu zamiast wstawiać na stronę ogromnych rozmiarów plik wideo, można posłużyć się linkiem odsyłającym do YouTube’a. Ponadto, skuteczne może być też wprowadzenie LazyLoad.

First Input Delay

First Input Delay ocenia czas, jaki upływa od pierwszej czynności użytkownika na witrynie do momentu wykonania żądania. Obejmuje to wszystkie działania użytkownika na stronie, czyli m.in. klikanie w podświetlone linki czy elementy menu. Według wskaźnika First Input Delay czas odpowiedzi powinien wynosić do 100 ms. W przypadku, gdy nie przekracza 300 ms, należy wprowadzić zmiany, natomiast gdy czas oczekiwania na reakcję strony jest dłuższy niż 300 ms, wówczas funkcjonalność witryny uznawana jest za słabą. Aby zmniejszyć wskaźnik FID, należy przede wszystkim zoptymalizować kod JavaScript. Dodatkowo, tak jak w przypadku poprzedniego wskaźnika, pomocna może być implementacja ładowania asynchronicznego. Na wysoki wskaźnik FID pozytywnie wpłynie także server-side rendering. Ponadto, warto zainteresować się także opóźnianiem wczytywania skryptów zewnętrznych.

Cumulative Layout Shift

Cumulative Layout Shift mówi o tym, po jakim czasie strona „przestaje się ruszać”. Analizie podlega tu układ strony w celu znalezienia wszystkich przesunięć elementów. Według Cumulative Layout Shift strony osiągające wskaźnik na poziomie 0,1 są wysoce user-friendly, poziom do 0,25 jest dopuszczalny, jednak wypada nad nim popracować, a witryny ze wskaźnikiem CLS powyżej 0,25 są określane jako słabe jakościowo.
Do utrzymania niskiego poziomu CLS i wysokiego user-friendly należy dokładnie określić wymiary multimediów, aby wczytanie obrazka nie powodowało przesuwania się układu strony. W tym celu stosuje się atrybuty height oraz width. Z przesunięciami skutecznie walczą także placeholdery, które określają sprecyzowane miejsce wyświetlania, np. reklamy, dzięki czemu nie zmienia ona swojego miejsca podczas ładowania strony.

Akcja „odchudzanie”

Większość optymalizacji, o których mowa w niniejszym artykule, sprowadza się do jednego – maksymalnego „odchudzania” sklepu internetowego.
Mowa tutaj nie tylko o usuwaniu „wodotrysków”, ale także o gruntownym odchudzaniu sklepu z elementów, które nie wpływają na główne funkcjonalności – zewnętrznych skryptów, oraz pozbyciu się niestandardowych czcionek.
Kluczowy jest pierwszy ekran, który pokazuje się użytkownikowi po wejściu na sklep (above the fold). Powinien być maksymalnie czysty. Znam przypadki, w których przenoszono odnośniki (zwykłe hiperłącza) do profili social mediów z TOP-u witryny na sam dół. Aby osiągnąć perfekcję, czasami konieczne jest zmniejszenie pozycji w menu górnym po to, aby mogło się szybciej wyrenderować.
Rzecz jasna, użyteczność sklepu internetowego jest kluczowa, dlatego cięcia muszą być ostrożne.

JavaS

...

Pozostałe 70% treści dostępne jest tylko dla Prenumeratorów

Co zyskasz, kupując prenumeratę?
  • 6 drukowanych wydań magazynu Online Marketing
  • Dodatkowe artykuły niepublikowane w formie papierowej
  • Dostęp do czasopisma w wersji online
  • Dostęp do wszystkich archiwalnych wydań magazynu oraz dodatków specjalnych
  • ... i wiele więcej!
Sprawdź szczegóły

Przypisy