Jak mierzy膰 Core Web Vitals w sklepie internetowym?

(Prawie) od zawsze wiemy, 偶e szybko艣膰 wczytywania stron ma znaczenie, ale dopiero od niedawna po艣wi臋camy szybko艣ci wi臋cej energii i pieni臋dzy, bo Google uwzgl臋dni艂 Web Core Vitals w swoim nowym algorytmie.

W tym artykule dowiesz si臋:

Dlaczego to takie wa偶ne?

Od 15 lat czytamy o tym, 偶e szybko艣膰 wczytywania strony ma bezpo艣redni wp艂yw na satysfakcj臋 u偶ytkownika. Sklepy internetowe optymalizowa艂y czasy wczytywania stron, ale nie by艂 to kluczowy wska藕nik w e-commerce. Rok temu zainteresowanie tematem powa偶nie wzros艂o, bo Google poinformowa艂, 偶e uwzgl臋dni szybko艣膰 wczytywania stron w swoim rankingu.

Czym s膮 wska藕niki Core Web Vitals

Mierzenie szybko艣ci sklepu internetowego jest delikatni m贸wi膮c skomplikowane i zale偶y od wielu zmiennych. Trudno by艂o por贸wna膰 strony i jednoznacznie okre艣li膰, kt贸ra jest szybsza. Web Core Vitals to (w mojej opinii) udana pr贸ba uproszczenia i ustandaryzowania sposobu mierzenia szybko艣ci dzia艂ania sklepu internetowego, kt贸ra pozwoli okre艣li膰 oraz por贸wna膰 szybko艣膰 stron, a nast臋pnie wy艣wietli膰 te szybsze sklepy wy偶ej w wynikach wyszukiwania Google.

LCP (Largest Contentful Paint) – czas potrzebny na wy艣wietlenie najwi臋kszego elementu strony – nie powinien przekracza膰 2,5 sekundy. Szczeg贸艂owy opis >>

wskaznik-LCP-Largest-Contentful-Paint

FID (First Input Delay) – czas reakcji interfejsu sklepu na aktywno艣膰 u偶ytkownika (np. klikni臋cie, tapni臋cie lub inna akcja obs艂ugiwana JavaScipt’em) – nie powinien przekracza膰 100 milisekund. Szczeg贸艂owy opis >>

wskaznik FID First Input Delay

CLS (Cumulative Layout Shift) – m贸j ulubiony wska藕nik, bo przesuwaj膮ca si臋 w trakcie 艂adowania tre艣膰 strony jest mega wkurzaj膮ca. CLS mierzy jak interface sklepu przesuwa si臋 po wy艣wietleniu w przegl膮darce – nie powinien przekracza膰 0.1 (jednostka jest do艣膰 z艂o偶ona). Szczeg贸艂owy opis >>

wskaznik CLS Cumulative Layout Shift

Jak sprawdzi膰 Core Web Vitals na Twoim komputerze?

Wystarczy Ci przegl膮darka Google Chrome, kt贸ra oferuje dwa przydatne narz臋dzia: Lighthouse oraz Performance

Chrome > Lighthouse (dokumentacja) – umo偶liwia sprawdzi膰 wska藕niki Core Web Vitals dla wybranej strony zar贸wno z perspektywy urz膮dze艅 mobile jak i desktop. Wbudowany kalkulator wy艣wietla udzia艂 poszczeg贸lnych wska藕nik贸w w og贸lnej ocenie i symuluje og贸lny wynik dla ustawionych przez nas warto艣ci wska藕nik贸w – w ten spos贸b pomaga zdecydowa膰 od czego zacz膮膰 optymalizacj臋.

Chrome > Performance (dokumentacja) – narz臋dzie u艂atwia szczeg贸艂owo zweryfikowa膰, kt贸re elementy i w jaki spos贸b wp艂ywaj膮 na wska藕niki Core Web Vitals. Poziom zaawansowania sprawia, 偶e z tego narz臋dzia korzystaj膮 specjali艣ci projektuj膮cy i wdra偶aj膮cy interfejsy.

Jakie s膮 wady i zalety testowania Core Web Vitals w przegl膮darce:

  • (+) test mo偶na wykona膰 od r臋ki bez ponoszenia koszt贸w
  • (+) wynik jest bardzo szczeg贸艂owy i u艂atwia specjalistom optymalizacj臋 poszczeg贸lnych element贸w interfejsu
  • (+) mo偶na sprawdzi膰 wyniki dowolnego sklepu internetowego (np. konkurencji)
  • (-) widzimy tylko nasz wynik na naszym sprz臋cie – nie znamy wynik贸w innych u偶ytkownik贸w, a te r贸偶ni膮 si臋 przecie偶 dla poszczeg贸lnych urz膮dze艅, system贸w operacyjnych, 艂膮cz internetowych, lokalizacji.
  • (-) mo偶emy jednocze艣nie testowa膰 tylko jedn膮 stron臋, a weryfikacja wszystkich jest bardzo czasoch艂onna
  • (-) mamy do dyspozycji tylko aktualne dane i nie wiemy, jak warto艣膰 wska藕nik贸w zmienia si臋 w czasie

Jak wygl膮daj膮 wska藕niki Web Core Vitals Twojego sklepu z perspektywy Google?

