Rychlost e-shopu: jak měřit Core Web Vitals a co reálně zpomaluje Shopify

28. 9. 2026
Rychlost e-shopu: jak měřit Core Web Vitals a co reálně zpomaluje Shopify

Rychlost e-shopu se dnes měří třemi metrikami Core Web Vitals: LCP (jak rychle se zobrazí hlavní obsah), INP (jak rychle stránka reaguje na kliknutí) a CLS (jestli obsah při načítání neposkakuje). Na Shopify se měří přímo v administraci z dat skutečných návštěvníků. Samotná platforma pomalá není. E-shop nejčastěji zpomalují aplikace, velké obrázky, skripty třetích stran a příliš složitá šablona.

V článku vysvětlíme, co jednotlivé metriky znamenají, kde je na Shopify změřit, jak číst výsledky a co konkrétně e-shop zpomaluje. Ke každé příčině uvádíme opravu, kterou zvládnete sami, i tu, na kterou potřebujete vývojáře.

Klíčové body

  • Dobré hodnoty: LCP do 2,5 s, INP do 200 ms, CLS do 0,1, a to u 75 % návštěv.
  • Rozhodují data skutečných návštěvníků (report v administraci Shopify, Search Console), ne jedno skóre z PageSpeed Insights.
  • Nejčastější brzdy Shopify e-shopu: aplikace, obrázky v úvodním banneru, skripty třetích stran a písma.
  • Každou změnu ověřte za několik dní v reportu. Data mají zpoždění až 36 hodin.

Obsah článku

Proč na rychlosti e-shopu záleží

Rychlost ovlivňuje konverzi, náklady na reklamu i pozice ve vyhledávání. Každá sekunda čekání navíc zvyšuje počet lidí, kteří stránku zavřou dřív, než ji uvidí. U e-shopu, který platí za prokliky z reklamy, pomalá stránka znamená, že část rozpočtu platíte za návštěvníky, kteří obsah nikdy nenačtou.

Google Core Web Vitals používá jako jeden ze signálů hodnocení stránek. Není to nejsilnější faktor, obsah a relevance vedou. U stránek s podobným obsahem ale rychlost rozhoduje. Kontext k tomu najdete v našem průvodci SEO pro Shopify.

Většina návštěv českých e-shopů přichází z mobilu, často na slabším připojení. Právě mobilní výsledky jsou proto ty, na kterých záleží nejvíc, a zároveň bývají výrazně horší než desktopové.

Core Web Vitals: LCP, INP a CLS srozumitelně

Core Web Vitals jsou tři metriky, které Google používá k hodnocení uživatelského zážitku. Každá měří něco jiného a každou zlepšíte jinou opravou.

Metrika Co měří Dobré Potřebuje zlepšit Špatné
LCP (Largest Contentful Paint) Za jak dlouho se zobrazí největší prvek na obrazovce, obvykle úvodní banner nebo fotka produktu do 2,5 s 2,5–4 s nad 4 s
INP (Interaction to Next Paint) Jak rychle stránka reaguje na kliknutí, klepnutí nebo stisk klávesy do 200 ms 200–500 ms nad 500 ms
CLS (Cumulative Layout Shift) Jak moc se obsah při načítání posouvá do 0,1 0,1–0,25 nad 0,25

Stránka projde, když dobré hodnoty splňuje aspoň 75 % návštěv, zvlášť na mobilu a na desktopu. Nerozhoduje tedy průměr, ale zážitek i těch pomalejších návštěvníků.

INP nahradil v roce 2024 starší metriku FID. Pokud čtete starší návody, které FID zmiňují, jsou v tomhle bodě zastaralé. INP je přísnější, protože měří všechny interakce během návštěvy, ne jen první.

Laboratorní a terénní data: proč se čísla liší

Laboratorní data jsou jedno měření v simulovaném prostředí, terénní data jsou souhrn skutečných návštěv. Pro hodnocení Googlem i pro vaše tržby rozhodují terénní data. Tenhle rozdíl je nejčastější zdroj zmatku kolem rychlosti.

  • Laboratorní data (Lighthouse, skóre 0–100 v PageSpeed Insights) simulují pomalejší mobil a síť. Hodí se k hledání příčin a k porovnání před a po úpravě. Skóre kolísá měření od měření a jedno číslo nic nedokazuje.
  • Terénní data (report v Shopify, sekce „Co zažívají skuteční uživatelé“ v PageSpeed Insights, Search Console) ukazují, co zažívají vaši zákazníci na svých zařízeních za posledních 28 dní.

