Core Web Vitals: Optimalizace rychlosti LCP, INP a CLS

Core Web Vitals jsou sada tří metrik od Googlu, které měří reálný uživatelský zážitek na webu. Od roku 2021 jsou součástí rankingových signálů a přímo ovlivňují pozice ve vyhledávání. Jejich optimalizace přináší lepší SEO výsledky i vyšší konverzní poměr.

Proč jsou Core Web Vitals důležité

Google používá Core Web Vitals jako součást hodnocení Page Experience. Weby, které tyto metriky splňují, mají podle dat Googlu o 24 % nižší míru opuštění. Při srovnatelné relevanci obsahu s konkurencí vám lepší Core Web Vitals dávají měřitelnou výhodu.

Dopad	Čísla
Snížení bounce rate	-24 % u webů splňujících CWV
Vliv na konverze	+7 % za každou ušetřenou sekundu načítání
Podíl webů splňujících CWV	~40 % (2026)
Hodnotící okno	28denní klouzavý průměr z CrUX dat

„Core Web Vitals nejsou jen technická metrika — jsou přímou měřitelnou vazbou mezi výkonem webu a byznysovými výsledky.”

LCP: Largest Contentful Paint

LCP měří, za jak dlouho se vykreslí největší viditelný prvek na stránce — typicky hlavní obrázek, nadpis nebo video. Cílová hodnota je do 2,5 sekundy.

Co ovlivňuje LCP

• Serverová odezva (TTFB) — pomalý server = pomalé LCP
• Render-blocking resources — CSS a JS blokující vykreslení
• Velikost obrázků — nekomprimované nebo příliš velké obrázky
• Client-side rendering — SPA aplikace bez SSR

Jak optimalizovat LCP

1. Zrychlete server — implementujte caching, použijte CDN, zvažte upgrade hostingu
2. Optimalizujte obrázky — WebP/AVIF formát, správné rozměry, lazy loading (ale ne pro LCP element!)
3. Eliminujte render-blocking — kritické CSS inline, asynchronní JS
4. Preloadujte klíčové zdroje — <link rel="preload"> pro LCP obrázek a fonty
5. Zvažte SSR/SSG — místo čistě client-side renderingu

INP: Interaction to Next Paint

INP (Interaction to Next Paint) nahradil metriku FID v březnu 2024. Měří odezvu na všechny interakce uživatele během celé návštěvy — kliknutí, dotyky, stisk kláves. Cílová hodnota je pod 200 ms.

Rozdíl INP vs. FID

FID měřil pouze zpoždění první interakce. INP měří nejhorší interakci za celou návštěvu (přesněji 98. percentil). To dává mnohem přesnější obraz skutečné interaktivity stránky.

Jak optimalizovat INP

1. Rozdělte dlouhé úlohy — JavaScript tasky delší než 50 ms blokují hlavní vlákno
2. Minimalizujte JavaScript — code splitting, tree shaking, odstraňte nepoužívaný kód
3. Použijte requestIdleCallback — pro neurgentní operace
4. Optimalizujte event handlery — debouncing, throttling
5. Zvažte Web Workers — pro náročné výpočty mimo hlavní vlákno

CLS: Cumulative Layout Shift

CLS měří nečekané posuny prvků na stránce — tedy vizuální stabilitu layoutu. Cílová hodnota je pod 0,1. Typický příklad špatného CLS: text se posune dolů, když se nad ním načte reklama, a uživatel klikne na špatný odkaz.

Nejčastější příčiny špatného CLS

• Obrázky bez rozměrů — prohlížeč neví, kolik místa vyhradit
• Dynamicky vkládaný obsah — reklamy, cookie bannery, embedy
• Webfonty — FOUT (flash of unstyled text) při načítání
• Animace — použití top/left místo transform

Jak optimalizovat CLS

1. Vždy uvádějte width a height — u obrázků a videí (nebo aspect-ratio v CSS)
2. Rezervujte prostor pro reklamy — min-height na kontejneru
3. Použijte font-display: swap — s preloadem fontů
4. Animujte přes transform — ne přes vlastnosti měnící layout
5. Vkládejte dynamický obsah pod fold — nebo s plynulou animací

Prahové hodnoty v přehledu

Metrika	Co měří	Dobrá	Vyžaduje zlepšení	Špatná
LCP	Rychlost načtení hlavního obsahu	≤ 2,5 s	2,5–4,0 s	> 4,0 s
INP	Odezva na interakci	≤ 200 ms	200–500 ms	> 500 ms
CLS	Vizuální stabilita	≤ 0,1	0,1–0,25	> 0,25
TTFB	Odezva serveru (doplňková)	≤ 800 ms	800–1 800 ms	> 1 800 ms

Nástroje pro měření

Laboratorní nástroje (simulované prostředí)

• Google Lighthouse — detailní audit v Chrome DevTools
• PageSpeed Insights — kombinuje laboratorní i reálná data
• Chrome DevTools Performance panel — nejpodrobnější analýza

Reálná data (field data)

• CrUX (Chrome User Experience Report) — data od reálných uživatelů Chrome
• Google Search Console — souhrnný přehled Core Web Vitals za celý web
• web-vitals.js — JavaScript knihovna pro sběr dat přímo z vašeho webu

„Vždy preferujte reálná data (field data) před laboratorními. Lighthouse vám ukáže potenciální problémy, ale CrUX data rozhodují o tom, jak Google hodnotí váš web.”

Postup optimalizace Core Web Vitals krok za krokem

1. Změřte aktuální stav — PageSpeed Insights + Google Search Console
2. Identifikujte nejhorší metriku — zaměřte se na tu, která je „špatná” nebo „vyžaduje zlepšení”
3. Analyzujte příčiny — Lighthouse diagnostika, DevTools Performance
4. Implementujte opravy — začněte s nejjednodušším a nejvíce dopadovým řešením
5. Monitorujte výsledky — počkejte ~28 dní na aktualizaci CrUX dat
6. Iterujte — pokračujte s dalšími metrikami

Často kladené otázky

Jak moc Core Web Vitals ovlivňují pozice ve vyhledávání?

Core Web Vitals jsou jedním z mnoha rankingových faktorů. Samotné zlepšení CWV pravděpodobně neposune web z 50. pozice na 1. místo. Ale při srovnatelné relevanci obsahu s konkurencí mohou být rozhodujícím faktorem. Největší dopad mají na mobilní výsledky.

Jak dlouho trvá, než se optimalizace projeví v SEO?

Google používá 28denní klouzavý průměr z reálných dat CrUX. Po provedení optimalizací tedy trvá přibližně měsíc, než se změny plně projeví v datech používaných pro ranking. Laboratorní nástroje jako Lighthouse ukazují výsledky okamžitě.

Musím optimalizovat všechny tři metriky najednou?

Ne. Začněte s nejhorší metrikou — tou, která je v červené zóně. Často má optimalizace jedné metriky pozitivní dopad i na ostatní. Například zrychlení serveru (TTFB) zlepší LCP a může pozitivně ovlivnit i INP.

Liší se hodnocení Core Web Vitals pro mobily a desktop?

Ano. Google hodnotí mobilní a desktopové Core Web Vitals zvlášť. Mobilní verze má obvykle horší výsledky kvůli pomalejšímu připojení a slabšímu hardware. Pro mobilní-first indexaci je prioritou optimalizace mobilní verze.