späť na články

Prestaňte strácať návštevníkov: Začnite merať Core Web Vitals

Alexandra Pletňová
Frontend developer
Prestaňte strácať návštevníkov: Začnite merať Core Web Vitals

Rýchle zhrnutie: Od mája 2021 Google začal v rámci hodnotenia vyhľadávania zohľadňovať používateľský zážitok, ktorý sa meria pomocou súboru metrík nazvaného Core Web Vitals.


Od mája 2021 Google začal v rámci hodnotenia vyhľadávania zohľadňovať používateľský zážitok, ktorý sa meria pomocou súboru metrík nazvaného Core Web Vitals. Zaujímave je spomenúť práve vplyv metrík na konverzie. Z nie len našich skúseností je priam jasné, že sú tieto dve témy previazané. Pre každý e-shop môže byť kľúčová iná metrika a taktiež sa môže v čase meniť podľa toho, ako sa e-shop optimalizuje.

Popis CWV metrík pre rok 2023

LCP

Largest Contentful Paint, meria čas vykreslenia najväčšieho prvku viditeľného na zariadení. To znamená prvok, ktorý je viditeľný bez dodatočného scrollovania. Je to zrejme najjednoduchšia metrika na pochopenie. Môže to byť banerový obrázok, časť textu alebo čokoľvek iné čo zaberá najväčšiu videteľnú časť.

FID

First Input Delay, meria čas prvej interakcie používateľa so stránkou a jej spracovanie. To znamená čas, kedy používateľ dokáže na nejaký element kliknúť a reálne aj spracovať požiadavku. Ak sa nám vizuálne zobrazí celá stránka ale nie je stále možné na nič kliknúť môže to byť pre používateľa frustrujúce.

CLS

Cumulative Layout Shift, je trochu iná metrika ako predošlé dve, pretože sa jedná o súčet každého posunu prvkov na stránke, ku ktorému dôjde počas celej životnosti stránky. To znamená, že sledujeme načítanie a posun prvkov na stránke počas scrollovania.

Hodnoty v ktorých sa CWV môžu pohybovať, zdroj: https://web.dev/articles/vitals


Mometnálne je plánovaná zmena ohľadom nahradenia FID metrikou INP. Túto tému by sme si bližšie rozobrali v už pripravovanom článku.

Ako ich merať?

Môžností ako si sledovať tieto metriky je viacero. Medzi najznámejšie patria nástroje priamo od Google, ktorým sa budeme v rámci tohto článku venovať.

  1. PageSpeed Insights
  2. Google Search Console – Experience – Core Web Vitals
  3. JS knižnica web-vitals

PageSpeed Insights

Analyzovanie stránky pomocou tohto nástoja má mnoho možností a pohľadov, my si prejdeme základne body pre orientáciu, čo pre nás je dôležité.

Máme dve základné rozdelenia, a to je mobilná a desktopová verzia. V dnešnej dobe je takmer jasné, že v rámci pomeru návštevnosti pre stánky je pre nás kľúčové sledovať hlavne mobilnú verziu.

Ďalšie veľké rozdelenie, ktoré na stránke vidíme sú dáta od reálnych používateľov a takzvané „strojové dáta“, ktoré sú simulované na bežnom zariadení.

Dáta od používateľov – Discover what your real users are experiencing

Strojové dáta – Diagnose performance issues

Častokrát sa nám stáva, že klienta zaujímajú práve „strojové dáta“, pretože táto časť má pri sebe omnoho viac informácií ako časť s dátami od reálnych používateľov. Ale v konečnom dôsledku je nutné pochopiť, že táto časť je prínosná hlavne pre developera, alebo ľudí ktorý sa venujú konkrétnym krokom k zlepšení rýchlosti webu. To čo je ale kľúčové a k čomu sa snažíme dopracovať sú práve zlepšené reálne dáta od používateľov. Táto časť je aj dôležitá pre meranie od Googlu.

Strojové dáta – Diagnose performance issues


Dáta od používateľov – Discover what your real users are experiencing


Úrovne ako sa dá s reálnymi dátami pracovať
Skúmať konkrétnu URL – This URL
Skúmať hodnoty pre celú doménu – Origin

Z matematického hľadiska a z hľadiska ako sa na dáta pozerá Google je to jednoduché. Kľúčový je priemer, tým pádom je pre nás najdôležitejší práve Origin.

Pre e-shopové riešenia je vždy dôležité mať v čo najlepšom stave stránky, ktorých početnosť je na webe najvyššia. V tomto prípade sú to teda category stránky s produktami alebo už konkrétne produktové stránky – detail produktu.

Ak by sme sa zbytočne sústredili napríklad na homepage alebo na nejakú custom obsahovú stránku, tak jej úpravami zmeníme z globálneho hľadiska veľmi málo. Ale ak sa sústredíme na stránku kategórie alebo produktovú stránku, tak vieme zlepšiť radovo stovky stránok.

Google Search Console – Experience – Core Web Vitals

Hlbší pohľad na celú doménu a všetky stránky v nej. V predchádzajúcom bode sme si vysvetlili čo je pre nás dôležité a ako sa na dáta pozerať. Skvelým pomocníkom v tom je práve GSC, ktorá nám dokáže pomôcť práve pri analýze problémových stránok a ich početnosti.

Pomocou tohto tabu v GSC si vieme nájsť, ktorá skupina stránok nám robí najväčší problém, a to najlepšie čo môžeme spraviť je že začneme práve nimi, pretože tam budeme vidieť najväčší rozdiel v rámci hodnotenia od Google – Core Web Vitals Assessment.

21 – 28 dňový cyklus zbierania dát

Prejavenie zmien na skupine dát od reálnych používateľov trvá až 28 dní. Niektoré zmeny sa môžu prejaviť aj skôr, ale najlepšie je vždy počkať do ukončenia daného cyklu v zbieraní dát.

JS knižnica web-vitals

Pomocou implementovania scriptu, taktiež od Google, vieme pracovať s dátami od reálnych používateľov rýchlejšie a vytvárať si vlastné grafy. Script je naozaj veľmi malý, má iba 1,7 kB.

Zhrnutie

Dúfame, že tento príspevok do určitej miery vysvetľuje základy k údajom Core Web Vitals a spôsob ako ich merať. Zároveň veríme, že sme vám pomohli lepšie rozumieť údajom ktoré nám meracie nástroje poskytujú.

Páčil sa vám článok?
Zdieľajte.

Zaujala vás naša práca
a máte záujem o kvalitný e-shop?

Začnime spolu
nový projekt

Napíšte nám
Blueweb

Navrhujeme, vyvíjame a
optimalizujeme e-shopy na mieru.