Core Web Vitals pro e-shopy: vysvětlení LCP, INP a CLS

Co měří LCP, INP a CLS, hranice dobrých a špatných hodnot na 75. percentilu, laboratorní a terénní data a běžné opravy e-shopů na Shopify a WooCommerce.

Redakce FixReports11 min čtení

Core Web Vitals jsou tři metriky Googlu, které popisují, jak stránku vnímají skuteční návštěvníci: Largest Contentful Paint (LCP) pro načítání, Interaction to Next Paint (INP) pro odezvu a Cumulative Layout Shift (CLS) pro vizuální stabilitu. Stránka vyhoví, když je alespoň 75 % návštěv v „dobrém“ pásmu: LCP do 2,5 sekundy, INP do 200 milisekund a CLS 0,1 nebo méně, a to zvlášť pro mobily a pro počítače. V e-shopech mají špatné výsledky obvykle na svědomí velké nebo odloženě načítané úvodní a produktové obrázky, skripty aplikací a měřicích nástrojů, webové fonty a bannery nebo widgety recenzí, které po zobrazení stránky odsunou obsah dolů.

Hlavní body

Jaké jsou hraniční hodnoty Core Web Vitals?

Stránka splňuje Core Web Vitals, když 75. percentil jejích načtení spadá u všech tří metrik do dobrého pásma.

MetrikaCo měříDobréVyžaduje zlepšeníŠpatné
LCPDoba do vykreslení největšího obrázku, videa nebo bloku textu ve viditelné části okna2,5 s nebo méněNad 2,5 s až 4,0 sNad 4,0 s
INPDoba od kliknutí, klepnutí nebo stisku klávesy do vykreslení dalšího snímku200 ms nebo méněNad 200 ms až 500 msNad 500 ms
CLSJak moc se viditelný obsah nečekaně posouvá0,1 nebo méněNad 0,1 až 0,25Nad 0,25

Hraniční hodnoty pocházejí z průvodců web.dev k LCP (otevře se v nové kartě), INP (otevře se v nové kartě) a CLS (otevře se v nové kartě), stav k říjnu 2026.

Díky 75. percentilu odráží výsledek většinu návštěvníků, ne jen ty nejrychlejší, a Google hodnotí mobily a počítače zvlášť (otevře se v nové kartě). PageSpeed Insights stránku uzná, když jsou všechny tři metriky dobré; bez dostatku dat o INP posuzuje jen LCP a CLS (dokumentace PageSpeed Insights (otevře se v nové kartě)). Google uvádí, že stabilní metriky Core Web Vitals se nebudou měnit častěji než jednou ročně.

V e-shopu je prvkem LCP často úvodní banner nebo hlavní obrázek produktu, a proto na práci s obrázky tolik záleží.

Proč INP v březnu 2024 nahradil FID?

INP nahradil FID, protože FID měřil jen první interakci a jen část jejího zpoždění, kdežto INP sleduje interakce během celé návštěvy.

Google v květnu 2023 oznámil, že se INP stane metrikou Core Web Vitals, a změna nabyla účinnosti 12. března 2024 (otevře se v nové kartě). FID hlásil jen první interakci a jen její zpoždění vstupu, nikoli čas strávený spouštěním obslužných funkcí událostí ani vykreslením výsledku. INP sleduje kliknutí, klepnutí a stisky kláves po celou dobu návštěvy a hlásí tu nejdelší, přičemž odlehlé hodnoty ignoruje; posouvání a najetí myší se nepočítají. Uživatelé API CrUX a PageSpeed Insights měli na přechod čas do 9. září 2024 (web.dev (otevře se v nové kartě)).

Každá interakce má tři části: zpoždění vstupu (čekání na zaneprázdněné skripty), dobu zpracování (běh obslužných funkcí) a zpoždění prezentace (vykreslení dalšího snímku) (web.dev (otevře se v nové kartě)).

V e-shopu jsou těmito interakcemi výběr varianty, tlačítka množství, přidání do košíku, vysouvací košík, filtry a nabídky. Stránka mohla u FID projít díky rychlému prvnímu klepnutí, a přesto působit pomalu, když si někdo později otevřel filtry.

Jaký je rozdíl mezi laboratorními a terénními daty?

Laboratorní data pocházejí z jednoho testu za pevně daných podmínek, kdežto terénní data se sbírají od skutečných návštěvníků v průběhu času, a Google doporučuje rozhodovat o tom, co opravit nejdřív, podle terénních dat (web.dev (otevře se v nové kartě)).

