Technické SEO, rychlost a UX

Core Web Vitals pro e-shop: jak opravit LCP, INP a CLS

Praktický návod, jak změřit Core Web Vitals e-shopu, najít příčinu pomalého načtení, odezvy a posouvání obsahu a určit první opravu.

Notebook s časovou osou výkonu webu v nástrojích prohlížeče.
Rychlá odpověď

Jaké Core Web Vitals má e-shop splnit?

Pro dobrou zkušenost má nejméně 75 % návštěv dosáhnout LCP do 2,5 sekundy, INP do 200 milisekund a CLS nejvýše 0,1. Nejdřív otevřete přehled Core Web Vitals v Search Console, vyberte problémovou skupinu důležitých URL a jednu ukázkovou stránku prověřte v PageSpeed Insights. Opravujte příčinu ve společné šabloně, ne každou produktovou URL zvlášť.

Pomalý hlavní obrázek, filtr reagující až po chvíli nebo tlačítko, které po načtení odskočí, nejsou jen technické skóre. Zákazník čeká, opakuje kliknutí nebo omylem otevře jiný prvek. Core Web Vitals dávají těmto třem zkušenostem měřitelné názvy a pomáhají určit, co opravit jako první.

Mobil zůstává slabším místem webu

Web Almanac 2025 uvádí, že dobrými hodnotami všech tří Core Web Vitals prošlo 48 % sledovaných webů na mobilu a 56 % na počítači. Nejde o srovnání konkrétního e-shopu, ale o užitečné připomenutí, že kontrola jen na rychlém notebooku může problém skutečných zákazníků snadno skrýt.

Co přesně měří LCP, INP a CLS

MetrikaCo zákazník vnímáDobrá hodnotaČastý problém e-shopu
LCPKdy se zobrazí hlavní obsah stránkynejvýše 2,5 sVelká produktová nebo hero fotografie
INPJak rychle stránka reaguje na kliknutí či klepnutínejvýše 200 msFiltr, varianta, košík nebo JavaScript třetích stran
CLSZda obsah při prohlížení nečekaně neposkakujenejvýše 0,1Obrázek bez rozměrů, lišta, font nebo pozdě vložený banner

Hranice se hodnotí na 75. percentilu. Zjednodušeně: dobrý výsledek musí zažít alespoň tři ze čtyř návštěv, ne jen správce e-shopu při jednom testu. Stav celé skupiny navíc určuje její nejhorší metrika.

Nezaměňujte reálná data a laboratorní test

Search Console používá anonymizovaná data skutečných uživatelů z Chrome User Experience Reportu a podobné URL sdružuje do skupin. Výsledek popisuje předchozích 28 dní. U malého nebo nového e-shopu nemusí být dat dost a daná URL se v přehledu vůbec neobjeví.

PageSpeed Insights kombinuje reálná data s laboratorním testem Lighthouse. Reálná část říká, co zažívali návštěvníci; laboratorní část pomáhá najít pravděpodobnou příčinu právě teď. Zelený laboratorní test proto sám o sobě neznamená, že už mají dobrý výsledek i skuteční uživatelé. Po nasazení se reálná data mění postupně.

Diagnostika e-shopu za 30 minut

  1. V Search Console otevřete Zkušenosti a Core Web Vitals. Začněte mobilem a skupinami označenými jako špatné.
  2. Vyberte skupinu, která obsahuje obchodně důležité stránky: produkty, kategorie nebo košík. Přednost dejte skupině s více URL a návštěvami.
  3. Otevřete jednu ukázkovou URL v PageSpeed Insights a oddělte horní reálná data od spodního laboratorního rozboru.
  4. Zapište jedinou nevyhovující metriku a konkrétní prvek, který ji podle diagnostiky ovlivňuje. Nezačínejte celkovým číslem výkonu.
  5. Stejný prvek ověřte na druhé URL stejného typu a na skutečném mobilu. U INP projděte filtr, variantu a vložení do košíku; u CLS stránku posouvejte a čekejte na lišty či bannery.
  6. Vyberte jednu opravu společné šablony, připravte stav před a po a po nasazení spusťte ověření v Search Console.

Jak opravit pomalé LCP na produktové stránce

Nejprve v laboratorním rozboru zjistěte, který prvek je LCP. U e-shopu to často bývá hlavní produktová fotografie, banner kategorie nebo velký blok textu. Pokud test označí obrázek, nestačí jen změnit formát souboru. Zpoždění může vznikat už odpovědí serveru, pozdním objevením obrázku v kódu, jeho dlouhým stahováním nebo čekáním na vykreslení.

  • Hlavní obrázek neposílejte zbytečně větší, než vyžaduje zobrazení.
  • Použijte responzivní velikosti a moderní kompresi bez viditelné ztráty.
  • LCP obrázek nenačítejte líně; prohlížeč o něm musí vědět co nejdříve.
  • Omezte CSS a JavaScript, které blokují první vykreslení.
  • Zkontrolujte odezvu serveru, cache a případnou obrázkovou CDN.

Podrobnější kontrolu zdrojových fotografií, rozměrů, variant a formátů najdete v návodu na produktové obrázky pro Google a Merchant Center.

