Core Web Vitals: kompletní průvodce pro správce webu
Google používá Core Web Vitals jako faktor řazení. Co jsou ale LCP, CLS a INP — a co s nimi v praxi dělat? Tento průvodce vše vysvětluje bez zbytečného žargonu.
Co jsou Core Web Vitals a proč je Google přidal jako faktor řazení?
Core Web Vitals jsou sada specifických metrik, které Google používá k měření kvality uživatelského zážitku na webové stránce — se zaměřením na výkon načítání, vizuální stabilitu a responzivitu. Google je zavedl jako signál pro řazení v roce 2021 prostřednictvím aktualizace „Page Experience".
Logika za tím je přímočará: rychlé, stabilní a responzivní stránky udržují uživatele zapojené. Stránky, které při načítání přeskakují nebo trvají 5 sekund, než se stanou interaktivními, uživatele frustrují a vedou k vysoké míře okamžitých odchodů. Google chce zobrazovat stránky, které poskytují skutečně dobrý zážitek.
Core Web Vitals se měří pomocí reálných uživatelských dat shromážděných prostřednictvím Chrome (Chrome User Experience Report, neboli CrUX). To je důležité: vaše skóre odráží, jak skutečné návštěvníci vaši stránku zažili — ne jen laboratorní test. Pro dostupnost terénních dat potřebujete dostatečnou návštěvnost.
LCP (Largest Contentful Paint) — co to je a jak ho zlepšit
LCP měří, jak dlouho trvá, než se plně vykreslí největší viditelný prvek na stránce. Téměř vždy jde o hlavní obrázek, velký nadpis nebo obrázek na pozadí. Prahová hodnota pro „dobré" skóre je 2,5 sekundy nebo méně.
LCP je Core Web Vital nejpříměji spojený s vnímanou rychlostí načítání — je to okamžik, kdy uživatelé pocítí „stránka se načetla". Nejčastější příčiny špatného LCP:
- Pomalá odezva serveru (TTFB) — pokud server trvá 2 sekundy, než začne odpovídat, LCP nemůže být pod 2,5 sekundy
- Zdroje blokující vykreslení — CSS a JavaScript v
<head>, které musí dokončit načítání, než prohlížeč cokoliv vykreslí - Velké neoptimalizované hlavní obrázky — obrázek 4 MB bude vždy pomalý bez ohledu na ostatní optimalizace
- Lazy-loading LCP prvku — přidání
loading="lazy"k hlavnímu obrázku ho oddaluje; LCP prvek by nikdy neměl být lazy-loadovaný
Nejúčinnější opravou pro většinu webů je předběžné načtení LCP obrázku pomocí <link rel="preload"> a zajistit jeho servírování ve formátu WebP v přiměřené velikosti.
CLS (Cumulative Layout Shift) — co ho způsobuje a jak ho opravit
CLS měří neočekávané vizuální posuny prvků stránky při jejím načítání. Pokud se tlačítko náhle posune o 200 pixelů, protože se nad ním načetla reklama, je to posun rozložení. Kumulativní skóre odráží všechny významné posuny během načítání stránky. Skóre 0,1 nebo méně je „dobré".
Nejčastější příčiny:
- Obrázky bez rozměrů — pokud obrázek nemá atributy
widthaheight, prohlížeč pro něj nevyhradí místo; stránka se přeformátuje, když se obrázek načte - Reklamy a vložené prvky — reklamy načítané se zpožděním posouvají obsah dolů
- Webové fonty způsobující FOUT — text vykreslený v záložním fontu, který pak přeskočí na webfont, způsobuje posuny rozložení
- Dynamicky vkládaný obsah — banery, cookie lišty a chat widgety, které se objevují nad existujícím obsahem
Oprava většiny problémů CLS je jednoduchá: vždy specifikujte rozměry obrázků a médií a zajistěte, aby pro dynamicky vkládaný obsah (reklamy, banery) bylo rezervováno místo.
INP (Interaction to Next Paint) — nejnovější vital
INP nahradil FID (First Input Delay) v březnu 2024. Zatímco FID měřil pouze zpoždění před tím, než prohlížeč začal zpracovávat první interakci uživatele, INP měří plnou dobu odezvy — od kliknutí nebo dotyku uživatele po vizuální odezvu. Prahová hodnota pro „dobré" skóre je 200 ms.
Problémy s INP jsou nejčastější na stránkách s intenzivním JavaScriptem, kde je hlavní vlákno zaneprázdněno jinou prací, když uživatel interaguje. Mezi běžné příčiny patří složité obslužné rutiny událostí, velké aktualizace vykreslování spuštěné interakcemi a těžké skripty třetích stran spuštěné na hlavním vláknu.
Jak sledovat Core Web Vitals v čase
Jednorázová měření neposkytují úplný obraz. Je třeba sledovat trendy — zejména po nasazeních, aktualizacích doplňků nebo změnách obsahu. Nástroje pro sledování:
- Google Search Console — zobrazuje terénní data (reálná uživatelská data CrUX) agregovaná podle skupin stránek, aktualizovaná týdně
- PageSpeed Insights — zobrazuje jak laboratorní data (Lighthouse), tak terénní data pro konkrétní URL
- Sitekeeper — spouští Lighthouse denně a zobrazuje trendy skóre v čase s upozorněními na změny
Terénní data mají prodlevu (CrUX data Googlu jsou 28denní klouzavý průměr). Laboratorní data z Lighthouse jsou okamžitá. Obojí je důležité: laboratorní data ukazují, co je teoreticky možné; terénní data ukazují, co skuteční uživatelé zažívají.
Sledujte Core Web Vitals denně se Sitekeeprem
Sitekeeper spouští Lighthouse kontroly denně a graficky zobrazuje skóre Performance v čase. Vidíte trendy, zachycujete regrese a potvrzujete, že vaše optimalizace fungují. 30denní zkušební verze zdarma.
Začít zdarma →Časté dotazy
Jsou Core Web Vitals totéž jako PageSpeed skóre?
Ne, ale úzce spolu souvisí. Core Web Vitals (LCP, CLS, INP) jsou specifické metriky, které přispívají ke skóre Lighthouse Performance. Skóre Performance zahrnuje také další metriky jako FCP a Speed Index. Všechny tři Core Web Vitals jsou důležitými signály pro řazení v Googlu.
Ovlivňují Core Web Vitals moje pozice, pokud nemám velkou návštěvnost?
Google používá terénní data CrUX pro řazení na základě Core Web Vitals. Pokud váš web nemá dostatek CrUX dat, Google se uchýlí k laboratorním datům. Zlepšení výkonu se vyplatí tak jako tak — i kdyby byl přímý dopad na řazení omezený, rychlejší stránky vždy lépe konvertují.
Co nahradilo FID v Core Web Vitals?
INP (Interaction to Next Paint) nahradil FID (First Input Delay) v březnu 2024. INP je komplexnějším měřítkem responzivity — měří plnou latenci odezvy pro všechny interakce uživatele během návštěvy stránky, nejen pro první z nich.
Moje skóre Lighthouse je dobré, ale Search Console ukazuje špatné Core Web Vitals — proč?
Lighthouse testuje v kontrolovaném prostředí se simulovaným zařízením. Search Console zobrazuje terénní data od skutečných uživatelů Chrome, kteří mohou mít pomalejší zařízení, pomalejší připojení nebo interagovat jinak. Obojí je užitečné, ale terénní data odrážejí skutečný uživatelský zážitek.
Jak nejrychleji zlepšit CLS?
Přidejte explicitní atributy width a height ke všem obrázkům a video prvkům. To umožňuje prohlížeči rezervovat místo před načtením médií, čímž se zamezí posunům rozložení způsobujícím CLS. Jde o jednořádkovou změnu u každého obrázku a často dramaticky zlepší skóre.