Core Web Vitals: klíčové metriky rychlosti a uživatelského zážitku (LCP/INP/CLS)

Core Web Vitals: proč jsou klíčové pro rychlost, UX a moderní SEO

Core Web Vitals (CWV) je sada metrik zaměřených na uživatele, které Google používá k měření kvality načítání, interaktivity a vizuální stability stránek. Jejich cílem je, aby se weby načítaly rychle, reagovaly plynule a nepřekvapovaly uživatele nečekaným posouváním obsahu. V kontextu AIO/AEO a optimalizace pro ChatGPT/LLM jsou CWV důležité také pro strojové „čtení“ stránek a konverze – rychlé, stabilní a přístupné rozhraní snižuje míru odchodů a zvyšuje zapojení.

Aktuální trojice metrik: LCP, INP a CLS

• LCP (Largest Contentful Paint) – čas, kdy se vykreslí největší viditelný obsahový prvek nad přehybem (typicky velký obrázek, plakát videa nebo blok textu).
• INP (Interaction to Next Paint) – reprezentativní doba odezvy na interakci (kliknutí, dotyk, stisk klávesy) během celé návštěvy; hodnotí, jak rychle rozhraní skutečně reaguje.
• CLS (Cumulative Layout Shift) – kumulativní míra neočekávaných posunů rozvržení během životního cyklu stránky.

Hodnoticí prahy: „Dobré“, „Vyžaduje zlepšení“, „Špatné“

Hodnocení vychází z „field“ dat (skutečných návštěv), nikoli pouze z laboratorních simulací. Google hodnotí 75. percentil napříč zařízeními a připojeními.

Field vs. Lab: jak správně měřit

• Field data (RUM): rozhraní API prohlížeče (PerformanceObserver), knihovna web-vitals, Google Analytics 4, CrUX (Chrome UX Report). Jsou rozhodující pro skóre CWV.
• Lab data: Lighthouse, WebPageTest, DevTools. Slouží k diagnostice problému, nikoli ke konečnému hodnocení.

Doporučení: nastavte průběžné měření (RUM) a pravidelné laboratorní testy v CI, abyste odhalili regrese dříve, než zasáhnou uživatele.

LCP podrobně: jak zrychlit „největší prvek“

Co bývá prvkem LCP: hlavní hero obrázek, plakát videa, velký blok textu (např. H1) nebo background-image nad přehybem. LCP končí, když je prvek vykreslený a viditelný.

Typické příčiny pomalého LCP

• Server odpovídá pomalu (TTFB, cold starty, neoptimalizovaná cache).
• Hero obrázek je velký, nekomprimovaný, nemá správné rozměry nebo se načítá pozdě.
• CSS/JS blokující vykreslování, nevhodné pořadí zdrojů, chybějící priority.
• Webfonty způsobují FOIT/FOUT a oddalují vykreslení textu.

Optimalizační techniky pro LCP

• Back-end: CDN a edge cache, HTTP/2 nebo HTTP/3, snížení TTFB, micro-/edge rendering, stabilní cache originu.
• Obrázky: moderní formáty (AVIF/WebP), správné rozměry (width/height), srcset/sizes, explicitní fetchpriority="high" u obrázku LCP, decoding="async".
• Pořadí zdrojů: rel="preload" pro kritické CSS a obrázek LCP (s atributem as), rel="preconnect" k doménám s kritickými zdroji.
• CSS: kritické CSS vložte inline, zbytek načítejte neblokujícím způsobem; minimalizace a deduplikace.
• JS: odložte nekritické skripty (defer/dynamický import), neblokujte vykreslování.
• Webfonty: font-display: swap (nebo optional), přednačítání nejpoužívanějších souborů fontů, subsetování (pouze potřebné glyfy).

INP podrobně: stabilní interaktivita během celé relace

INP měří nejvyšší (ale reprezentativní) latenci odezvy na interakce – od vstupu uživatele po nejbližší „repaint“ rozhraní. Odráží latenci zpracování události, provedení logiky a vykreslení.

Typické příčiny špatného INP