Laboratorní dataTerénní data
ZdrojJedno simulované načtení stránky (Lighthouse, Chrome DevTools, laboratorní část PageSpeed Insights)Skuteční návštěvníci v Chromu (Chrome UX Report) nebo vlastní monitoring skutečných uživatelů
PodmínkyPevně dané zařízení a síť. Výchozí mobilní test Lighthouse (otevře se v nové kartě) používá „Slow 4G“ (150 ms doba odezvy, stahování 1,6 Mbps) a 4x zpomalení CPUJakákoli zařízení, sítě a místa, která mají vaši návštěvníci
INPPři prostém načtení stránky se neměří. Hrubou náhradou je Total Blocking Time (TBT)Měří se ze skutečných interakcí
Nejlépe se hodí proLadění a ověření změny před nasazenímZjištění, co návštěvníci skutečně dostávají

TBT sčítá tu část každé úlohy hlavního vlákna, která přesahuje 50 ms; web.dev doporučuje méně než 200 ms na průměrném mobilním hardwaru, ale uvádí, že INP nenahrazuje (web.dev (otevře se v nové kartě)).

Pro e-shopy jsou důležité tři podrobnosti o Chrome UX Report (CrUX):

  • Jde o klouzavý průměr za 28 dní (otevře se v nové kartě), který se aktualizuje denně.
  • Zahrnuje Chrome na počítačích a Androidu u uživatelů, kteří splňují podmínky Chromu pro odesílání dat. Chrome v iOS je vyloučen, takže e-shop, kde nakupují převážně uživatelé iPhonů, vidí terénní data jen od části svého publika (metodika (otevře se v nové kartě)).
  • Stránky a celé domény (origins) se v něm objeví, jen když jsou veřejně dohledatelné a dostatečně navštěvované, takže e-shop s nízkou návštěvností může mít jen data za celou doménu, nebo žádná.

Panel webového výkonu (otevře se v nové kartě) v Shopify také hlásí LCP, INP a CLS od skutečných uživatelů na 75. percentilu, ovšem za 30 dní místo 28, takže počítejte s určitými rozdíly oproti CrUX.

Co zpomaluje LCP na stránkách e-shopu?

LCP bývá v e-shopech pomalé, protože hlavní obrázek je příliš těžký, prohlížeč ho objeví pozdě, nebo je záměrně zdržen odloženým načítáním či animací.

  • Odložené načítání obrázku LCP. web.dev doporučuje nedělat to nikdy (web.dev (otevře se v nové kartě)). Jeho analýza stránek na WordPressu zjistila pomalejší LCP na 75. percentilu u webů s nativním lazy loadingem a vypnutí odloženého načítání u obrázků v první obrazovce tento propad odstranilo (web.dev (otevře se v nové kartě)).
  • Pozdě nalezený obrázek. Úvodní obrázek nastavený jako CSS background-image nebo vložený skriptem slideru není v HTML, které prohlížeč prochází jako první. Shopify pro úvodní obsah nedoporučuje CSS pozadí ani efekty postupného zobrazení (fade-in) u obrázku LCP (Shopify (otevře se v nové kartě)).
  • Nízká priorita. Obrázky se načítají s nízkou prioritou, dokud není hotové rozvržení, proto Shopify doporučuje u obrázku LCP fetchpriority="high" (Shopify (otevře se v nové kartě)). web.dev upozorňuje, že nastavení u více než jednoho nebo dvou obrázků snižuje jeho užitečnost (web.dev (otevře se v nové kartě)).
  • CSS a skripty blokující vykreslování. Velké soubory stylů a synchronní skripty v <head> zdržují vykreslení i poté, co obrázek dorazí (web.dev (otevře se v nové kartě)).
  • Velikost souborů a fonty. Používejte moderní formáty, srcset a sizes a CDN. U webových fontů použijte jinou hodnotu font-display než auto nebo block.
<!-- Main product image: real src in the HTML, eager, high priority -->
<img src="/images/linen-shirt-1200.webp"
     srcset="/images/linen-shirt-600.webp 600w, /images/linen-shirt-1200.webp 1200w"
     sizes="(min-width: 990px) 50vw, 100vw"
     width="1200" height="1500"
     fetchpriority="high"
     alt="Natural linen shirt, front view">

<!-- Gallery images below the first screen: lazy -->
<img src="/images/linen-shirt-back-600.webp" loading="lazy"
     width="600" height="750" alt="Natural linen shirt, back view">

Proč je INP na stránkách e-shopu pomalé?

Pomalé INP v e-shopech obvykle znamená příliš mnoho JavaScriptu v hlavním vlákně, z velké části z aplikací, měřicích tagů a funkcí šablony, takže klepnutí musí čekat.

