Web Vitals je iniciativa Googlu, která sjednocuje ukazatele výkonu webu do několika srozumitelných metrik. Cílem je odstínit vývojáře od desítek dílčích čísel a dát jim pár metrik, které nejlépe odpovídají tomu, jak web vnímá běžný člověk.

Jádrem jsou tzv. Core Web Vitals (LCP, INP, CLS), které Google používá i jako jeden ze signálů pro řazení ve vyhledávání.

Core Web Vitals jsou tři nejdůležitější metriky Web Vitals:

- LCP (rychlost načtení hlavního obsahu) - INP (svižnost reakcí na interakci) - CLS (vizuální stabilita)

Aby stránka „prošla“, musí být všechny tři v pásmu „dobré“ u 75 % reálných návštěv. Google je od roku 2021 zahrnuje mezi signály hodnocení stránek ve vyhledávání.

LCP měří, kdy se v prohlížeči objeví největší obsahový prvek ve viditelné části stránky, typicky hlavní obrázek, video nebo velký blok textu. Je to nejlepší přiblížení k okamžiku, kdy uživatel cítí, že „stránka je tu“.

Prahy: do 2,5 s dobré, do 4 s je co zlepšovat, nad 4 s špatné.

Nejčastější příčiny pomalého LCP: pomalý server (vysoké TTFB), velké nekomprimované obrázky, blokující CSS/JS, chybějící přednačtení hlavního obrázku.

INP sleduje odezvu stránky na interakce po celou dobu návštěvy a bere nejhorší (resp. téměř nejhorší) odezvu. Měří dobu od akce uživatele (kliknutí, klepnutí, stisk klávesy) do chvíle, kdy prohlížeč vykreslí odpovídající změnu.

Od března 2024 nahradilo INP dřívější metriku FID a je jedním ze tří Core Web Vitals.

Prahy: do 200 ms dobré, do 500 ms je co zlepšovat, nad 500 ms špatné.

Hlavní viník bývá těžký JavaScript, který blokuje hlavní vlákno.

CLS měří vizuální stabilitu. Počítá, jak moc se prvky na stránce během načítání neočekávaně posunou. Každý, kdo chtěl kliknout na tlačítko a to mu pod prstem uskočilo kvůli doskakující reklamě, zažil vysoké CLS.

Jde o bezrozměrné skóre. Prahy: do 0,1 dobré, do 0,25 je co zlepšovat, nad 0,25 špatné.

Častá řešení: uvádět rozměry (width/height) u obrázků a videí, rezervovat místo pro reklamy a vkládaný obsah, nevkládat obsah nad již vykreslený.

FCP měří dobu do vykreslení prvního kousku obsahu z DOM. Na rozdíl od LCP nejde o hlavní prvek, ale o první náznak, že se něco děje.

Prahy: do 1,8 s dobré, do 3 s je co zlepšovat, nad 3 s špatné.

TTFB měří dobu od odeslání požadavku do přijetí prvního bytu odpovědi. Zahrnuje DNS, navázání spojení a zpracování na serveru. Je základem pro všechno ostatní, pomalé TTFB automaticky zhoršuje i LCP a FCP.

Prahy: do 800 ms dobré, do 1,8 s je co zlepšovat.

Zlepšuje ho rychlejší hosting, cache, CDN a méně práce na serveru při generování stránky.

TBT je laboratorní metrika, která sčítá dobu, po kterou bylo hlavní vlákno zablokované dlouhými úlohami (nad 50 ms) mezi FCP a interaktivitou. Slouží jako dobrý laboratorní odhad budoucího INP, protože v laboratorním testu se se stránkou reálně neinteraguje.

Prahy: do 200 ms dobré, do 600 ms je co zlepšovat.

Speed Index vyjadřuje, jak rychle se obsah viditelné části stránky vizuálně zobrazí. Nižší je lepší. Je to laboratorní metrika z Lighthouse.

Prahy: do 3,4 s dobré, do 5,8 s je co zlepšovat.

Terénní data (field / CrUX) pocházejí od skutečných návštěvníků Chromu za posledních 28 dní. Ukazují, jak web zažívají opravdoví lidé na různých zařízeních a sítích. Web ale musí mít dost provozu, aby data vznikla.

Laboratorní data (lab / Lighthouse) vznikají z jednoho měření v řízeném prostředí (simulovaný mobil, definovaná síť). Jsou dostupná vždy a skvělá na ladění, ale nemusí odpovídat realitě.

Google pro hodnocení SEO používá terénní data. My proto ukazujeme obojí, pokud terénní data existují.

Chrome User Experience Report (CrUX) je datová sada, do níž anonymně přispívají uživatelé Chromu, kteří k tomu dali souhlas. Právě z ní pocházejí terénní Core Web Vitals konkrétních webů.

Menší weby v CrUX nemusí být, pokud nemají dostatečný provoz. Pak jsou k dispozici jen laboratorní data.

Lighthouse je nástroj, který načte stránku v simulovaném prostředí a spočítá laboratorní metriky i celkové skóre výkonu (0–100). Pohání ho i PageSpeed Insights, jehož data používá i tento web.

Skóre výkonu: 90–100 dobré (zelené), 50–89 je co zlepšovat (oranžové), 0–49 špatné (červené).

PageSpeed Insights (PSI) je nástroj Googlu, který pro zadanou adresu vrátí terénní i laboratorní výsledky a doporučení, co zlepšit. WebVitals.cz staví právě na jeho oficiálním API a výsledky přehledně zobrazuje česky.