Lyneon

Core Web Vitals pre e‑shop: LCP, CLS a INP zrozumiteľne

Search Console hlási „zlé“ alebo „vyžaduje zlepšenie“ pri Core Web Vitals a neviete, čo z toho vyčítať? Tu je, čo tri metriky znamenajú, ako ich zmeriate a čo e-shopy zvyčajne brzdí.

Aktualizované · 4 min čítania

V skratke

  • Core Web Vitals sú tri metriky: LCP (načítanie hlavného obsahu, do 2,5 s), CLS (poskakovanie stránky, do 0,1) a INP (reakcia na kliknutie, do 200 ms).
  • Rozhodujú dáta od skutočných návštevníkov (CrUX, Search Console), nie laboratórne skóre. Hodnotí sa 75. percentil návštev.
  • Pri e-shopoch je najčastejšou príčinou ťažký hlavný obrázok, tretie strany (reklama, chat, meranie) a prvky, ktoré sa načítajú neskoro a posunú obsah.

Prečo to riešiť

Core Web Vitals sú podľa Googlu meradlom používateľského zážitku a vstupujú do hodnotenia webu vo vyhľadávaní. Dôležitejší je ale praktický dopad: pomalý alebo poskakujúci e-shop odrádza zákazníkov presne vo chvíli, keď chcú kúpiť. Na mobile je to cítiť najviac.

Treba nepreceňovať súvislosť s pozíciami. Dobré skóre vás samo na prvé miesto nedostane, relevancia obsahu je stále dôležitejšia. Zlé hodnoty ale môžu byť rozhodujúcim rozdielom medzi dvoma podobnými e-shopmi.

Tri metriky a ich hranice

  • LCP (Largest Contentful Paint): za aký čas sa zobrazí najväčší prvok na obrazovke, zvyčajne hlavný obrázok alebo nadpis. Dobré: 2,5 sekundy a menej.
  • CLS (Cumulative Layout Shift): ako veľmi sa obsah počas načítania posúva. Dobré: 0,1 a menej. Typický zážitok je kliknutie na nesprávne tlačidlo, lebo sa stránka posunula.
  • INP (Interaction to Next Paint): ako rýchlo stránka reaguje na kliknutie, ťuknutie alebo stlačenie klávesu. Dobré: 200 milisekúnd a menej. INP nahradil predchádzajúcu metriku FID.

Stránka je hodnotená ako dobrá, len keď všetky tri metriky splnia hranicu pre 75. percentil návštev, osobitne pre mobil a desktop. Znamená to, že tri štvrtiny skutočných návštev musia byť rýchle.

Terénne a laboratórne dáta

Terénne dáta (field) pochádzajú od skutočných používateľov Chrome a zhromažďuje ich Chrome User Experience Report (CrUX). Odrážajú vašich návštevníkov, ich telefóny a pripojenie. Laboratórne dáta (lab) vznikajú pri simulovanom teste, napríklad v Lighthouse. Hodia sa na hľadanie príčin a overenie zmien, ale so skutočnosťou sa rozchádzajú.

Praktické pravidlo: o tom, či máte problém, rozhodujú terénne dáta. Laboratórny test používajte na zistenie prečo. INP laboratórne zmerať nejde, lebo v teste nikto neklikne; Lighthouse namiesto neho ukazuje Total Blocking Time ako náhradu.