Když zákazník klepne na „Přidat do košíku“, zatímco ještě běží skripty recenzí, chatu a analytiky, klepnutí čeká. Výběr varianty, který znovu vykresluje celý produktový formulář, přidává dobu zpracování. Obří mega menu a výpisy kolekcí s mnoha vzorníky barev přidávají zpoždění prezentace.

web.dev doporučuje rozdělovat dlouhé úlohy a uvolňovat hlavní vlákno, nejprve aktualizovat obrazovku a zbytek odložit a udržovat DOM menší (web.dev (otevře se v nové kartě)). Shopify přidává kroky specifické pro e-shopy: projít každou aplikaci, pixel a skript šablony, odložit vše, co není nezbytné, načítat funkce až při interakci a vypnout anti-flicker kódy pro A/B testování, když žádný test neběží (Shopify (otevře se v nové kartě)).

Co způsobuje posuny rozvržení na stránkách produktů a kolekcí?

Posuny rozvržení v e-shopech většinou způsobuje obsah, který se objeví nebo změní velikost až po prvním vykreslení: obrázky bez rozměrů, oznamovací a cookie lišty, widgety recenzí, bloky aplikací a výměna fontů.

web.dev uvádí jako běžné příčiny média s neznámými rozměry, obsah přidaný nad existující obsah, widgety třetích stran, které samy mění velikost, a webové fonty, jejichž velikost se liší od záložního fontu (web.dev (otevře se v nové kartě)). V e-shopech to znamená lištu s dopravou zdarma vloženou nahoru, hvězdičková hodnocení, která se načtou až po názvu, informace o splátkách pod cenou a karusely doporučených produktů. Shopify upozorňuje, že posuny může způsobit i obsah vyskakovacích oken (Shopify (otevře se v nové kartě)).

Posuny do 500 ms od vstupu uživatele se nepočítají, posuny při posouvání stránky ale ano a laboratorní nástroje je často nezachytí (web.dev (otevře se v nové kartě)). Dejte obrázkům width a height nebo CSS aspect-ratio, rezervujte místo pro widgety, zobrazujte bannery jako překryvné vrstvy, omezte posuny při výměně fontu pomocí size-adjust a animujte pomocí transform místo top nebo left.

/* Reserve space for a reviews summary that loads after the page */
.product-reviews-summary { min-height: 24px; }

/* Keep product cards from jumping while images load */
.product-card img { width: 100%; height: auto; aspect-ratio: 4 / 5; }

Jak zlepšit Core Web Vitals na Shopify?

Na Shopify přináší většinu zlepšení okamžité načtení prvního obrázku s vysokou prioritou, omezení skriptů aplikací a kontrola výsledku v přehledech webového výkonu v administraci.

Zkontrolujte data v administraci

Souhrn najdete na stránce Online obchod > Motivy (Online Store > Themes) a úplné přehledy LCP, INP a CLS v části Analytika > Přehledy (Analytics > Reports). Data mohou být zpožděna až o 36 hodin a soukromý režim musí být vypnutý (Shopify Help Center (otevře se v nové kartě)).

Řiďte načítání obrázků v Liquidu

Filtr image_tag načítá obrázky v sekcích níže na stránce odloženě, pokud nenastavíte preload (reference image_tag (otevře se v nové kartě)): v sekcích 1 až 3 okamžitě, od sekce 4 odloženě. Protože section.index má v editoru šablony hodnotu nil, testujte podmínku > 3, a ne <= 3:

{%- if section.index == 1 -%}
  {{ section.settings.image | image_url: width: 1600 | image_tag: loading: 'eager', fetchpriority: 'high', widths: '600, 900, 1200, 1600', sizes: '100vw' }}
{%- elsif section.index > 3 -%}
  {{ section.settings.image | image_url: width: 1600 | image_tag: loading: 'lazy', sizes: '100vw' }}
{%- else -%}
  {{ section.settings.image | image_url: width: 1600 | image_tag: sizes: '100vw' }}
{%- endif -%}

V produktových mřížkách Shopify doporučuje načítat okamžitě jen několik prvních karet (například forloop.index <= 4) (Shopify (otevře se v nové kartě)). Volbu preload: true používejte střídmě; Shopify doporučuje přednačítat jen jeden nebo dva pozdě objevené zdroje.

Odstraňte, co po sobě aplikace zanechají

Nepoužívaná vložení aplikací vypněte v části Online obchod > Upravit motiv > Vložení aplikací (Online Store > Edit theme > App embeds) (Shopify Help Center (otevře se v nové kartě)). Odinstalováním aplikace se odstraní její bloky, ale aplikace, které přímo upravovaly soubory šablony, mohou zanechat „ghost code“ (mrtvý kód), který podle Shopify může způsobovat problémy s kvalitou a výkonem (Shopify (otevře se v nové kartě)). Shopify také uvádí, že script tagy přestanou fungovat 1. března 2027. U fontů Shopify doporučuje místo externích služeb vlastní CDN nebo systémové fonty (Shopify (otevře se v nové kartě)).