Sk膮d Doktor Google wie jak膮 kondycj臋 ma nasz sklep internetowy? Przecie偶 nie uruchamia narz臋dzi Lighthouse oraz Performance na przegl膮darkach u偶ytkownik贸w potajemnie kopiuj膮c te dane, prawda? A jednak – prywatno艣膰 w sieci to fikcja. W tym miejscu mo偶esz przeczyta膰, jak dok艂adnie wygl膮da ten proces, ale postaram si臋 go opisa膰 w trzech zdaniach.

  • Google pobiera dane od cz臋艣ci u偶ytkownik贸w korzystaj膮cych z przegl膮darki Chrome za ich mniej lub bardziej 艣wiadom膮 zgod膮 (zobacz jak to w(y)艂膮czy膰)
  • Dane s膮 zbierane w otwartej bazie, kt贸r膮 mo偶na przegl膮da膰 w Big Query oraz Google PageSpeed Insights (przyk艂ad poni偶ej)
  • Na tej podstawie poszczeg贸lne strony s膮 oceniane jako szybkie lub wolne, co przek艂ada si臋 na pozycj臋 w wynikach wyszukiwania.

Fragment tabeli z danymi z Polski z kwietnia 2021

Dane zgromadzone przez Google z naszych przegl膮darek

Przyk艂adowy wynik Google PageSpeed Insight dla Allegro, na kt贸rym wida膰 (1) wyniki z ostatnich 28 dni agregowane dziennie, (2) wszystkie wyniki agregowane miesi臋cznie oraz (3) wyniki zebrane w ramach w艂a艣nie przeprowadzonego testu.

Przyk艂adowy wynik Google PageSpeed Insight

Przyk艂ad podsumowania Core Web Vitals widocznego dla w艂a艣cicieli stron w narz臋dziu Search Console

Raport na temat UX Chrome w Search Console
Podsumowanie wynik贸w sklepu w Search Console

Wady i zalety danych o Core Web Vitals gromadzonych i udost臋pnianych przez Google:

  • (+) Wiemy jakimi informacjami dysponuje Google decyduj膮c o pozycji strony wynikach wyszukiwania
  • (-) Gromadzone dane dotycz膮 tylko ograniczonej grupy u偶ytkownik贸w, kt贸ra zmienia si臋 wraz z rosn膮c膮 艣wiadomo艣ci膮 dotycz膮c膮 prywatno艣ci w sieci
  • (+) Zebrane dane wystarcz膮 aby oceni膰 og贸lne trendy dotycz膮ce szybko艣ci dzia艂ania strony i usun膮膰 problemy zg艂aszane przez Google
  • (+) Zebrane dane pozwalaj膮 ka偶demu monitorowa膰 i analizowa膰 szybko艣膰 stron na ca艂ym 艣wiecie (przyk艂ady zastosowania i narz臋dzi)
  • (+) Dane s膮 zbierane i udost臋pniane bezp艂atnie

Jak mierzy膰 Core Web Vitals w sklepie internetowym?

Czy mo偶na chcie膰 czego艣 wi臋cej przy transparentnej polityce Google i du偶ej szczeg贸艂owo艣ci udost臋pnianych informacji? Mo偶na 馃檪

Optymalizacja wymaga wi臋kszej szczeg贸艂owo艣ci danych – w Search Console widzimy, 偶e 1500 podobnych stron stron przekracza warto艣膰 wska藕nika, a dobrze by by艂o wiedzie膰, kt贸ra strona i w jakim stopniu go przekracza, 偶eby rozpocz膮膰 optymalizacj臋 od tych najwa偶niejszych i szybciej zidentyfikowa膰 wyst臋puj膮ce problemy.

U艣rednione warto艣ci w Search Console
Dok艂adne warto艣ci w Google Data Studio

W sklepach internetowych optymalizujemy szablony wykorzystywane na wielu stronach – osobno powinni艣my monitorowa膰 i optymalizowa膰 strony kategorii, stron臋 g艂贸wn膮, strony towar贸w (mo偶e r贸偶nych typ贸w towar贸w) lub strony procesu zam贸wienia, bo ka偶da z tych stron zawiera inne tre艣ci i funkcje wp艂ywaj膮ce na Core Web Vitals.

Filtrowanie wynik贸w dla poszczeg贸lnych szablon贸w e-commerce w Google Data Studio

Jak poszczeg贸lne zmiany wprowadzane w e-commerce wp艂ywaj膮 na wyniki – zbieraj膮c codziennie informacje o wska藕nikach Core Web Vitals widzimy jak wprowadzane przez nas zmiany wp艂ywaj膮 na szybko艣膰 dzia艂ania sklepu, nie tylko na sprz臋cie testera, ale na urz膮dzeniach wszystkich u偶ytkownik贸w.

Widoczne zmiany CLS w raporcie Google Data Studio

Rzadko odwiedzane strony (istotne w long tail SEO) maj膮 zdecydowanie mniej danych zebranych w bazie Google ni偶 w przypadku zbierania tych informacji na w艂asn膮 r臋k臋.

Warto艣ci CLS dla rzadko odwiedzanych stron w sklepie internetowym

Podsumowuj膮c

Jest wiele sposob贸w na mierzenie wynik贸w i analizowanie wynik贸w Core Web Vitals. W zale偶no艣ci od naszych potrzeb mo偶emy znale藕膰 wiele bezp艂atnych narz臋dzi do og贸lne lub szczeg贸艂owej analizy. Je偶eli chcemy kontrolowa膰 i optymalizowa膰 szybko艣膰 dzia艂ania sklepu internetowego, to warto mierzy膰 Core Web Vitals we w艂asnym zakresie. Instalacja narz臋dzi nie jest czasoch艂onna, a zebrane dane pomog膮 zaoszcz臋dzi膰 du偶o czasu w trakcie optymalizacji.

Polecam wpis Simo Ahava i jego bezp艂atny tag do 艣ledzenia Core Web Vitals z poziomu Google Tag Managera umo偶liwiaj膮cy przekazywanie danych do Google Analytics 4 lub Uniwersal Analytics i wizualizacj臋 danych w Google Data Studio.