Ako zmerať svoj e-shop

  1. PageSpeed Insights

    Na pagespeed.web.dev zadajte adresu úvodnej stránky, kategórie a produktu. Hore uvidíte terénne dáta za posledných 28 dní, pod nimi laboratórny test. Prepínajte medzi mobilom a desktopom. Ak terénne dáta nie sú k dispozícii, stránka nemá dosť návštev.

  2. Prehľad v Search Console

    V Google Search Console otvorte sekciu Core Web Vitals. Ukáže, koľko adries je dobrých, vyžaduje zlepšenie, alebo zlých, osobitne pre mobil a desktop. Adresy sú zoskupené podľa podobných stránok, takže oprava jednej šablóny často vyrieši celú skupinu.

  3. Nájdite najhorší typ stránky

    Pri e-shope býva problém na jednej šablóne, najčastejšie detaile produktu alebo výpise kategórie. Začnite tam, kde je najviac návštev.

  4. Vyhľadajte príčinu v laboratórnom teste

    V sekcii Diagnostika v PageSpeed Insights alebo v Lighthouse uvidíte prvok, ktorý je LCP, prvky spôsobujúce posun a skripty, ktoré blokujú hlavné vlákno. Po oprave rátajte s tým, že sa terénne dáta zlepšia až po niekoľkých týždňoch, ako sa obmenia merané návštevy.

Čo spomaľuje e-shopy najčastejšie

Najčastejšie príčiny pomalého načítania hlavného obsahu (LCP):

  • Hlavný obrázok (banner, fotka produktu) je príliš veľký, v starom formáte, alebo sa načítava so oneskorením (lazy loading pri prvom obrázku).
  • Pomalá odozva servera alebo chýbajúca vyrovnávacia pamäť.
  • Slider, ktorý najprv načíta skripty a až potom prvý záber.
  • Fonty, ktoré blokujú zobrazenie textu.

CLS a INP v praxi

Poskakovanie stránky (CLS) spôsobujú obrázky bez zadaných rozmerov, bannery a cookie lišta vložené nad obsah, reklamné alebo chatové okná a písma, ktoré pri načítaní zmenia veľkosť textu. Riešenie: rozmery pri obrázkoch, rezervované miesto pre prvky, ktoré sa načítajú neskôr, a lišta, ktorá obsah prekrýva, namiesto aby ho odsúvala.

Pomalú reakciu (INP) spôsobuje ťažký JavaScript: veľa značiek v správcovi značiek, skripty tretích strán, zložité filtre a zobrazenia produktov. Pomáha obmedziť počet doplnkov, odložiť nepodstatné skripty a odstrániť zastarané meracie kódy.

Čo môžete robiť sami a kedy zavolať odborníka

Sami zvládnete zmerať stav, zmenšiť obrázky, odstrániť nepoužívané doplnky a kódy a zrušiť zbytočné tracking skripty. Úpravy šablóny, načítavanie fontov, odloženie skriptov a práca s odozvou servera sú už technická práca. Konkrétne pre Shoptet pozrite návod Pomalý Shoptet, pre WooCommerce stránku Rýchlosť WooCommerce. Zmeriame stav, opravíme najväčšie príčiny a pošleme meranie pred a po: od 200 € bez DPH, pozrite Rýchlosť e-shopu.

Časté otázky

Prečo sa hodnoty v PageSpeed Insights líšia od Search Console?

PageSpeed Insights ukazuje laboratórny test jednej adresy a terénne dáta za posledných 28 dní. Search Console zoskupuje adresy a ukazuje hodnoty od skutočných návštevníkov. Rozhodujú terénne dáta.

Čo ak nie sú k dispozícii žiadne terénne dáta?

Stránka alebo web nemá dosť návštev z Chrome, aby ich Google zverejnil. Použite laboratórny test ako orientáciu a sledujte, kedy sa terénne dáta objavia.

Ako dlho trvá, kým sa oprava prejaví v Search Console?

Report pracuje s dátami za dlhšie obdobie, preto sa zlepšenie prejaví postupne, zvyčajne za niekoľko týždňov.

Objednať audit zadarmo

Vyplňte adresu e-shopu a e-mail. Report pošleme do dvoch pracovných dní. Vaše údaje použijeme len na odpoveď na túto žiadosť.

  • Bez prístupov a bez inštalácie
  • Report je váš, aj keď si nič neobjednáte
  • Odpovedá človek, nie automat

Údaje použijeme len na odpoveď na túto žiadosť. Ochrana osobných údajov

Ďalšie návody