Běžná situace: PageSpeed ukáže mobilní skóre 45 a majitel e-shopu zpanikaří, přitom terénní Core Web Vitals jsou v zeleném pásmu. Opačná situace je horší: skóre 90 v laboratoři a špatné INP u skutečných zákazníků kvůli chatovacímu widgetu, který se v testu nenačetl. Sledujte proto hlavně terénní data a laboratoř používejte k diagnostice.

Jak měřit rychlost přímo v Shopify

Shopify má vlastní report výkonu webu postavený na datech skutečných návštěvníků. Najdete ho v administraci v sekci Analytika → Reporty a souhrn je i na stránce Online obchod → Šablony. Nahradil dřívější „skóre rychlosti“ založené na Lighthouse.

Co report umí:

  • ukazuje LCP, INP a CLS s hodnocením dobré, průměrné nebo špatné,
  • zobrazí vývoj v čase za posledních 90 dní,
  • do grafu vkládá značky událostí, jako je instalace aplikace, změna šablony nebo úprava kódu. Hned vidíte, jestli rychlost klesla po konkrétní změně,
  • rozlišuje typy stránek, takže poznáte, jestli je problém na produktu, v kolekci nebo na domovské stránce.

Dvě věci mějte na paměti. Data mohou mít zpoždění až 36 hodin a report se naplní jen tehdy, když e-shop není v režimu hesla. Po každé úpravě proto počkejte několik dní a pak teprve vyhodnocujte.

Další nástroje: PageSpeed Insights a Search Console

K reportu v Shopify přidejte dva bezplatné nástroje od Googlu. Každý odpovídá na jinou otázku.

Nástroj Na co je dobrý Typ dat
Report výkonu webu v Shopify Vývoj v čase, dopad konkrétních změn Terénní
PageSpeed Insights Konkrétní URL: terénní data nahoře, diagnostika a doporučení dole Terénní i laboratorní
Google Search Console, přehled Core Web Vitals Které skupiny URL mají problém z pohledu Googlu Terénní
Chrome DevTools (karta Performance) Hledání konkrétního skriptu, který stránku blokuje Laboratorní

Testujte vždy tři typy stránek: domovskou stránku, kolekci a detail produktu. Každá má jiné prvky a jiné problémy. Výsledky porovnávejte s tím, jak si stojí šablona, kterou používáte. Shopify zveřejňuje souhrnná data Core Web Vitals podle šablon na webu performance.shopify.com.

Aplikace: brzda číslo jedna

Aplikace jsou nejčastější příčina pomalého Shopify e-shopu. Každá aplikace, která něco zobrazuje na webu, přidává vlastní JavaScript, styly nebo volání na svůj server, a to často na všech stránkách, i tam, kde ji nepotřebujete. Recenze, chat, pop-upy, věrnostní programy, upsell nebo odpočítávadla se sčítají.

Jak postupovat:

  1. Sepište aplikace, které zasahují do webu, a u každé si řekněte, kolik vydělá.
  2. Vypněte vložení aplikace (app embeds) v editoru šablony u těch, které na webu nepotřebujete. U řady aplikací jde vložení vypnout bez odinstalace.
  3. Odinstalujte nepoužívané aplikace a zkontrolujte, jestli po nich v kódu šablony nezůstaly zbytky. Starší aplikace vkládaly kód přímo do šablony a po odinstalaci ho tam nechávaly.
  4. Nahraďte duplicity. Dvě aplikace se stejnou funkcí nebo aplikace na něco, co už umí Shopify sám.
  5. Po každé změně sledujte report výkonu a značku události v grafu.

Jak aplikace posuzovat už při výběru, popisuje článek Shopify App Store: nejlepší aplikace pro český e-shop. U funkce, kterou používáte dlouhodobě a která web zatěžuje, bývá řešením lehčí vlastní úprava v šabloně.

Obrázky a úvodní banner

U většiny Shopify e-shopů je prvkem LCP úvodní banner nebo hlavní fotka produktu. Jeho zrychlení je proto nejrychlejší cesta k lepšímu LCP. Shopify CDN obrázky automaticky převádí do moderních formátů a zmenšuje, pokud je šablona správně požaduje. Problém vzniká tam, kde to šablona nebo úpravy nedělají.

  • Nahrávejte obrázky v rozumné velikosti. Fotka 6 000 pixelů z fotoaparátu je zbytečná. Pro banner přes celou šířku stačí kolem 2 500 px na delší straně, pro produkt méně.
  • Banner nesmí mít líné načítání (lazy loading). Obrázky pod okrajem obrazovky mají načítat líně, ale první viditelný obrázek se musí načíst přednostně. Šablony s úpravami na míru tohle často dělají obráceně.
  • Nepoužívejte posuvník (slideshow) jako hlavní banner, pokud to není nutné. Načítá víc obrázků najednou a bývá pomalejší než jeden statický banner.
  • Video na pozadí v úvodu stránky je jeden z nejtěžších prvků vůbec. Na mobilu ho nahraďte obrázkem.
  • Text do obrázků nepište. Text v HTML se vykreslí dřív než obrázek a je čitelný i pro vyhledávače.