Jak zlepšit Core Web Vitals na WooCommerce?

Na WooCommerce dbejte na to, aby pluginy nepřebíjely prioritizaci obrázků ve WordPressu, ukládejte do mezipaměti vše kromě košíku a pokladny a odstraňte skripty, které se zbytečně načítají všude.

  • Ponechte zpracování obrázků jádru. Od WordPressu 6.3 (vydán 8. srpna 2023) jádro přidává fetchpriority="high" k pravděpodobnému obrázku LCP (ve výchozím nastavení alespoň 50 000 čtverečních pixelů) a u prvních tří obrázků v obsahu vynechává odložené načítání (Make WordPress Core (otevře se v nové kartě)). Pokud optimalizační plugin přidává vlastní lazy loading, ověřte, že vynechává úvodní obrázek a hlavní obrázek produktu.
  • Ukládejte do mezipaměti stránky, ne košíky. Průvodce WooCommerce doporučuje cache stránek na serveru nebo pomocí pluginu a CDN, přičemž stránky košíku a pokladny se do mezipaměti ukládat nemají (dokumentace WooCommerce pro vývojáře (otevře se v nové kartě)).
  • Zkontrolujte cart fragments. Od WooCommerce 7.8 se skript cart fragments načítá jen tam, kde je widget Košík, některé šablony ale mají tento widget napevno v kódu. Blok Mini-Cart cart fragments nepoužívá (blog WooCommerce pro vývojáře (otevře se v nové kartě)).
  • Najděte náročné pluginy. WooCommerce doporučuje k nalezení pomalých pluginů Query Monitor a odložení JavaScriptu, který není nezbytný.

Pokud vaše rozvržení zobrazuje v první obrazovce více než tři obrázky, můžete práh ve WordPressu zvýšit:

// functions.php: skip lazy loading for the first 4 content images (default is 3)
add_filter( 'wp_omit_loading_attr_threshold', function () {
    return 4;
} );

Za jak dlouho se opravy projeví?

Laboratorní testy ukážou účinek opravy hned, terénním datům ale trvá až zhruba čtyři týdny, než ji plně zachytí, protože CrUX průměruje předchozích 28 dní.

Spusťte laboratorní test před změnou i po ní několikrát, protože jednotlivá měření kolísají, a pak sledujte terénní hodnoty v PageSpeed Insights, v přehledu Core Web Vitals v Google Search Console nebo v přehledech Shopify. Bezplatný sken vám dá první orientaci zhruba za minutu. Report výkonu spouští laboratorní test na mobilu se zpomalením (pomalé 4G, 4x CPU) a přidává terénní data z Chrome UX Report, včetně INP, pokud má Google pro váš e-shop dost dat.

Často kladené otázky

Ovlivňují Core Web Vitals pozice v Googlu?

Google uvádí, že metriky Core Web Vitals využívají jeho systémy pro řazení výsledků, ale že dobré hodnoty nezaručují nejvyšší pozice a že i při špatném dojmu ze stránky (page experience) dál zobrazuje nejrelevantnější obsah (Google Search Central (otevře se v nové kartě)).

Proč PageSpeed Insights neukazuje pro můj e-shop žádná terénní data?

CrUX zahrnuje jen stránky a domény (origins), které jsou veřejně dohledatelné a mají dost způsobilých návštěvníků v Chromu. E-shop s nízkou návštěvností může mít jen data za celou doménu, nebo žádná, takže se spolehněte na laboratorní testy a vlastní přehledy své platformy.

Potřebuji k úspěchu skóre Lighthouse 90 nebo vyšší?

Ne. Skóre výkonu v Lighthouse je laboratorní výsledek, zatímco hodnocení Core Web Vitals používá terénní data na 75. percentilu, takže stránka může vyhovět se skromným skóre Lighthouse a nevyhovět s vysokým.

Mám odloženě načítat všechny obrázky produktů?

Ne. Odloženě načítejte obrázky pod první obrazovkou, ale úvodní obrázek a hlavní obrázek produktu načtěte okamžitě a jeden z nich označte fetchpriority="high".

Proč mám na mobilu horší výsledky než na počítači?

Google měří mobily a počítače zvlášť a telefony mají pomalejší procesory i sítě. Mobilní test Lighthouse to simuluje profilem Slow 4G a 4x zpomalením CPU.

Zdroje

Všichni průvodci