Každá sekunda čekání na načtení webu znamená ztrátu návštěvníků. Google navíc rychlost webu zohledňuje při řazení výsledků vyhledávání. Core Web Vitals jsou metriky, které měří uživatelský zážitek z rychlosti – a v tomto návodu vám ukážeme, jak je zlepšit.
Co jsou Core Web Vitals a proč to potřebujete
Core Web Vitals jsou tři klíčové ukazatele, které Google používá k měření rychlosti a plynulosti webu:
- LCP (Largest Contentful Paint) – jak rychle se zobrazí hlavní obsah stránky. Ideálně do 2,5 sekundy.
- INP (Interaction to Next Paint) – jak rychle web reaguje na kliknutí nebo stisk klávesy. Ideálně do 200 milisekund.
- CLS (Cumulative Layout Shift) – jak moc se obsah stránky „posouvá“ během načítání. Čím méně, tím lépe (ideálně pod 0,1).
Pokud tyto metriky nesplňujete, Google váš web může řadit níže ve výsledcích vyhledávání. Navíc pomalý web frustruje návštěvníky – studie ukazují, že 53 % uživatelů opustí stránku, která se načítá déle než 3 sekundy.
Co budete potřebovat
- PageSpeed Insights (pagespeed.web.dev) – bezplatný nástroj od Googlu, který změří rychlost vašeho webu
- GTmetrix (gtmetrix.com) – další bezplatný nástroj s podrobnějšími výsledky
- Google Search Console – zobrazí údaje o Core Web Vitals z reálných návštěv
- Spolupráci s vývojářem – některé optimalizace vyžadují technické zásahy
Postup krok za krokem
1. Změřte aktuální stav
Otevřete PageSpeed Insights, zadejte adresu svého webu a klikněte na „Analyzovat“. Nástroj vám ukáže skóre od 0 do 100 pro mobilní i desktopovou verzi. Zelená (90–100) je výborná, oranžová (50–89) průměrná a červená (0–49) špatná.
2. Optimalizujte obrázky
Obrázky jsou nejčastější příčinou pomalého webu. Ujistěte se, že jsou ve správném formátu (WebP je dnes nejlepší volba), mají přiměřené rozlišení (fotka nemusí mít 5000 pixelů na šířku) a jsou komprimované. Nástroje jako Squoosh (squoosh.app) nebo TinyPNG zmenší obrázky bez viditelné ztráty kvality.
3. Zmenšete kód
CSS a JavaScript soubory mohou obsahovat zbytečné mezery, komentáře a nepoužívaný kód. Jejich zmenšení (minifikace) zrychlí načítání. Požádejte vývojáře, aby nastavil automatickou minifikaci při nasazení webu.
4. Zapněte kešování
Kešování (caching) znamená, že prohlížeč si zapamatuje soubory z vašeho webu, a při další návštěvě je nemusí stahovat znovu. Správné nastavení kešování výrazně zrychlí opakované návštěvy. Toto nastaví vývojář na serveru.
5. Používejte CDN
CDN (Content Delivery Network) je síť serverů po celém světě, která doručuje obsah vašeho webu z nejbližšího serveru k návštěvníkovi. Pro české weby to není kritické, ale pokud máte návštěvníky z celého světa, CDN výrazně pomůže. Oblíbené služby jsou Cloudflare (má bezplatnou verzi) nebo BunnyCDN.
6. Odstraňte blokující zdroje
Některé skripty a styly blokují zobrazení stránky – prohlížeč čeká, než je stáhne a zpracuje, místo aby zobrazil obsah. Vývojář může nastavit asynchronní načítání, aby se hlavní obsah zobrazil co nejdříve.
Nejčastější chyby začátečníků
- Nahrávání obřích fotek z mobilu – fotka z telefonu má často 5–10 MB. Na web stačí 50–200 KB.
- Příliš mnoho pluginů a skriptů – každý skript zpomaluje web. Používejte jen to, co opravdu potřebujete.
- Ignorování mobilní rychlosti – web může být rychlý na počítači s optickým internetem, ale pomalý na mobilu s LTE.
- Neměření po změnách – po každé optimalizaci znovu změřte rychlost a ověřte, že se skutečně zlepšila.
- Zapomínání na hosting – sebelepší optimalizace nepomůže, pokud máte pomalý a přetížený hosting.
Praktické tipy
- Nastavte si v Google Search Console upozornění na problémy s Core Web Vitals.
- Testujte rychlost pravidelně – nový obsah nebo aktualizace mohou web zpomalit.
- Zvažte přechod na kvalitní hosting s SSD disky a dostatkem paměti – je to základní investice.
- Používejte formát WebP pro obrázky – je menší než JPEG při stejné kvalitě.
- Nechte si od vývojáře nastavit lazy loading – obrázky se načtou až ve chvíli, kdy k nim uživatel doscrolluje.
Shrnutí
Rychlost webu přímo ovlivňuje spokojenost návštěvníků i pozice ve vyhledávačích. Core Web Vitals jsou tři metriky, které měří rychlost, odezvu a vizuální stabilitu. Začněte měřením v PageSpeed Insights, optimalizujte obrázky, zmenšete kód, zapněte kešování a pravidelně sledujte výsledky. Investice do rychlosti se vždy vyplatí.