Skripty třetích stran a Google Tag Manager

Měřicí a marketingové skripty zpomalují web nenápadně, protože se přidávají postupně a nikdo je neodebírá. Typický e-shop má GA4, Google Ads, Meta pixel, Sklik, Heureka ověřeno zákazníky, cookie lištu a k tomu několik starých kódů z ukončených kampaní.

  • Projděte Google Tag Manager a smažte značky, které nic nesbírají nebo patří ke skončeným kampaním.
  • Nevkládejte stejný kód dvakrát: jednou přes aplikaci nebo nativní integraci a jednou přes GTM. Kromě zpomalení to zdvojí data.
  • Používejte nativní napojení Shopify tam, kde existuje. Zákaznické události (customer events) běží odděleně od stránky a zatěžují ji méně.
  • Chat a pop-upy načítejte se zpožděním nebo až po interakci, ne hned při otevření stránky.

Správné nastavení měření bez zbytečných duplicit popisuje článek GA4 a Google Tag Manager na Shopify.

Šablona, sekce a písma

Základ rychlosti určuje šablona. Moderní šablona Online Store 2.0 nebo šablony od Shopify z rodiny Horizon jsou optimalizované a zdarma. Stará šablona s mnoha úpravami bývá pomalá bez ohledu na to, co dalšího uděláte.

  • Počet sekcí. Shopify samo upozorňuje, že velký počet sekcí na stránce snižuje výkon. Domovská stránka s dvaceti sekcemi je pomalejší a málokdo ji dočte do konce.
  • Písma. Každý řez písma (tučné, kurzíva) je samostatný soubor. Dvě rodiny písma po dvou řezech stačí. Systémové písmo je nejrychlejší.
  • Aktuální verze šablony. Autoři šablon výkon průběžně zlepšují. Stará verze přichází o opravy, které už existují.
  • Úpravy kódu. Složité smyčky v Liquidu, například procházení stovek produktů v menu nebo filtrech, zpomalují odpověď serveru.

Pokud je šablona zastaralá, je výměna často levnější než záplatování. Jak vybírat, popisuje článek Jak vybrat správnou Shopify šablonu, a výměnu vám můžeme udělat jako instalaci nové šablony na stávající e-shop. Větší zásahy ale neplánujte na listopad a prosinec. Důvody vysvětluje náš technický checklist na Black Friday a Vánoce.

Proč obsah poskakuje a jak to opravit

Obsah poskakuje (vysoké CLS), když se do stránky dodatečně vloží prvek, pro který nebylo vyhrazené místo. Zákazník chce kliknout na tlačítko a trefí něco jiného, protože se stránka posunula. Nejčastější příčiny na Shopify:

  • Obrázky bez zadaných rozměrů. Prohlížeč neví, kolik místa vyhradit, dokud se obrázek nenačte. Šablona musí u obrázků uvádět šířku a výšku.
  • Lišty a oznámení nahoře (doprava zdarma, cookie lišta), které se zobrazí až po načtení a odsunou obsah dolů.
  • Widgety aplikací, typicky hvězdičky recenzí nebo doporučené produkty, které se dotahují se zpožděním.
  • Webová písma, u kterých se po načtení změní velikost textu.

Oprava je vždy stejná: prvku vyhradit místo předem. U widgetů aplikací to obvykle znamená nastavit minimální výšku kontejneru v šabloně. Cookie lištu je lepší zobrazit jako překryv dole než jako pruh, který posouvá obsah.

Pomalá reakce na kliknutí (INP)

Špatné INP znamená, že po kliknutí se nic neděje, protože prohlížeč je zaneprázdněný spouštěním JavaScriptu. Na e-shopu je to citelné u výběru varianty, přidání do košíku, otevření menu nebo filtrů. Zákazník klikne podruhé a přidá zboží dvakrát, nebo odejde.

  • Hlavní příčina jsou skripty: aplikace, měřicí kódy a chaty, které běží současně s interakcí. Proto pomáhá hlavně omezit aplikace a skripty z předchozích kapitol.
  • Filtry a vyhledávání, které při každé změně přepočítávají celou stránku v prohlížeči. Řešením je lehčí implementace nebo filtry postavené na nativních funkcích Shopify. Víc o filtrech v článku Konec textových filtrů na Shopify.
  • Megamenu s tisíci odkazy načtené najednou.