• Dlouhé úlohy (Long Tasks) na hlavním vlákně (parsování, bundling, velké knihovny, špičky při hydrataci SPA).
• Náročná synchronní logika při kliknutí (validace, výpočty, opětovné vykreslení celého stromu).
• Nedostatečná priorita vstupu ve vrstvě plánování, žádné „uvolňování“ hlavního vlákna.

Optimalizační techniky pro INP

• Rozdělení práce: rozdělte dlouhé úlohy na menší části (chunking), používejte requestIdleCallback, postupné vykreslování, „island architecture“.
• Off-main-thread: Web Workers pro náročné výpočty; debounce/throttle pro události „input“.
• Frameworky a UI: méně opětovných vykreslení, memoizace, selektivní hydratace, vykreslování na serveru a „streaming“.
• Hygiena bundlu: code-splitting, odstranění nepoužívaného kódu, lazy-load náročných částí až po interakci.
• Prioritizace: upřednostněte vstup a vizuální odezvu před vedlejšími efekty (analytika, reklamy, widgety).

CLS podrobně: vizuální stabilita bez překvapení

CLS agreguje posuny rozvržení, ke kterým došlo bez interakce uživatele. I malé, ale časté posuny mohou výrazně zhoršit UX.

Typické příčiny špatného CLS

• Obrázky/iframes bez pevně definovaných rozměrů (šířky/výšky nebo aspect-ratio), dynamické reklamy.
• Opožděné načítání webfontů (změna metrik písma), vkládání nadpisů/bannerů nad stávající obsah.
• Pozdě vložené komponenty (recenze, mapy, doporučení) nad již zobrazenou část stránky.

Optimalizační techniky pro CLS

• Vyhraďte prostor: width/height nebo aspect-ratio; pro reklamy definujte kontejnery s minimální výškou.
• Vyhněte se vkládání prvků nad prohlížený obsah; nové panely otevírejte „pod ním“ nebo překryjte overlayem.
• Stabilní fonty: font-display, metricky kompatibilní náhradní fonty, přednačítání kritických souborů.
• Animace provádějte pomocí transform/opacity, nikoli přes top/left/width/height.

Pořadí zdrojů, priority a další zrychlování

• Priority hints: fetchpriority="high" pro obrázek LCP; low pro nekritická média.
• Resource hints: preload, preconnect, dns-prefetch, prerender pro předvídanou navigaci.
• Lazy-loading s rozumem: loading="lazy" pro obsah below-the-fold; hero obsah načítejte eager.
• HTTP/2 a HTTP/3: nižší latence a lepší multiplexování; zjednodušte strukturu zdrojů.
• Cache-Control: dlouhé TTL pro statické assety, ETag/Last-Modified pro efektivní opětovnou validaci.

Nástroje a kanály měření

• Google Search Console: přehled „Core Web Vitals“ z CrUX, skupiny problematických URL podle šablon.
• PageSpeed Insights: kombinuje lab + field data, doporučení Lighthouse.
• Chrome UX Report (CrUX): populace uživatelů – 75. percentil pro LCP/INP/CLS.
• DevTools: panel Performance (Long Tasks, hlavní vlákno), Coverage (nepoužívaný kód), Lighthouse.
• Knihovny RUM: web-vitals pro vlastní sběr metrik do analytiky/BI.

Core Web Vitals a SEO/AEO: dopad na viditelnost a konverze

• Pořadí ve výsledcích: CWV jsou signálem kvality stránek – nejsou jediným faktorem, ale při srovnatelném obsahu zvyšují konkurenceschopnost.
• Procházení a indexace: rychlejší stránky pomáhají crawlerům efektivněji procházet web a snižují chybovost načítání.
• AIO/AEO & LLM: rychlé, stabilní a sémanticky strukturované stránky (Schema.org, správné HTML) mohou modely lépe analyzovat a asistenti je častěji doporučují.
• Byznysové metriky: kratší doba do prvního dojmu (LCP), plynulá interakce (INP) a stabilní rozvržení (CLS) = vyšší míra dokončení úkolů a konverzí.

