Core Web Vitals pre e-commerce: opravy LCP, INP a CLS
Pomalé produktové stránky stoja konverzie. Tu je, čo LCP, INP a CLS skutočne znamenajú pre e-shopy, a opravy s najväčším dopadom pre každú metriku.
Spustili ste PageSpeed Insights na svojej produktovej stránke. Späť na vás hľadia tri červené ukazovatele. Skóre je 41. Stránka sa pomaly načítava aj na vašom testovacom telefóne, ale nie ste si istí, ktorá z tých troch metrík vám vlastne stojí predaje — alebo ktorú opraviť ako prvú.
Core Web Vitals sú tri metriky načítavania a interakcie, ktoré Google publikuje pre každý web. Ovplyvňujú ranking okrajovo. Konverziu ovplyvňujú oveľa viac. Pre e-shop, kde každá sekunda oneskorenia uberá dôveru tlačidlu kúpiť, samotný dopad na konverziu ospravedlňuje ich opravu, ešte predtým, než započítate SEO.
Tri metriky, v skratke
- LCP (Largest Contentful Paint) meria, ako dlho trvá, kým sa dokončí načítanie najväčšieho viditeľného prvku — zvyčajne vášho hero obrázku produktu. Dobré: pod 2,5 sekundy. Slabé: nad 4 sekundy.
- INP (Interaction to Next Paint) meria, ako reaktívne sa stránka cíti pri ťuknutiach a kliknutiach. V marci 2024 nahradila FID. Dobré: pod 200 ms. Slabé: nad 500 ms.
- CLS (Cumulative Layout Shift) meria, koľko sa prvky pohybujú počas načítavania stránky. Dobré: pod 0,1. Slabé: nad 0,25.
Googleov web.dev sprievodca o Core Web Vitals pokrýva formálne definície; zvyšok tohto článku sa zameriava na to, čo s nimi robiť na skutočnom obchode.
Prečo e-commerce dostáva zásah tvrdšie než blogy
Blogový príspevok je text, možno jeden hero obrázok, možno jeden embed. Produktová stránka je hero obrázok, galéria náhľadov, widget recenzií, karusel odporúčaní, chatová bublina, upsell popup, nákupný košík v drawer, analytika pre tri platformy, heatmap záznam a A/B test framework. Každý z nich posiela JavaScript. Každý z nich súťaží o hlavné vlákno.
Typický Shopify storefront v roku 2026 posiela nejakú kombináciu z:
- Klaviyo (zachytávanie e-mailov, popupy)
- Privy alebo OptinMonster (exit-intent)
- Smile.io alebo Loyalty Lion (widget odmien)
- Yotpo alebo Judge.me (recenzie)
- Tidio alebo Gorgias (chat)
- Hotjar alebo Microsoft Clarity (nahrávanie relácií)
- GA4, Meta Pixel, TikTok Pixel (analytika)
Každý z nich sa zdá byť zadarmo, keď ho nainštalujete. Ani jeden nie je zadarmo. Náklady sa prejavia najprv v INP, potom v LCP, potom vo vašej konverznej miere.
Opravy LCP pre produktové stránky
LCP na produktovej stránke je takmer vždy hero obrázok. Tri zmeny v poradí dopadu:
1. Servírujte správny formát a veľkosť. 4000×4000 PNG priamo od vášho produktového fotografa má 6 MB. Ten istý obrázok ako správne rozmerovaný WebP alebo AVIF v rozmeroch, ktoré sa skutočne vykresľujú, má často pod 150 KB. Shopify aj WooCommerce to oba zvládnu, ak im prestanete prepisovať zmenu veľkosti.
2. Preload hero obrázku. Pridajte preload hint v <head>, aby prehliadač začal s fetchom skôr, než parsuje zvyšok 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. Nezneužívajte lazy-load na obrázky nad záhybom. loading="lazy" na vašom hero obrázku je úplne najčastejším zabijakom LCP na produktových stránkach. Lazy-loadujte náhľady a galériu pod záhybom; nikdy nie prvý viditeľný obrázok.
Referencia: Optimize LCP na web.dev.
Opravy INP pre produktové stránky
INP je miestom, kde má väčšina obchodov najhoršie časy. Vzorec je konzistentný: stránka vyzerá načítaná, používateľ ťukne na „Pridať do košíka" a 600 ms je zamrznuté, kým sa niečo udeje. To zamrznutie je JavaScript bežiaci na hlavnom vlákne.
1. Defer non-kritických skriptov. Pridajte defer alebo načítavajte cez async pre čokoľvek, čo nie je potrebné na vykreslenie nákupného tlačidla. Widgety recenzií, chatové bubliny, odporúčacie enginy — všetky by sa mali načítať až po tom, čo je stránka interaktívna, nie počas toho.
2. Bezohľadne auditujte third-party widgety. Väčšina obchodov nesie dva widgety, ktoré robia tú istú prácu (dva analytické nástroje, dvoch poskytovateľov popupov). Vyberte jeden. Odstráňte druhý. Každý extra widget sa nabaľuje.
3. Nahraďte ťažké widgety recenzií server-rendered hodnoteniami. Widget recenzií, ktorý hydratuje 500 recenzií do DOM na strane klienta, je top-3 INP previnilec. Renderujte agregátne hodnotenie a tri najlepšie recenzie na strane servera; plný zoznam recenzií načítavajte lazy, keď k nim používateľ scrolluje.
Pre obchody postavené na Next.js / Reacte sú React dokumenty o ťažkej hydratácii a Next.js streaming SSR tie správne králičie nory.
Opravy CLS pre produktové stránky
Layout shift je najlacnejší z tej trojky na opravu a najtrápnejší, keď ho necháte rozbitý. Tri zmeny:
1. Nastavte explicitné rozmery na každom obrázku. Vždy zahrňte atribúty width a height (alebo CSS aspect-ratio), aby prehliadač rezervoval priestor pred načítaním obrázku:
<img src="/products/wallet.webp"
width="800" height="800"
alt="Hand-stitched leather wallet, front view">
2. Používajte font-display: swap opatrne. Flash of Unstyled Text mení layout, keď sa načíta vlastný font. Buď font preloadujte, alebo použite font-display: optional, aby ste predišli neskorým swapom.
3. Rezervujte priestor pre embedy. Widgety recenzií, karusely odporúčaní a reklamné sloty, ktoré sa vkladajú nad existujúci obsah, spôsobujú kaskádové shifty. Zabalte ich do kontajnera s fixnou výškou, kým sa načítavajú.
Referencia: Optimize CLS.
Ako EshopAuditor zobrazí tieto zistenia
CWV skóre v EshopAuditore odráža výkon vašej domovskej stránky, meraný cez Google PageSpeed Insights v stratégii Mobile aj Desktop. Zvyšok crawlnutých stránok je analyzovaný pre HTML štruktúru, schema, metadata a on-page SEO problémy — ale bez Lighthouse behu na jednotlivých stránkach. Per-stránkový Lighthouse je výpočtovo drahý spúšťať v škále; CWV domovskej stránky je indikatívnym signálom pre typický celosajtový výkonový profil.
CWV domovskej stránky je indikatívne, nie vyčerpávajúce: ak je vaša domovská stránka pomalá, vaše produktové stránky sú takmer vždy pomalšie (rovnaká téma, rovnaké widgety, rovnaké načítanie skriptov). Pre presné per-stránkové CWV naprieč vaším plným katalógom kombinujte tento report s pohľadom Core Web Vitals v Google Search Console, ktorý používa reálne dáta používateľov z CrUX naprieč každou URL, na ktorú má Google impresie.
Nespravodlivá pravda o CWV a rankingu
Google bol jasný: Core Web Vitals sú rankingový signál, ale menší. Dve stránky s porovnateľnou kvalitou obsahu, na dotaze, kde je CWV blízko, uvidia CWV pôsobiť ako rozhodca. To je všetko.
To, na čo Core Web Vitals dramaticky vplývajú, je konverzná miera. 1-sekundové oneskorenie LCP vás nezhodí zo strany 1 na stranu 2 Googlu. Ale merateľne ublíži miere checkoutu — a na e-commerce premávke ten pokles konverzie typicky zatieni akýkoľvek SEO upside alebo downside. Naprieč kvartálom premávky delta zaplatí váš tooling, vaše reklamné výdavky a váš čas niekoľkokrát.
Opravte Core Web Vitals, pretože robia váš obchod ziskovejším, nie preto, že to hovorí Google. SEO výhra je bonus.
Spustite bezplatný audit svojho obchodu na eshopaudit.io — pre prvý scan nie je potrebná registrácia.