Jak splnit Core Web Vitals metriky: Kompletní návod pro začátečníky

Core Web Vitals jsou sada metrik od Googlu, které měří reálný uživatelský zážitek na vašem webu – jak rychle se stránka načte, jak rychle reaguje na kliknutí a jak stabilní je vizuálně. Od roku 2021 jsou tyto metriky oficiálním faktorem hodnocení ve vyhledávání. Pokud je nesplňujete, přicházíte o pozice.

Co jsou Core Web Vitals a proč je potřebujete

Core Web Vitals jsou tři konkrétní metriky, které Google považuje za klíčové pro uživatelský zážitek:

• LCP (Largest Contentful Paint) – měří, jak rychle se zobrazí největší viditelný prvek na stránce (obvykle hlavní obrázek nebo blok textu). Cíl: pod 2,5 sekundy.
• INP (Interaction to Next Paint) – měří odezvu stránky na interakci uživatele (kliknutí, stisk klávesy). Nahradil starší metriku FID. Cíl: pod 200 milisekund.
• CLS (Cumulative Layout Shift) – měří vizuální stabilitu stránky, tedy jak moc se prvky posouvají během načítání. Cíl: pod 0,1.

Tyto metriky nejsou jen technická hříčka. Stránky, které je splňují, mají prokazatelně nižší míru okamžitého opuštění a vyšší konverze. Google je používá jako ranking signal (faktor hodnocení), takže přímo ovlivňují vaše pozice ve výsledcích.

Co budete potřebovat

• PageSpeed Insights – bezplatný nástroj od Googlu na pagespeed.web.dev, který změří Core Web Vitals a navrhne konkrétní opravy.
• Google Search Console – sekce „Základní webové ukazatele" zobrazuje stav Core Web Vitals pro celý web na základě dat reálných uživatelů.
• Chrome DevTools – vývojářské nástroje v prohlížeči Chrome (klávesa F12), záložka Lighthouse.
• Přístup k hostingu a kódu webu – optimalizace často vyžaduje zásahy do kódu, serveru nebo nastavení hostingu.
• Screaming Frog – pro hromadné měření rychlosti stránek.

Postup krok za krokem

1. Změřte aktuální stav

Otevřete PageSpeed Insights a zadejte URL adresu vaší hlavní stránky. Nástroj zobrazí skóre od 0 do 100 pro mobil i desktop a hodnoty všech tří Core Web Vitals metrik. Zelená znamená „dobrý" (pass), oranžová „potřebuje zlepšení" a červená „špatný" (fail).

V Google Search Console přejděte do sekce „Základní webové ukazatele" pro přehled celého webu. Zde uvidíte data z reálného provozu (tzv. field data), která jsou pro Google rozhodující.

2. Optimalizujte LCP (rychlost načtení)

LCP je nejčastější problém. Hlavní příčiny pomalého LCP a jejich řešení:

• Velké obrázky – komprimujte obrázky, používejte formát WebP a nastavte správné rozměry. Hlavní obrázek „above the fold" (viditelný bez scrollování) načítejte prioritně pomocí atributu fetchpriority="high".
• Pomalý server – čas odezvy serveru (TTFB) by měl být pod 800 ms. Zvažte kvalitnější hosting nebo CDN (content delivery network – síť serverů pro rychlejší doručení obsahu).
• Blokující JavaScript a CSS – odložte načítání nekritických skriptů pomocí atributu defer nebo async. Kritické CSS vložte přímo do HTML (inline).
• Webové fonty – fonty mohou blokovat zobrazení textu. Použijte font-display: swap v CSS a předem načtěte fonty pomocí <link rel="preload">.

3. Optimalizujte INP (odezva na interakci)

INP měří, jak rychle stránka reaguje na kliknutí nebo stisk klávesy. Problémy s INP obvykle způsobuje:

• Těžký JavaScript – velké JS soubory blokují hlavní vlákno prohlížeče. Rozdělte kód na menší části a načítejte je postupně (code splitting).
• Složité event handlery – funkce spouštěné po kliknutí by měly být rychlé. Přesuňte náročné operace do Web Workerů.
• Příliš mnoho třetích stran – analytické skripty, chatboty, reklamní kódy – každý přidaný skript zpomaluje odezvu. Vyhodnoťte, které opravdu potřebujete.

4. Optimalizujte CLS (vizuální stabilita)

CLS měří, jak moc se stránka „hýbe" během načítání. Nejčastější příčiny:

• Obrázky bez rozměrů – vždy nastavte atributy width a height u obrázků a videí. Prohlížeč tak rezervuje místo ještě před načtením.
• Dynamicky vkládaný obsah – bannery, cookie lišty a notifikace, které odsunují obsah dolů. Rezervujte pro ně místo předem.
• Webové fonty způsobující FOUT (Flash of Unstyled Text) – než se načte font, zobrazí se systémový, který má jiné rozměry. Použijte font-display: optional nebo předem načtěte fonty.
• Reklamy bez pevných rozměrů – reklamní bloky by měly mít vždy definovanou minimální výšku.

5. Implementujte pokročilé optimalizace

Pro další zlepšení zvažte:

• Lazy loading (líné načítání) – obrázky mimo viditelnou oblast načítejte až při scrollování. Ale pozor, hlavní obrázek (LCP element) nikdy nedávejte do lazy loadingu.
• Preconnect a prefetch – řekněte prohlížeči předem, ke kterým serverům se bude připojovat (<link rel="preconnect">).
• Kešování (caching) – nastavte správné hlavičky pro ukládání statických souborů do mezipaměti prohlížeče.

6. Průběžně měřte a sledujte

Po optimalizacích počkejte 28 dní, než se data v Google Search Console aktualizují (používá 28denní klouzavý průměr). Pravidelně kontrolujte PageSpeed Insights po každé větší změně na webu.

Nejčastější chyby začátečníků

• Optimalizace jen pro desktop – Google hodnotí primárně mobilní verzi. Vždy optimalizujte nejprve pro mobil.
• Ignorování field dat – laboratorní měření (Lighthouse) je užitečné pro diagnostiku, ale Google používá field data od reálných uživatelů. Zaměřte se na data v Search Console.
• Lazy loading hlavního obrázku – to paradoxně zhoršuje LCP, protože prohlížeč s načítáním čeká.
• Přidávání příliš mnoha skriptů – každý další analytický nebo marketingový nástroj zhoršuje výkon. Pravidelně revidujte, co opravdu potřebujete.

Praktické tipy

• Nastavte si monitoring Core Web Vitals – můžete použít bezplatný nástroj web-vitals od Googlu pro měření přímo na produkčním webu.
• Zvažte použití CDN (např. Cloudflare nabízí bezplatný plán) – výrazně zrychlí načítání pro české i zahraniční návštěvníky.
• Pro WordPress existují pluginy jako WP Rocket nebo Autoptimize, které automatizují mnoho optimalizací.
• Pokud váš hosting má pomalý TTFB, žádná optimalizace na straně kódu to nedohoní. Kvalitní český hosting je základ.

Shrnutí

Core Web Vitals – LCP, INP a CLS – jsou klíčové metriky pro pozice ve vyhledávačích i pro uživatelský zážitek. Změřte si aktuální stav v PageSpeed Insights a Google Search Console. Optimalizujte obrázky a server pro lepší LCP, redukujte JavaScript pro lepší INP a definujte rozměry všech prvků pro lepší CLS. Zaměřte se primárně na mobilní verzi a sledujte field data od reálných uživatelů. Pravidelné měření a postupné vylepšování vám zajistí, že váš web bude splňovat požadavky Googlu a nabízet skvělý zážitek návštěvníkům.