INP se hůř diagnostikuje než LCP, protože závisí na tom, co zákazník dělá. V PageSpeed Insights uvidíte jen terénní hodnotu. Konkrétní pomalou interakci najdete v Chrome DevTools záznamem výkonu při kliknutí.

Postup zrychlení krok za krokem

Zrychlujte v pořadí od nejlevnější opravy s největším dopadem. Nejdřív odeberte, co nepotřebujete, pak optimalizujte, co zůstane, a až nakonec měňte šablonu.

  1. Změřte výchozí stav: report v Shopify, PageSpeed Insights pro domovskou stránku, kolekci a produkt, Search Console. Zapište si čísla.
  2. Audit aplikací: vypnout nepotřebná vložení, odinstalovat nepoužívané aplikace, vyčistit zbytkový kód.
  3. Audit skriptů v GTM a v šabloně: smazat staré a duplicitní.
  4. Obrázky a banner: velikosti, přednostní načtení prvního obrázku, náhrada posuvníku a videa.
  5. Šablona: aktualizace na poslední verzi, méně sekcí, méně písem, rozměry obrázků kvůli CLS.
  6. Úpravy kódu na míru: pomalé smyčky v Liquidu, filtry, menu. Tady už je potřeba vývojář.
  7. Ověření: po 3–7 dnech porovnat report se zapsaným výchozím stavem.

Kroky 1 až 4 zvládnete z velké části sami. Kroky 5 a 6 pro vás uděláme v rámci úprav a integrací do Shopify. Pro průběžnou péči o výkon se hodí předplacené hodiny vývoje.

Často kladené dotazy (FAQ)

Jaké hodnoty Core Web Vitals jsou dobré?

LCP do 2,5 sekundy, INP do 200 milisekund a CLS do 0,1. Hodnoty musí splňovat aspoň 75 % návštěv, zvlášť na mobilu a na desktopu. Rozhodují terénní data skutečných návštěvníků za posledních 28 dní, ne jedno laboratorní měření v PageSpeed Insights.

Je Shopify pomalá platforma?

Není. Servery, CDN a optimalizace obrázků zajišťuje Shopify a moderní šablony jsou rychlé. E-shop zpomalují hlavně aplikace, skripty třetích stran, velké obrázky a zastaralé nebo příliš upravené šablony. Tyhle příčiny máte pod kontrolou vy.

Proč mám v PageSpeed Insights nízké skóre, když e-shop působí rychle?

Skóre 0–100 je laboratorní měření, které simuluje pomalý mobil a pomalou síť. Kolísá a nepopisuje zážitek skutečných zákazníků. Podívejte se na terénní data v horní části PageSpeed Insights nebo do reportu výkonu v administraci Shopify. Ta rozhodují.

Kde najdu rychlost e-shopu v administraci Shopify?

V sekci Analytika → Reporty v reportu výkonu webu, souhrn je také na stránce Online obchod → Šablony. Report ukazuje LCP, INP a CLS z dat skutečných návštěvníků za 90 dní a označuje změny, jako je instalace aplikace. Data mají zpoždění až 36 hodin.

Zpomalují aplikace Shopify e-shop?

Ty, které něco zobrazují na webu, ano. Přidávají JavaScript a styly, často na všechny stránky. Proto se vyplatí nepotřebné aplikace odinstalovat, u ostatních vypnout vložení tam, kde ho nepotřebujete, a zkontrolovat, že po odinstalovaných aplikacích nezůstal kód v šabloně.

Jak dlouho trvá, než se zlepšení projeví?

V reportu Shopify se změna ukáže za jeden až dva dny, stabilní obraz budete mít zhruba za týden. Google pracuje s daty za 28 dní, takže v Search Console se zlepšení projeví postupně během čtyř týdnů. Laboratorní test uvidí změnu okamžitě.

Chcete rychlejší e-shop?

Uděláme audit rychlosti vašeho Shopify e-shopu, najdeme aplikace a skripty, které ho zpomalují, a opravíme šablonu tak, aby prošla Core Web Vitals. Podívejte se na naše úpravy a integrace do Shopify nebo si domluvte konzultaci zdarma.

Zdroje

Autor: Miroslav Volovec, CEO 3NODE Software s.r.o. — specialisté na vývoj e-shopů a aplikací na platformě Shopify.