Core Web Vitals: vliv na SEO a zážitek ze stránky

Co jsou Core Web Vitals a proč na ně záleží

Core Web Vitals jsou soubor měřitelných metrik, které hodnotí uživatelský zážitek stránky v reálném použití. Soustředí se na tři hlavní dimenze: rychlost zobrazení hlavního obsahu, interaktivitu při uživatelské akci a vizuální stabilitu během načítání. Google tyto metriky používá jako jeden z mnoha signálů v hodnocení stránek; nejsou jediným faktorem a musí se posuzovat společně s obsahem, relevantností a dalšími technickými signály.

Tři hlavní metriky: LCP, INP a CLS

LCP — Largest Contentful Paint

LCP měří čas do zobrazení největšího viditelného obsahového prvku v okně prohlížeče (např. hlavní obrázek, hero sekce nebo výrazný nadpis). Cílem je zachytit vnímanou rychlost: uživatelé považují stránku za „načtenou“ tehdy, když hlavní obsah dopřeje vizuálně. LCP je reportováno v poli (field data) z reálných návštěv a také v laboratorních testech (Lighthouse, WebPageTest).

INP — Interaction to Next Paint

INP měří latenci interakcí: jak rychle stránka dokáže zpracovat a vizuálně odpovědět po uživatelské akci. INP nahradil dřívější FID jako vhodnější ukazatel, protože bere v úvahu široké spektrum interakcí a dlouhodobé chování stránky. Pro UX je důležité, aby interakce byly plynulé a bez výrazných zpoždění.

CLS — Cumulative Layout Shift

CLS kvantifikuje nečekané přesuny obsahu (layout shifts) během načítání a interakce. Přesuny způsobují špatný zážitek — uživatelé mohou kliknout na špatné prvky, text se může přesunout apod. CLS se počítá jako kombinace velikosti posuvu a vzdálenosti, kterou se vizuální prvky přesunuly.

Jak se Core Web Vitals měří: pole versus laboratoř

Pochopení rozdílu mezi field (reálná data) a lab (simulované testy) je zásadní pro prioritizaci oprav. Field data ukazují skutečné chování reálných uživatelů v různých sítích, zařízeních a geolokacích. Google sbírá tato data ze souboru uživatelů Chrome (známého jako CrUX neboli Chrome User Experience Report) a používá je v nástrojích jako PageSpeed Insights a v Core Web Vitals reportu v Google Search Console.

Lab data pochází z nástrojů jako Lighthouse nebo WebPageTest, kde můžete opakovaně testovat stránku za kontrolovaných podmínek a sledovat konkrétní příčiny špatného výkonu (např. velké obrázky, dlouhé main-thread úlohy, render-blocking CSS/JS). Používejte oba přístupy: field data pro prioritizaci, lab pro debug a ověření oprav.

Konkrétní kroky pro ověření a diagnostiku

Rychlá kontrola (přehled nástrojů)

Použijte kombinaci nástrojů: PageSpeed Insights (pole + lab), Google Search Console – Core Web Vitals report (přehled skupin stránek a URL), Lighthouse v Chrome DevTools (podrobné audity), WebPageTest pro podrobné časové analýzy a Chrome DevTools Performance/Network panel pro sledování renderování a main-thread aktivit.

Kontrola reálných návštěv (field data)

1) Otevřete Google Search Console → Core Web Vitals. 2) Identifikujte skupiny URL (mobilní vs. desktop). 3) Začněte u stránek s největším organickým provozem. Field data ukáže, kde problém skutečně postihuje uživatele, nikoliv jen v laboratorním scénáři.

Detailní laboratořní audit

Spusťte Lighthouse v Chrome DevTools (Performance) a/nebo WebPageTest. Sledujte rozpis skriptů, čas do prvního bajtu, kritické cesty pro CSS a JS, velikosti obrázků a resource waterfall. Pro zjištění příčin layout shiftů použijte tab Performance a Visualize layout shifts.

Rychlé příkazy a emulace (curl a user-agent)

Abyste ověřili, co server posílá mobilním prohlížečům, stáhněte HTML s mobilním user-agentem: curl -A "Mozilla/5.0 (Linux; Android 11; Pixel 5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/115.0 Mobile" https://example.com/stranka

