Základy Core Web Vitals: Metriky, které opravdu důležitou
Pochopte tři klíčové metriky — LCP, FID a CLS. Proč jsou důležité a jak je měřit přímo na vašem webu.
Co jsou Core Web Vitals?
Google zavedl Core Web Vitals proto, aby webaři věděli, jak se jejich weby chují v reálném světě. Není to jen o tom, jak se stránka načítá. Jde o to, jak se vám stránka jeví při používání — když na ni čekáte, když se ji snažíte ovládat, když se na vás všechno kymácí a zlobí.
Tři metriky měří právě tohle. Jsou to konkrétní čísla, která si můžete změřit sami. Nepotřebujete zvláštní software. Přesně vám řeknou, co se na vašem webu děje.
Tři metriky, které změňují hru
Každá metrika měří něco jiného. Když jim všem rozumíte, vidíte celý obrázek.
LCP — Largest Contentful Paint
To je doba, než se vám načte největší viditelný obsah na stránce. Obrázek, text, video. Cokoli, co je největší. Měřit se to začíná od prvního kliknutí — a skončí, když je ta věc vidět.
FID — First Input Delay
FID měří, jak rychle se web na vás slyší, když kliknete. Kliknete na tlačítko a čekáte. Ta čekání je FID. Musí být nízké — ideálně pod 100 milisekund. Jinak se vám web jeví pomalý a neresponsivní.
CLS — Cumulative Layout Shift
Víte, když se stránka najednou posune a vy nechtěně kliknete na něco jiného? To je CLS. Měří, jak moc se vám věci na stránce pohybují. Čím nižší, tím lépe. Měřuje se od 0 do 1.
Jak si je změřit?
Není to těžké. Máte několik možností. Nejjednoduší? Použít PageSpeed Insights. Jste v něm za minutu.
PageSpeed Insights
Vložíte URL svého webu. Google vám řekne všechno. Vidíte metriky, vidíte chyby, vidíte co zlepšit. Dělá se to v prohlížeči, nic instalovat nemusíte.
Web Vitals JavaScript knihovna
Chcete měřit data přímo od svých uživatelů? Přidejte si kód do webu. Pak vidíte, co si uživatelé opravdu zažívají. Není to jen průměr — vidíte i reálné problémy.
Google Search Console
Máte Google Search Console? Tam je to taky. Ukazuje vám Core Web Vitals data ze všech vašich stránek. Vidíte, která stránka je dobrá a která ne.
Jak je zlepšit?
Když vidíte, že vám něco nejde, co pak? Máte konkrétní věci, které dělají rozdíl.
Optimalizujte obrázky
Velké obrázky zpomalují LCP. Komprimujte je. Používejte WebP formát. Změřte si, jak je to lepší — běžně se stránka načítá o 30-50 procent rychleji.
Odstraňte zbytečný JavaScript
JavaScript zpomaluje FID. Když načítáte skript, který není potřeba, čekáte zbytečně. Podívejte se, co máte v kódu. Někdy stačí jeden skript odstranit a máte hned 50 milisekund zpět.
Fixujte layout shifty
CLS je často o tom, že obrázky a prvky nemají předem danou velikost. Nastavte šířku a výšku. Tak se nic nepohybuje. Jednoduché, ale účinné.
„Uživatelé nechtějí čekat. Když stránka trvá více než 3 sekundy, polovina lidí ji opustí. Core Web Vitals vám říkají přesně, proč to tak je.”
— Výzkumy Google, 2024
Praktické tipy, které fungují
Nemusíte dělat všechno hned. Začněte s jednou věcí. Změřte si to. Vidíte výsledek. Pak jdete dál.
1. Lazy loading pro obrázky
Načítejte obrázky jen když je uživatel vidí. To znamená, že se hlavní obsah načítá rychleji. LCP se dramaticky zlepší.
2. Mezipaměť prohlížeče
Řekněte prohlížeči, aby si věci pamatoval. Když se uživatel vrátí, všechno se načítá z jeho počítače. Není pomalé.
3. CSS místo animací
Animace v JavaScriptu jsou pomalé. Animace v CSS jsou rychlé. Pokud máte něco animovat, udělej to v CSS.
4. Velikost obrázků v HTML
Vždycky napište width a height. Prohlížeč pak ví, kolik místa zarezervovat. Layout se neposunuje. CLS je nula.
5. CDN pro obsah
CDN servuje obsah ze serveru blízko uživatele. Když je uživatel v Česku, dostane obsah z české sítě. Je to prostě rychlejší.
6. Kritický CSS
Vložte CSS, které potřebujete hned, přímo do HTML. Zbytek načítejte později. Stránka se jeví hotová rychleji.
Nástroje, které se hodí
Nemusíte koukat do kódu. Máte skvělé online nástroje, které vám řeknou všechno.
Nejjednoduší. Vložíte URL. Google vám řekne skóre a metriky. Taky vidíte konkrétní problémy a tipy na řešení.
Hlubší analýza. Vidíte, jaké prvky jsou nejpomalejší. Můžete si vybrat, z jakého místa měřit — z USA, Evropy nebo Asie.
Nainstalujete si rozšíření do Chrome. Pak vidíte Core Web Vitals metriky přímo v prohlížeči, když procházíte web.
Máte web? Měli byste mít Search Console. Tam vidíte, jak si web vede v Google vyhledávání a jaké jsou vaše Core Web Vitals.
Závěr: Začněte dnes
Core Web Vitals nejsou tajemství. Nejsou něco co byste nezvládli. Jsou to tři čísla, která vám řeknou, jak se vede vašemu webu.
Nemusíte být programátor. Nemusíte koukat do kódu. Stačí si vzít PageSpeed Insights, vložit svou adresu a vidět, co vám Google říká. Pak si vezměte jeden tip z těch, co jsem vám dal, a zkuste to. Změřte si to. Vidíte, že to funguje?
To je všechno. Začněte tím. Pak jdete na další věc. Postupně se vám web stane rychlý. A uživatelé budou spokojení.
Chcete se dozvědět víc?
Máme další články o optimalizaci výkonu. Jak komprimovat obrázky, jak nastavit mezipaměť, jak si udělat web, který je fakt rychlý.
Prozkoumat článkyPoznámka k obsahu
Tento článek je informačního charakteru. Metriky a doporučení jsou založeny na aktuálních standardech Google a osvědčených postupech v oboru. Každý web je jiný — to co funguje pro jeden web, nemusí být optimální pro jiný. Vždy testujte na svém webu a měřte výsledky. Pokud potřebujete pomoc od specialisty, obraťte se na odborníka na výkon webu nebo webového vývojáře.
