Performance

Core Web Vitals

Co jsou Core Web Vitals?

Core Web Vitals jsou tři klíčové metriky výkonu webu, které Google oficiálně používá jako ranking faktor od roku 2021. Měří rychlost načítání, interaktivitu a vizuální stabilitu stránky – tedy to, jak uživatelé skutečně vnímají výkon vašeho webu. Nejde o technické detaily zajímavé jen pro vývojáře, ale o faktory přímo ovlivňující, zda návštěvník zůstane nebo odejde během první sekundy.

Google tyto metriky prosadil, protože data jasně ukazují: čím rychlejší a stabilnější web, tím vyšší konverze a spokojenost uživatelů. Podle studií pokles načítání z 3 na 1 sekundu může zvýšit konverze až o 70 %. Pomalý web neznamená jen horší pozice v Google – znamená ztracené zákazníky a peníze. Proto je optimalizace Core Web Vitals dnes prioritou číslo jedna pro každého, kdo myslí SEO a uživatelskou zkušenost vážně.

Core Web Vitals se skládají ze tří metrik: LCP (Largest Contentful Paint) měřící rychlost načtení hlavního obsahu, INP (Interaction to Next Paint) měřící odezvu na uživatelské interakce a CLS (Cumulative Layout Shift) měřící vizuální stabilitu stránky. Každá metrika má definované prahové hodnoty – "dobrá", "vyžaduje zlepšení" a "špatná". Google doporučuje, aby alespoň 75 % návštěv stránky mělo "dobré" hodnoty pro všechny tři metriky.

Tři klíčové metriky

LCP (Largest Contentful Paint) – rychlost načtení obsahu

LCP měří, za jak dlouho se na obrazovce objeví největší viditelný prvek (obvykle hlavní obrázek, video nebo velký textový blok). Ideální hodnota je pod 2,5 sekundy. Cokoliv nad 4 sekundy je považováno za špatné. LCP přímo odráží, jak rychle návštěvník vidí hlavní obsah stránky, tedy kdy stránka vypadá načtená (i když technicky ještě může načítat další prvky na pozadí).

Pro zlepšení LCP optimalizujte načítání největších prvků: komprimujte obrázky (použijte WebP formát), využijte lazy loading pro obrázky pod fold, implementujte CDN pro rychlé doručení statických souborů, zrychlte server response time (kvalitní hosting), minimalizujte CSS a JavaScript, které blokují renderování. Odstranění jednoho zbytečného skriptu v <head> může snížit LCP o sekundu.

INP (Interaction to Next Paint) – odezva na interakce

INP nahradil v roce 2024 starší metriku FID (First Input Delay) a měří odezvu webu na všechny uživatelské interakce (kliknutí, scroll, psaní). Ideální hodnota je pod 200 milisekund. Cokoliv nad 500 ms je špatné. INP ukazuje, jak rychle web reaguje – když uživatel klikne na tlačítko, za jak dlouho vidí vizuální změnu.

Pro zlepšení INP minimalizujte JavaScriptový kód, optimalizujte event listenery, používejte asynchronní načítání skriptů, využijte web workers pro náročné operace, rozdělte dlouhé úkoly (long tasks), implementujte debouncing/throttling u scroll a resize eventů. Často problém způsobují těžké tracking skripty (analytika, reklamy) – načítejte je asynchronně a s nízkou prioritou.

CLS (Cumulative Layout Shift) – vizuální stabilita

CLS měří, jak moc se obsah stránky neočekávaně posunuje během načítání. Ideální hodnota je pod 0,1. Cokoliv nad 0,25 je špatné. CLS penalizuje situace, kdy začnete číst text, najednou se načte reklama nebo obrázek a celý obsah "skočí" dolů – frustrující zkušenost známá všem uživatelům internetu.

