Core Web Vitals pro e-commerce: opravy LCP, INP a CLS
Pomalé produktové stránky stojí konverze. Tady je, co LCP, INP a CLS skutečně znamenají pro e-shopy, a opravy s největším dopadem pro každou metriku.
Spustili jste PageSpeed Insights na své produktové stránce. Tři červené ukazatele na vás zírají zpět. Skóre je 41. Stránka se na vašem testovacím telefonu načítá pomalu také, ale nejste si jistí, která z těch tří metrik vám skutečně bere prodeje — nebo kterou opravit jako první.
Core Web Vitals jsou tři metriky načítání a interakce, které Google publikuje pro každý web. Marginálně ovlivňují pořadí. Konverzi ovlivňují mnohem víc než to. Pro e-shop, kde každá sekunda zpoždění ukrajuje důvěru z tlačítka „Koupit", samotný dopad na konverzi ospravedlňuje jejich opravu ještě dřív, než vezmete v úvahu SEO.
Tři metriky stručně
- LCP (Largest Contentful Paint) měří, jak dlouho trvá, než se dokončí načítání největšího viditelného prvku — obvykle vašeho hlavního produktového obrázku. Dobré: pod 2,5 sekundy. Špatné: nad 4 sekundy.
- INP (Interaction to Next Paint) měří, jak responzivně stránka reaguje na klepnutí a kliknutí. V březnu 2024 nahradila FID. Dobré: pod 200ms. Špatné: nad 500ms.
- CLS (Cumulative Layout Shift) měří, jak moc prvky poskakují při načítání stránky. Dobré: pod 0,1. Špatné: nad 0,25.
Googlův průvodce Core Web Vitals na web.dev pokrývá formální definice; zbytek tohoto článku se soustředí na to, co s tím na reálném obchodě dělat.
Proč e-commerce dostává tvrději na frak než blogy
Příspěvek na blogu je text, možná jeden hero obrázek, možná jedno embed. Produktová stránka je hero obrázek, galerie náhledů, widget recenzí, karusel doporučení, chatovací bublina, vyskakovací upsell, košíkový drawer, analytika pro tři platformy, záznamník heatmap a framework pro A/B testy. Každý z nich nasazuje JavaScript. Každý z nich soutěží o hlavní vlákno.
Typická Shopify storefronta v roce 2026 nasazuje nějakou kombinaci:
- Klaviyo (sběr e-mailů, popupy)
- Privy nebo OptinMonster (exit-intent)
- Smile.io nebo Loyalty Lion (widget odměn)
- Yotpo nebo Judge.me (recenze)
- Tidio nebo Gorgias (chat)
- Hotjar nebo Microsoft Clarity (záznam relací)
- GA4, Meta Pixel, TikTok Pixel (analytika)
Každý se při instalaci jeví jako zdarma. Ani jeden zdarma není. Náklad se projeví nejprve v INP, pak v LCP a pak ve vaší konverzní míře.
Opravy LCP pro produktové stránky
LCP na produktové stránce je téměř vždy hero obrázek. Tři změny seřazené dle dopadu:
1. Naservírujte správný formát a velikost. PNG 4000×4000 přímo od vašeho produktového fotografa má 6 MB. Stejný obrázek jako správně velikostně upravený WebP nebo AVIF v rozměrech, ve kterých se skutečně vykresluje, mívá často pod 150 KB. Shopify i WooCommerce to zvládají, pokud přestanete přepisovat jejich resize.
2. Preloadujte hero obrázek. Přidejte do <head> nápovědu preload, aby prohlížeč začal stahovat obrázek ještě před parsováním zbytku stránky:
<link rel="preload" as="image"
href="/products/wallet-hero.webp"
imagesrcset="/products/wallet-hero-400.webp 400w,
/products/wallet-hero-800.webp 800w,
/products/wallet-hero-1200.webp 1200w"
imagesizes="(max-width: 768px) 100vw, 50vw">
3. Nelazyloadujte obrázky nad ohybem stránky. loading="lazy" na vašem hero obrázku je nejčastější vrah LCP na produktových stránkách. Lazyloadujte náhledy a galerii pod ohybem; nikdy ne první viditelný obrázek.
Reference: Optimize LCP na web.dev.
Opravy INP pro produktové stránky
INP je oblast, kde to má většina obchodů nejhorší. Vzor je konzistentní: stránka vypadá načtená, uživatel klepne na „Přidat do košíku" a než se cokoli stane, je tu 600ms zamrznutí. To zamrznutí je JavaScript běžící na hlavním vlákně.
1. Odložte nekritické skripty. Přidejte defer nebo načtěte přes async cokoli, co není potřeba pro vykreslení tlačítka koupit. Widgety recenzí, chatovací bubliny, doporučovací engine — všechno by se mělo načítat až po tom, co je stránka interaktivní, ne během toho.
2. Audituje widgety třetích stran bez slitování. Většina obchodů nese dva widgety, které dělají stejnou práci (dva analytické nástroje, dva poskytovatele popupů). Vyberte jeden. Druhý odstraňte. Každý další widget skládá zátěž.
3. Nahraďte těžké widgety recenzí server-renderovanými hodnoceními. Widget recenzí, který hydratuje 500 recenzí do DOM na klientovi, je v top 3 viníků INP. Renderujte agregované hodnocení a top tři recenze server-side; plný seznam recenzí načítejte líně, až k němu uživatel doroluje.
Pro obchody postavené na Next.js / Reactu jsou React docs ohledně těžké hydratace a Next.js streaming SSR ty správné králičí nory.
Opravy CLS pro produktové stránky
Layout shift je z těch tří nejlevnější na opravu a nejtrapnější, když ho necháte rozbitý. Tři změny:
1. Nastavte explicitní rozměry každého obrázku. Vždy uveďte atributy width a height (nebo CSS aspect-ratio), aby si prohlížeč vyhradil místo ještě před načtením obrázku:
<img src="/products/wallet.webp"
width="800" height="800"
alt="Hand-stitched leather wallet, front view">
2. Používejte font-display: swap opatrně. Flash of Unstyled Text posouvá layout, když se načte vlastní font. Buď font preloadujte, nebo použijte font-display: optional, abyste zabránili pozdním swapům.
3. Vyhraďte místo pro embedy. Widgety recenzí, doporučovací karusely a reklamní sloty, které se vkládají nad existující obsah, způsobují kaskádové posuny. Obalte je do kontejneru s pevnou výškou, dokud se nenačtou.
Reference: Optimize CLS.
Jak je EshopAuditor odhaluje
CWV skóre v EshopAuditoru odráží výkon vaší hlavní stránky, měřený přes Google PageSpeed Insights jak ve strategii Mobile, tak Desktop. Zbytek procházených stránek se analyzuje na strukturu HTML, schemata, metadata a on-page SEO problémy — ale bez per-page Lighthouse běhu. Per-page Lighthouse je výpočetně drahý spouštět ve velkém; CWV hlavní stránky je indikativní signál pro typický celosaytový profil výkonu.
CWV hlavní stránky je indikativní, ne vyčerpávající: pokud je vaše hlavní stránka pomalá, vaše produktové stránky jsou téměř vždy ještě pomalejší (stejná šablona, stejné widgety, stejné načítání skriptů). Pro přesné per-page CWV napříč celým katalogem párujte tuto zprávu s pohledem Core Web Vitals v Google Search Console, který používá reálná uživatelská CrUX field data napříč každou URL, na kterou má Google zobrazení.
Nespravedlivá pravda o CWV a pořadí ve vyhledávání
Google byl jasný: Core Web Vitals jsou ranking signál, ale menší. Dvě stránky se srovnatelnou kvalitou obsahu, na dotazu, kde je CWV těsné, uvidí CWV jednat jako rozhodující prvek na remízu. To je vše.
Co Core Web Vitals dramaticky ovlivňují, je konverzní míra. Sekundové zpoždění v LCP vás neshodí z první stránky Googlu na druhou. Ale měřitelně ubližuje míře dokončení nákupu — a na e-commerce provozu ten pokles konverze typicky zastíní jakýkoli SEO přínos nebo ztrátu. Napříč kvartálním provozem ten rozdíl několikanásobně zaplatí váš nástroj, vaše útraty za reklamu i váš čas.
Opravujte Core Web Vitals proto, že dělají váš obchod ziskovějším, ne proto, že to říká Google. SEO výhra je bonus.
Spusťte zdarma audit svého obchodu na eshopaudit.io — pro první sken není potřeba registrace.