Specifika SPA a dynamických webů

• Hydratace: minimalizujte „hydration spike“ (code-splitting po komponentách, selektivní hydratace, streaming SSR).
• Routing: přednačítejte další stránku při hover/idle; zachovejte kompatibilitu s bfcache (vyhněte se zbytečnému unload).
• Stav a efekty: omezte nadměrné global re-renders; používejte memoizaci a drobné aktualizace.

Governance, SLO a kontrola kvality

• SLO pro šablonu: např. „Home/Landing LCP ≤ 2,0 s, INP ≤ 150 ms, CLS ≤ 0,08“ s monitorováním v RUM.
• Brána CI/CD: Lighthouse CI s rozpočty (budgets) na velikost JS/CSS, počet požadavků a čas metriky.
• Regresní testy: srovnávací běhy při změnách závislostí a nasazení, automatická upozornění.
• Kultura výkonu: „performance champs“, pravidelné audity třetích stran (tagy, A/B testy, reklamy).

Rychlé výhry: checklist na první 2 týdny

• Změřte výchozí stav (GSC + RUM) a vyberte 3 nejnavštěvovanější šablony.
• Optimalizujte hlavní prvek LCP: správný formát, rozměry, fetchpriority, přednačítání kritických stylů.
• Odložte nekritické skripty a rozdělte největší bundle; odstraňte nepoužívané knihovny.
• Stabilizujte rozvržení: pevné rozměry médií, kontejnery pro reklamy, bezpečné animace.
• Nasaďte RUM pomocí web-vitals a nastavte upozornění pro 75. percentil.

Nejčastější omyly a jak se jim vyhnout

• „Lazy všechno“: hero obsah se musí načítat eager; bezhlavé použití „lazy“ zhorší LCP.
• Pouze laboratorní skóre: rozhodují data z reálného provozu; vždy sledujte 75. percentil.
• Přednačítání bez rozmyslu: nadměrné přednačítání snižuje účinnost priorit; přednačítejte pouze skutečně kritické zdroje.
• Ignorování třetích stran: náročné tagy a reklamy často zhoršují INP/CLS – izolujte je v sandboxu, odkládejte a kontrolujte jejich vliv.

Implementační tipy pro tým a procesy

• Vytvořte „mapu výkonu“ zdrojů: co je kritické pro část nad přehybem a co se může načíst později.
• Zaveďte „performance budgets“ (KB/počet požadavků) a propojte je s procesem revize.
• Měřte podle segmentů (mobil/desktop, země, typ připojení) a optimalizujte tam, kde je dopad největší.

Kontrolní seznam podle metriky

LCP

• AVIF/WebP + správné rozměry a fetchpriority="high" u média LCP.
• Kritické CSS vložte inline, blokující skripty přepněte na defer.
• CDN, krátký TTFB, preconnect k doménám s assety LCP.

INP

• Žádné dlouhé úlohy > 50 ms; rozdělte práci, přesuňte výpočty do Workerů.
• Rozdělte kód a používejte lazy-load náročných modulů; upřednostněte vstup.
• Minimalizujte opětovné vykreslování stromu; použijte memoizaci a selektivní hydrataci.

CLS

• Vždy specifikujte rozměry/poměr stran obrázků a iframe prvků.
• Vyhraďte prostor pro reklamy a dynamické moduly.
• Stabilní fonty a animace pomocí transform/opacity.

Propojení s přístupností a obsahem

Výkon a přístupnost jdou ruku v ruce: rychlé a stabilní UI usnadňuje orientaci také uživatelům s technickými či smyslovými omezeními. Správné HTML, alternativní texty, čitelné kontrasty a předvídatelná navigace synergicky zlepšují CWV i celkové UX.

CWV jako součást celkové strategie

Core Web Vitals nejsou jednorázovým úkolem, ale průběžnou disciplínou – stejně jako bezpečnost nebo SEO. Týmy, které zavádějí měření v reálném čase, rozpočty, automatizované testy a kulturu „performance-first“, dosahují lepších pozic, vyšší spokojenosti uživatelů a více konverzí.