Co jsou Core Web Vitals a proč na nich záleží (srozumitelně)

Možná jste to viděli ve zprávě od Googlu nebo od marketéra: „zlepšete Core Web Vitals.“ Zní to technicky, ale ve skutečnosti jde o jednoduchou věc - jak rychle a příjemně se váš web používá. A to ovlivňuje jak pozice v Googlu, tak i to, jestli u vás návštěvník nakoupí, nebo odejde.

Tři čísla, o která jde

Core Web Vitals jsou tři měřitelné ukazatele zážitku z používání webu, které Google bere v úvahu i při SEO hodnocení:

LCP (Largest Contentful Paint) - jak rychle se zobrazí hlavní obsah. Kolik sekund trvá, než návštěvník uvidí to podstatné (například velký obrázek nebo nadpis). Cíl: do 2,5 sekundy.

INP (Interaction to Next Paint) - jak rychle web reaguje na kliknutí. Když uživatel klikne nebo něco napíše, jak rychle se něco stane. Nahradilo starší metriku FID. Cíl: do 200 ms.

CLS (Cumulative Layout Shift) - jak moc obsah „poskakuje“. Znáte to: chcete kliknout na tlačítko a na poslední chvíli se stránka pohne, protože se donačetla reklama. Cíl: pod 0,1.

Proč na tom záleží

1. Google to bere v úvahu. Core Web Vitals jsou součástí hodnocení kvality stránky. Při jinak stejném obsahu má rychlejší web výhodu.

2. Pomalý web ztrácí zákazníky. Každá sekunda navíc při načítání snižuje šanci, že návštěvník zůstane. U e-shopu se to přímo promítá do tržeb.

3. Důvěryhodnost. Rychlý, plynulý web působí profesionálně. Pomalý a poskakující působí lacině - bez ohledu na to, kolik stál.

Proč bývá web pomalý

Nejčastější příčiny, které vidíme v praxi:

• Page-buildery (Elementor, WPBakery) - pohodlné, ale generují spoustu zbytečného kódu.
• Neoptimalizované obrázky - fotka z foťáku má klidně 5 MB; na webu stačí zlomek.
• Příliš mnoho pluginů, které se načítají na každé stránce.
• Pomalý nebo levný hosting.
• Žádné cachování ani moderní formáty obrázků (WebP/AVIF).

Jak změřit Core Web Vitals

Máte několik možností, jak zjistit, jak na tom váš web je:

PageSpeed Insights - nejrychlejší cesta. Zadáte adresu webu a hned vidíte skóre Core Web Vitals. Zelená = v pořádku, oranžová/červená = prostor pro zlepšení. Test udělejte i pro mobil - tam bývá výsledek obvykle horší. PageSpeed také navrhuje konkrétní optimalizace.

Search Console (Google Search Console) - pokud máte web indexovaný, nabízí zprávu „Core Web Vitals“ s reálnými daty od skutečných uživatelů. To jsou field data, nikoli laboratorní testování - lépe odrážejí realitu. Podívejte se na 28denní průměr.

Chrome User Experience Report (CrUX) - anonymizovaná data z milionů skutečných návštěvníků. Rozdělená podle regionu, typu zařízení a typu připojení. Pokud chcete vědět, jak váš web působí na reálné lidi v Evropě, CrUX je ten zdroj.

Rozdíl mezi lab a field daty: PageSpeed test spustí váš web ve standardním prostředí (výkon notebooku, 4G síť). Reální uživatelé mají různá zařízení a rychlosti internetu. Proto jsou field data (Search Console, CrUX) důležitější - vidíte, jak to vypadá v praxi.

Jak zlepšit Core Web Vitals

Pokud PageSpeed Insights nebo Search Console ukáže oranžovou nebo červenou barvu, zde jsou konkrétní kroky ke zlepšení.

Jak zlepšit LCP (rychlost načítání obsahu)

1. Optimalizujte obrázky. Velký obrázek na úvodní stránce je nejčastější příčina pomalého LCP. Zmenšete velikost souboru (JPG/PNG zkomprimujte) nebo použijte moderní formát (WebP/AVIF). Webové obrázky nemusí mít tak vysoké rozlišení jako tisk - 1920x1080 px obvykle postačuje.