Pro kontrolu pouze HTTP hlaviček použijte curl -I https://example.com/stranka — to vrátí hlavičky, nikoli tělo odpovědi.

Nejčastější příčiny problémů a jak je opravit

Pomalé načítání hlavního obsahu (LCP)

Příčiny: velké neoptimalizované obrázky, render-blocking CSS/JS, pomalá odezva serveru (TTFB), zbytečné přesměrování. Opravy: optimalizujte a lazy-load nízkopr prioritní obrázky, komprimujte obrázky a používejte moderní formáty, minimalizujte kritickou CSS, zvažte použití rel=preload pro klíčové zdroje a opravte pomalé backend endpointy.

Vysoká latence interakcí (INP)

Příčiny: dlouhé main-thread úlohy, velké knihovny JavaScriptu, blokující inicializace třetích stran. Opravy: rozložte těžké úlohy, lazy-load skripty, omezte počet dlouhých JavaScript operací v kritické cestě, použijte web-workers pro těžké výpočty a auditujte třetí strany (analytika, tagy, reklamy).

Layout shifty (CLS)

Příčiny: obrázky bez rozměrů, dynamicky vkládané reklamy nebo iframy, webfonty způsobující FOUT/FOIT, pozdě přidávané obsahové bloky. Opravy: nastavit atributy width/height nebo CSS aspect-ratio u obrázků a videí (např. <img src="/hero.jpg" width="1200" height="800" />), rezervovat prostor pro reklamy pomocí CSS, přednahrávat klíčové fonty a použít font-display: swap s fallbacky.

Prioritizace oprav: kde začít

1) Zaměřte se na stránky s největším organickým objemem a obchodní hodnotou (produkty, vstupní landing stránky). 2) Použijte field data z Search Console a PageSpeed Insights k nalezení stránek, které reálně postihuje špatný UX. 3) V laboratoři ověřte příčiny a navrhněte konkrétní změny, které lze nasadit postupně — nasazujte a měřte dopad v poli.

Checklist pro kontrolu po nasazení oprav

• Ověřte změny v laboratorních testech (Lighthouse/WebPageTest) pro konkrétní URL.

• Sledujte field data v Google Search Console a PageSpeed Insights, protože reálné dopady se projeví postupně.

• Kontrolujte, že hlavní obsah je stejný nebo rovnocenný mezi desktopem a mobilní verzí — Google používá mobilní verzi jako primární pro indexování; od července 2024 Google prohledává převážně Googlebot Smartphone.

• Sledovat vliv dalších změn (nové skripty, tag management, reklamy), protože třetí strany často způsobují regresi ve výkonu.

Časté chyby a mýty

„Optimalizace pro Core Web Vitals sama o sobě zajistí lepší pozice“

To je zjednodušení. Core Web Vitals jsou jedním z mnoha signálů, které Google používá. Vylepšení UX může snížit míru odchodu a zlepšit konverze, ale bez kvalitního obsahu a relevance pro dotazy to samo o sobě nezaručí výrazný růst organických pozic.

„Lab testy musí přesně odpovídat field datům“

Lab výsledky jsou užitečné pro diagnostiku a opakování testů; field data ale zohledňují rozmanitost sítí a zařízení. Opravdy měříte dopad v poli, proto nasazujte malé testy a sledujte reálné metriky.

Nástroje a zdroje

Doporučené nástroje pro kontrolu a debug: Google Search Console (Core Web Vitals report), PageSpeed Insights (field + lab), Lighthouse (Chrome DevTools), WebPageTest, Chrome DevTools Performance/Network, Web Vitals JavaScript knihovna pro custom metriky a interní monitoring, a CrUX pro exportovaná field data. Pro ověření serverové konfigurace a odezvy použijte curl a logy serveru.

Závěrečné doporučení

Core Web Vitals jsou praktický, měřitelný soubor signálů zaměřených na uživatelský zážitek. Přistupujte k nim jako k součásti širší technické a obsahové strategie: identifikujte nejdůležitější stránky, měřte v poli, opravujte příčiny v laboratoři a ověřujte dopad reálnými daty. Zvlášť pozor: třetí strany a reklamní plochy často způsobí regresi, proto auditorství třetích stran patří mezi pravidelné kontroly.

Často kladené dotazy (FAQ)