Lyneon

Core Web Vitals pro e‑shop: LCP, CLS a INP srozumitelně

Search Console hlásí „špatné“ nebo „vyžaduje zlepšení“ u Core Web Vitals a nevíte, co z toho vyčíst? Tady je, co tři metriky znamenají, jak je změříte a co je u e-shopů obvykle brzdí.

Aktualizováno · 4 min čtení

Ve zkratce

  • Core Web Vitals jsou tři metriky: LCP (načtení hlavního obsahu, do 2,5 s), CLS (poskakování stránky, do 0,1) a INP (reakce na kliknutí, do 200 ms).
  • Rozhodují data od skutečných návštěvníků (CrUX, Search Console), ne laboratorní skóre. Hodnotí se 75. percentil návštěv.
  • U e-shopů je nejčastější příčinou těžký hlavní obrázek, třetí strany (reklama, chat, měření) a prvky, které se načtou pozdě a posunou obsah.

Proč to řešit

Core Web Vitals jsou podle Googlu měřítkem uživatelského zážitku a vstupují do hodnocení webu ve vyhledávání. Důležitější je ale praktický dopad: pomalý nebo poskakující e-shop odrazuje zákazníky přesně ve chvíli, kdy chtějí koupit. Na mobilu je to znát nejvíc.

Je potřeba nepřeceňovat souvislost s pozicemi. Dobré skóre vás samo na první místo nedostane, relevance obsahu je stále důležitější. Špatné hodnoty ale mohou být rozhodujícím rozdílem mezi dvěma podobnými e-shopy.

Tři metriky a jejich hranice

  • LCP (Largest Contentful Paint): za jak dlouho se zobrazí největší prvek na obrazovce, obvykle hlavní obrázek nebo nadpis. Dobré: 2,5 sekundy a méně.
  • CLS (Cumulative Layout Shift): jak moc se obsah během načítání posouvá. Dobré: 0,1 a méně. Typický zážitek je kliknutí na špatné tlačítko, protože se stránka posunula.
  • INP (Interaction to Next Paint): jak rychle stránka reaguje na kliknutí, klepnutí nebo stisk klávesy. Dobré: 200 milisekund a méně. INP nahradil dřívější metriku FID.

Stránka je hodnocena jako dobrá, jen když všechny tři metriky splní hranici pro 75. percentil návštěv, zvlášť pro mobil a desktop. Znamená to, že tři čtvrtiny skutečných návštěv musí být rychlé.

Terénní a laboratorní data

Terénní data (field) pocházejí od skutečných uživatelů Chrome a shromažďuje je Chrome User Experience Report (CrUX). Odráží vaše návštěvníky, jejich telefony a připojení. Laboratorní data (lab) vznikají při simulovaném testu, například v Lighthouse. Hodí se pro hledání příčin a ověření změn, ale se skutečností se rozcházejí.

Praktické pravidlo: o tom, zda máte problém, rozhodují terénní data. Laboratorní test používejte k tomu, abyste zjistili proč. INP laboratorně změřit nejde, protože v testu nikdo neklikne; Lighthouse místo něj ukazuje Total Blocking Time jako náhradu.

Jak změřit svůj e-shop

  1. PageSpeed Insights

    Na pagespeed.web.dev zadejte adresu úvodní stránky, kategorie a produktu. Nahoře uvidíte terénní data za posledních 28 dní, pod nimi laboratorní test. Přepínejte mezi mobilem a desktopem. Pokud nejsou terénní data k dispozici, stránka nemá dost návštěv.

  2. Přehled v Search Console

    V Google Search Console otevřete sekci Core Web Vitals. Ukáže, kolik adres je dobrých, vyžaduje zlepšení, nebo špatných, zvlášť pro mobil a desktop. Adresy jsou seskupené podle podobných stránek, takže oprava jedné šablony často vyřeší celou skupinu.

  3. Najděte nejhorší typ stránky

    U e-shopu bývá problém na jedné šabloně, nejčastěji detailu produktu nebo výpisu kategorie. Začněte tam, kde je nejvíc návštěv.

  4. Vyhledejte příčinu v laboratorním testu

    V sekci Diagnostika v PageSpeed Insights nebo v Lighthouse uvidíte prvek, který je LCP, prvky způsobující posun a skripty, které blokují hlavní vlákno. Po opravě počítejte s tím, že se terénní data zlepší až po několika týdnech, jak se obmění měřené návštěvy.

Co zpomaluje e-shopy nejčastěji

Nejčastější příčiny pomalého načtení hlavního obsahu (LCP):

  • Hlavní obrázek (banner, fotka produktu) je příliš velký, ve starém formátu, nebo se načítá se zpožděním (lazy loading u prvního obrázku).
  • Pomalá odezva serveru nebo chybějící mezipaměť.
  • Slider, který nejdřív načte skripty a až potom první snímek.
  • Fonty, které blokují zobrazení textu.

CLS a INP v praxi

Poskakování stránky (CLS) způsobují obrázky bez zadaných rozměrů, bannery a cookie lišta vložené nad obsah, reklamní nebo chatovací okna a písma, která při načtení změní velikost textu. Řešení: rozměry u obrázků, rezervované místo pro prvky, které se načtou později, a lišta, která obsah překrývá, místo aby ho odsouvala.

Pomalou reakci (INP) způsobuje těžký JavaScript: mnoho značek ve správci značek, skripty třetích stran, složité filtry a zobrazení produktů. Pomáhá omezit počet doplňků, odložit nepodstatné skripty a odstranit zastaralé měřicí kódy.

Co můžete dělat sami a kdy zavolat odborníka

Sami zvládnete změřit stav, zmenšit obrázky, odstranit nepoužívané doplňky a kódy a zrušit zbytečné tracking skripty. Úpravy šablony, načítání fontů, odložení skriptů a práce s odezvou serveru jsou už technická práce. Konkrétně pro Shoptet viz návod Pomalý Shoptet, pro WooCommerce stránka Rychlost WooCommerce. Změříme stav, opravíme největší příčiny a pošleme měření před a po: od 4 990 Kč bez DPH, viz Rychlost e-shopu.

Časté otázky

Proč se hodnoty v PageSpeed Insights liší od Search Console?

PageSpeed Insights ukazuje laboratorní test jedné adresy a terénní data za posledních 28 dní. Search Console seskupuje adresy a ukazuje hodnoty od skutečných návštěvníků. Rozhodují terénní data.

Co když nejsou k dispozici žádná terénní data?

Stránka nebo web nemá dost návštěv z Chrome, aby je Google zveřejnil. Použijte laboratorní test jako orientaci a sledujte, kdy se terénní data objeví.

Jak dlouho trvá, než se oprava projeví v Search Console?

Report pracuje s daty za delší období, proto se zlepšení projeví postupně, obvykle za několik týdnů.

Objednat audit zdarma

Vyplňte adresu e-shopu a e-mail. Report pošleme do dvou pracovních dnů. Vaše údaje použijeme jen k odpovědi na tuto žádost.

  • Bez přístupů a bez instalace
  • Report je váš, i když si nic neobjednáte
  • Odpovídá člověk, ne automat

Údaje použijeme jen k odpovědi na tuto žádost. Ochrana osobních údajů

Další návody