2. Zkraťte čas prvního bytu (TTFB). Pokud server dlouho čeká, než zpracuje request, i rychlý obsah přijde pozdě. Zkontrolujte, jestli máte kvalitní hosting (ne levný sdílený). CDN (Content Delivery Network, například QUIC.cloud) zrychluje dodávku obsahu, protože si ho cachuje blízko uživatele.

3. Odložte nepovinné JavaScripty. Těžké skripty, které se načítají hned na začátku, blokují obsah. Pokud daný skript nepotřebujete při vykreslování, odložte ho pomocí atributu defer nebo async.

4. Vyhněte se loading="lazy" na LCP obrázku. LCP obrázek je třeba načíst rychle. Pokud jste ho označili jako lazy, jen se zpomalí.

Jak zlepšit INP (odezva na kliknutí)

1. Snižte množství JavaScriptu. Velký JavaScript znamená delší dobu parsování a kompilace. Webový prohlížeč musí všechen JS přečíst a zkompilovat dříve, než může bezpečně spustit váš kód. Pokud máte hodně pluginů, zkontrolujte, jestli všechny opravdu potřebujete.

2. Rozdělte dlouhé úlohy na menší. Pokud skript dělá hodně práce najednou, celý JavaScript thread se zablokuje a stránka nereaguje na kliknutí. Použijte setTimeout nebo requestAnimationFrame k rozdělení práce do menších kousků.

3. Optimalizujte event handlery. Pokud se něco stane na kliknutí (například výpočet nebo změna DOM), udělejte to co nejrychleji. Vyhněte se zbytečným přepočtům DOM hned po změně CSS.

4. Zkontrolujte, kolik pluginů spouštíte. Pluginy jsou užitečné, ale každý plugin = další JavaScript. Máte plugin na analytics, na popupy, na recenze... každý z nich běží na pozadí a dělá práci. Pokud máte 15+ pluginů, je to problém.

Jak zlepšit CLS (stabilita obsahu)

1. Přidejte obrázkům rozměry. Přiřaďte atributy width a height nebo CSS aspect-ratio ke každému obrázku. Prohlížeč pak předem ví, kolik místa obrázek zabírá, a nevznikají posuny obsahu.

2. Rezervujte místo pro dynamický obsah. Pokud se na stránku vkládá obsah až během načítání (reklamy, videa, widgety), nastavte kontejneru minimální výšku (min-height) nebo aspect-ratio. Obsah se pak načte, aniž by posouval všechno ostatní.

3. Vyhněte se animacím, které posouvají obsah. Animace vlastností jako top, left nebo box-shadow způsobují překreslení a posun. Místo toho použijte transform, který změní polohu bez vlivu na ostatní obsah.

4. Dejte pozor na písma. Pokud se webové písmo načítá pomalu, prohlížeč nejprve zobrazí fallback písmo (System Font), a když se webové písmo načte, všechen text se zvětší nebo zmenší. Nakonfigurujte font-display: optional nebo font-display: swap podle situace.

Core Web Vitals a WordPress

Mnoho WordPress webů se staví s page-buildery (Elementor, WPBakery, Divi). Tyto nástroje jsou pohodlné - všechno se klikne v GUI - ale za cenu kvality: generují spoustu zbytečného JavaScriptu a CSS, což zhoršuje Core Web Vitals. Pokud máte web v Elementoru a vidíte červené skóre, je to často vázané na page-builder, ne na váš obsah.

Nejrychlejší WordPress weby (ty, které dosahují Green v PageSpeed) se staví bez page-builderu - s čistým kódem a vlastní šablonou. To je také to, proč se mnoho starých webů migruje z Elementoru na čistý WordPress - výkon se vrátí i bez dalších optimalizací.

Pokud váš web stavíme od základu, počítáme s Core Web Vitals od začátku. Pokud máte existující web s horšími výsledky, SEO optimalizace zahrnuje analýzu a nápravu problémů s Core Web Vitals.

Co s tím

Část se dá vyřešit rychle (optimalizace obrázků, cache), část vyžaduje zásah do toho, jak je web postavený. My weby stavíme s důrazem na výkon od základu - bez zbytečného balastu page-builderů. A když máte existující pomalý web, v rámci SEO dokážeme najít, co ho brzdí, a opravit to.

Chcete vědět, co brzdí váš web? Napište nám - podíváme se na něj a řekneme konkrétně, co zlepšit.