Jak opravit pomalé INP u filtrů, variant a košíku

INP sleduje dobu od interakce uživatele do dalšího viditelného překreslení. Problém proto hledejte při skutečné práci se stránkou, ne jen při jejím otevření. Opakovaně vyzkoušejte filtr kategorie, volbu varianty, změnu počtu kusů, otevření košíku a souhlas s cookies.

  • Rozdělte dlouhé úlohy JavaScriptu, které blokují hlavní vlákno.
  • Odložte skripty, které nejsou nutné pro první nákupní interakci.
  • Omezte duplicitní měřicí, chatovací a personalizační nástroje.
  • Po kliknutí zobrazte okamžitou a pravdivou odezvu, například stav načítání.
  • Neobnovujte při každé volbě varianty zbytečně velkou část stránky.

Lighthouse umí ukázat dlouhé úlohy a blokující skripty, ale bez reálných interakcí nenahrazuje skutečné INP. Opravu proto otestujte i na slabším telefonu a poté sledujte polní data.

Jak opravit CLS bez rozbití obchodních prvků

Nejčastější viník není animace, ale chybějící místo. Prohlížeč nejprve vykreslí stránku bez rozměru obrázku, lišty nebo fontu a po jejich načtení ostatní obsah posune. Uživatel pak může místo zamýšleného tlačítka klepnout na jiný odkaz.

  • U obrázků a videí uvádějte šířku, výšku nebo poměr stran.
  • Rezervujte místo pro cookie lištu, dopravu zdarma i pozdě načtený banner.
  • Nový obsah nevkládejte bez varování nad právě čtenou část stránky.
  • Načítejte fonty tak, aby změna řezu neposunula nadpisy a tlačítka.
  • Zkontrolujte sticky hlavičku a doplňky, které se aktivují až po scrollování.

Pořadí oprav podle dopadu, ne podle nejvyššího skóre

SituacePrvní krokProč
Špatná metrika u většiny produktůOpravit společnou produktovou šablonuJedna změna může zlepšit mnoho obchodních URL
Problém jen u několika bannerůOpravit zdroj obrázku a jeho rezervované místoNení nutné přestavovat celý e-shop
Dobrá reálná data, slabší laboratorní skórePrověřit diagnostiku, ale nehonit bod za každou cenuGoogle doporučuje celkovou zkušenost, ne perfektní test
Málo dat v CrUXTestovat zástupce šablon a zavést vlastní měřeníChybějící přehled neznamená automaticky dobrý stav

Google potvrzuje, že Core Web Vitals jeho systémy používají, ale dobré hodnoty nezaručují vysoké pozice. Relevantní nabídka, užitečný obsah a celková kvalita stránky zůstávají důležitější než snaha získat dokonalé laboratorní skóre.

Kontrolní seznam před nasazením opravy

  • Máte uloženou původní hodnotu, URL, zařízení a datum měření.
  • Víte, zda jde o reálná data, laboratorní test, nebo obojí.
  • Oprava míří na konkrétní metriku a prvek, ne pouze na číslo výkonu.
  • Produkt, varianta, košík, měření a souhlasy po změně stále fungují.
  • Ověřili jste typickou produktovou i kategoriální stránku na mobilu.
  • Po nasazení spustíte ověření opravy v Search Console a počkáte na nová data.

Nejčastější chyby

  • Rozhodnutí podle jediného laboratorního testu na počítači.
  • Optimalizace domovské stránky, přestože problém mají produkty.
  • Lazy loading hlavního obrázku viditelného hned po otevření stránky.
  • Odstranění skriptu bez kontroly měření, souhlasů nebo košíku.
  • Ruční oprava jedné URL místo společné šablony.
  • Očekávání okamžité změny v přehledu založeném na 28 dnech dat.
  • Představa, že zelené Core Web Vitals samy zajistí lepší pozice.

Nejčastější otázky

Musí malý e-shop řešit Core Web Vitals?

Ano, pokud zpomalení nebo posuny překážejí zákazníkům. Když ale nemáte dost reálných dat, nezačínejte drahou přestavbou. Otestujte několik hlavních šablon, opravte zjevné chyby a sledujte obchodní funkce i rychlost společně.

Proč Search Console a PageSpeed ukazují jiné hodnoty?

Search Console sdružuje podobné URL a pracuje s reálnými návštěvami za předchozích 28 dní. PageSpeed může ukázat data jedné URL nebo celého webu a současně spouští nový laboratorní test. Rozdíl tedy nemusí být chyba; porovnáváte jiný vzorek, období nebo typ měření.

Jak rychle Google pozná opravu?

Laboratorní test může zlepšení ukázat hned po nasazení. Přehled v Search Console ale vychází z klouzavého období reálných návštěv a ověření opravy může trvat několik týdnů. Nečekejte na něj bez kontroly: nejprve ověřte funkčnost stránky a nové laboratorní měření.

Začněte přehledem pěti smysluplných kontrol v Google Search Console. Pokud LCP zpomaluje hlavní fotografie, pokračujte návodem na produktové obrázky pro Google. A když stránky brzdí rozsáhlé kombinace a skripty filtrů, projděte také SEO filtrů a stránkování e-shopu.