Core Web Vitals: co to je a jak je optimalizovat

Co jsou Core Web Vitals?

Core Web Vitals jsou metriky vytvořené Googlem ke zlepšení uživatelského zážitku na webech. Místo desítek různých rychlostních metrik se sjednocují do tří klíčových signálů, které mají reálný dopad na to, jak se uživatelům s webem pracuje.

Google to shrnuje takto:

• ›Loading (načítání) — měří se metrikou LCP (Largest Contentful Paint)
• ›Interactivity (interaktivita) — měří se metrikou INP (Interaction to Next Paint) (dříve FID)
• ›Visual Stability (vizuální stabilita) — měří se metrikou CLS (Cumulative Layout Shift)

Každá z těchto metrik má své prahové hodnoty dělené na Good, Needs Improvement a Poor.

LCP — Largest Contentful Paint

LCP měří dobu, za jakou se vykreslí největší viditelný prvek v okně prohlížeče (typicky hero obrázek, banner nebo velký nadpis). Čím rychleji, tím lepší vnímaná rychlost.

Cílové hodnoty:

• ›✅ Good: ≤ 2,5 s
• ›⚠️ Needs Improvement: 2,5 – 4,0 s
• ›❌ Poor: > 4,0 s

Jak zlepšit LCP:

• ›Optimalizujte velikost a formát obrázků (WebP/AVIF, responsive srcset)
• ›Preloadujte kritický LCP element (<link rel="preload">)
• ›Zrychlete Time To First Byte (TTFB) — rychlý hosting, CDN, server-side cache
• ›Eliminujte render-blocking resources (CSS/JS, který blokuje první vykreslení)
• ›Použijte lazy loading pro vše, co není v prvním viewportu

INP — Interaction to Next Paint

INP nahradilo FID v roce 2024 a měří responzivitu stránky napříč celou návštěvou. Bere v potaz nejhorší interakci uživatele (nebo blízko nejhorší) — zachycuje tedy reálný „pocit ze stránky" mnohem lépe než FID, které měřilo jen první interakci.

Cílové hodnoty:

• ›✅ Good: ≤ 200 ms
• ›⚠️ Needs Improvement: 200 – 500 ms
• ›❌ Poor: > 500 ms

Jak zlepšit INP:

• ›Snižte dobu hlavního vlákna — rozsekejte dlouhé JavaScript úlohy
• ›Použijte requestIdleCallback nebo Web Workers pro nekritické skripty
• ›Odstraňte third-party JS, který blokuje main thread (analytics, chatboty, social widgety)
• ›Hydratujte komponenty lazy (např. v Next.js next/dynamic s ssr: false)
• ›Měřte INP nejen v PageSpeed Insights, ale i v reálných uživatelských datech (CrUX, RUM)

CLS — Cumulative Layout Shift

CLS měří, jak moc se obsah na stránce posouvá během načítání. Klasický příklad: obrázek bez width/height se načte a posune text, na který jste chtěli kliknout. Frustrace garantována.

Cílové hodnoty:

• ›✅ Good: ≤ 0,1
• ›⚠️ Needs Improvement: 0,1 – 0,25
• ›❌ Poor: > 0,25

Jak zlepšit CLS:

• ›Vždy nastavujte width a height na obrázcích a videích
• ›Rezervujte místo pro reklamy a embeds předem (CSS skeleton)
• ›Načítejte fonty s font-display: swap + preload kritických variant
• ›Vyhněte se vkládání obsahu nad existující prvky po načtení (typický anti-pattern: cookie banner, který „skočí" odshora)
• ›Použijte CSS aspect-ratio místo intrinsic sizing pro responsive obrázky

Jak Core Web Vitals měřit

Lab data (syntetická měření v laboratorních podmínkách):

• ›PageSpeed Insights — pagespeed.web.dev
• ›Lighthouse — v Chrome DevTools
• ›WebPageTest — pro hlubší analýzu

Field data (reálná data od uživatelů):

• ›Search Console → Core Web Vitals report — pohled na celý web po skupinách URL
• ›Chrome User Experience Report (CrUX) — veřejná Google databáze
• ›Vlastní RUM (Real User Monitoring) — web-vitals.js knihovna od Googlu

💡 Tip: Lab data jsou skvělá pro ladění, ale Google rankuje na základě field dat. Vždy ověřte výsledky na CrUX/GSC, ne jen v Lighthouse.

Mají Core Web Vitals vliv na ranking?

Ano — od května 2021 jsou součástí Page Experience signálu, který ovlivňuje pozice v organickém vyhledávání. Vliv ale není dramatický: lepší LCP samo o sobě vás na první místo nedostane. Spíše působí jako tie-breaker mezi obsahově podobně silnými stránkami.

Co to ale fakt mění:

• ›Lepší konverze (rychlejší stránka = víc dokončených akcí)
• ›Nižší bounce rate
• ›Lepší engagement signály, které Google nepřímo dál používá
• ›Lepší zkušenost na mobilu, který tvoří většinu trafficu

Závěr

Core Web Vitals jsou pevnou součástí moderního SEO. Soustřeďte se na field data ze Search Console, optimalizujte iterativně a měřte dopad na konverze, ne jen na čísla v Lighthouse.

Pokud sledujete více webů najednou, SEOcrawl Web Performance měří Core Web Vitals napříč všemi vašimi projekty s alerty, když se metriky propadnou.