Pro zlepšení CLS vždy definujte šířku a výšku obrázků a videí v HTML/CSS, rezervujte prostor pro reklamy a dynamický obsah, nepřidávejte obsah nad existující (kromě reakce na interakci), používejte font-display: swap opatrně, testujte na pomalých připojeních. Například pokud máte obrázek bez definované velikosti, prohlížeč mu nejdřív přidělí 0px, pak po načtení reálnou výšku – což posune vše pod ním.

Jak měřit Core Web Vitals

  • Google PageSpeed Insights

    • Nejdostupnější nástroj, zadáte URL a dostanete detailní report s hodnocením všech tří metrik. Ukazuje jak "laboratorní data" (simulované načtení), tak "polní data" (skutečné zážitky uživatelů z Chrome User Experience Report). Zdarma, bez registrace, s konkrétními doporučeními, co zlepšit.

  • Lighthouse

    • Integrovaný nástroj v Chrome DevTools (F12 → Lighthouse). Spustí audit přímo v prohlížeči a zobrazí detaily o výkonu, dostupnosti, SEO a best practices. Hodí se pro vývojáře během vývoje – okamžitá zpětná vazba po změnách. Lighthouse data jsou laboratorní (vaše zařízení), ne polní (skuteční uživatelé).

  • Google Search Console

    • V sekci "Core Web Vitals" vidíte, které URL na vašem webu mají problémy podle skutečných dat od uživatelů. Rozděleno na mobilní a desktopové verze. Google vás upozorní, pokud velká část stránek nesplňuje standardy. Data aktualizována s několika týdny zpožděním.

  • Chrome DevTools

    • Karta Performance umožňuje zaznamenat interakci se stránkou a detailně analyzovat, co způsobuje zpoždění. Vidíte přesně, který skript blokuje main thread, kdy nastává layout shift, co zpomaluje LCP. Pro pokročilé optimalizátory, kteří potřebují najít konkrétní problém v kódu.

  • Web Vitals Extension

    • Chrome rozšíření zobrazující Core Web Vitals přímo při brouzdání. Malá ikonka v browseru ukazuje LCP, INP a CLS v reálném čase. Ideální pro rychlou kontrolu konkurence nebo testování vlastního webu při vývoji. Zdarma, jednoduché, bez zbytečných detailů.

Jak zlepšit Core Web Vitals

  • Optimalizace obrázků

    • Obrázky jsou nejčastější příčinou špatného LCP a CLS. Komprimujte obrázky (TinyPNG, Squoosh), používejte moderní formáty (WebP, AVIF), implementujte responsive images (<picture>, srcset), definujte width/height atributy, lazy-loadujte obrázky pod fold. Jeden velký nekomprimovaný hero obrázek může zničit LCP.

  • Redukce JavaScriptu

    • JavaScript blokuje renderování a zpomaluje interaktivitu. Minimalizujte a komprimujte JS soubory, odstraňte nepoužívaný kód (tree shaking), načítejte skripty asynchronně (async/defer), použijte code splitting (načítejte jen to, co potřebujete), odložte non-critical skripty. Často stačí odstranit zbytečné jQuery pluginy.

  • Server Response Time

    • Pokud server odpovídá pomalu, žádná optimalizace na frontendu nepomůže. Použijte kvalitní hosting, implementujte caching (browser cache, server cache, CDN), optimalizujte databázové dotazy, použijte HTTP/2 nebo HTTP/3, zvažte CDN pro globální publikum.

  • CSS optimalizace

    • Velké CSS soubory blokují renderování. Extrahujte critical CSS (styly potřebné pro above-the-fold obsah) a vložte ho inline do <head>, zbytek načítejte asynchronně. Minimalizujte CSS, odstraňte nepoužité styly (PurgeCSS), používejte CSS sprites pro malé ikonky.

  • Fonty

    • Webové fonty mohou způsobit layout shift a zpoždění renderování. Používejte font-display: swap nebo optional, self-host fonty místo Google Fonts (rychlejší, lepší cache), preloadujte kritické fonty (<link rel="preload">), používejte variable fonts pro snížení počtu souborů.

  • Third-party skripty

    • Reklamy, analytika, chat widgety, sociální sítě – často nejhorší zdroj problémů. Načítejte third-party skripty s nízkou prioritou, asynchronně, ideálně až po user interakci. Zvažte, které skutečně potřebujete. Každý tracking skript zpomaluje web.

  • Lazy loading

    • Načítejte obsah až když je potřeba. Native lazy loading pro obrázky (loading="lazy"), lazy load iframes (videa, mapy), použijte Intersection Observer API pro dynamické načítání sekcí. Nenačítejte 50 obrázků, když uživatel vidí jen 3.

Vliv na SEO

Google oficiálně potvrdil, že Core Web Vitals jsou ranking faktorem. Od května 2021 je "Page Experience" součástí algoritmu. To znamená, že při jinak stejné kvalitě obsahu a odkazů vyhraje web s lepším výkonem. Není to zdaleka nejdůležitější faktor (obsah a odkazy stále dominují), ale v konkurenčních oborech může rozdíl mezi pozicí 3 a 5 znamenat tisíce zákazníků měsíčně.

Kromě přímého SEO efektu hrají Core Web Vitals roli v chování uživatelů. Pomalý web má vyšší bounce rate, nižší čas na stránce, méně zobrazených stránek – to vše Google měří a interpretuje jako signál nízké kvality. Investice do rychlosti je tedy investice do všech aspektů webu – SEO, konverzí i uživatelské spokojenosti. Data ukazují, že 1 sekunda zpoždění snižuje konverze průměrně o 7 %.

Nejčastější otázky o Core Web Vitals

Jaký vliv mají Core Web Vitals na mobilní vyhledávání? Rozbalit

Obrovský. Google používá mobile-first indexaci, takže mobilní verze webu je primární. Core Web Vitals se měří zvlášť pro mobil a desktop. Mobilní zařízení mají obvykle pomalejší připojení a slabší hardware, takže optimalizace je tam ještě kritičtější. Pokud máte špatné Core Web Vitals na mobilu, trpí celé SEO.

Stačí mít dobré Core Web Vitals na homepage? Rozbalit

Ne. Google měří Core Web Vitals na všech stránkách webu a hodnotí celkový výkon. Pokud máte rychlou homepage, ale pomalé produktové stránky nebo blog, trpí celé SEO. V Search Console vidíte, které URL skupiny mají problémy. Zaměřte se na stránky s nejvyšší návštěvností a konverzními cíli.

Musím dosáhnout perfektního skóre 100 v PageSpeed Insights? Rozbalit

Ne. Skóre 100 je téměř nemožné na reálném webu se sledováním, reklamami a dynamickým obsahem. Důležité je být v "zelené zóně" (90+) a splňovat prahové hodnoty pro Core Web Vitals. Google nepenalizuje web s 95 oproti webu s 98. Zaměřte se na reálné zlepšení uživatelské zkušenosti, ne honbu za čísly.

Jak často Google aktualizuje Core Web Vitals data? Rozbalit

Polní data (reální uživatelé) v Search Console a PageSpeed Insights jsou z posledních 28 dní a aktualizují se denně. Ale rankingový efekt se projevuje s odstupem – Google potřebuje dostatečný vzorek dat. Po optimalizaci můžete vidět změnu pozic za 4-8 týdnů. Laboratorní data (Lighthouse) jsou okamžitá.

Mohou mi third-party skripty zničit Core Web Vitals? Rozbalit

Ano, third-party skripty (reklamy, analytics, chat, sociální widgety) jsou nejčastější zabijáci výkonu. Načítají se ze cizích serverů, které nekontrolujete, mohou být pomalé nebo neoptimalizované. Řešení: načítejte je asynchronně, používejte tag manager, zvažte odstranění nepotřebných skriptů. Jedna zbytečná reklama může zhoršit INP o stovky milisekund.

Související pojmy

First Contentful Paint Performance SEO Lazy loading Optimalizace