Core Web Vitals: co znamenají LCP, INP a CLS a jak je opravit

Co jsou Core Web Vitals a proč na nich záleží

Core Web Vitals (česky by se dalo říct „základní ukazatele webu“) jsou sada metrik, kterou Google zavedl, aby rychlost a pohodlí stránky šlo vyjádřit čísly. Nejde o to, jak rychlý je váš server v laboratoři, ale jak stránku zažívají lidé na svých telefonech a počítačích.

Záleží na nich ze dvou důvodů. Prvním jsou zákazníci: když se stránka zubní ordinace v Plzni na mobilu načítá pět sekund a tlačítko „Objednat se“ při načítání uskočí jinam, část lidí odejde dřív, než zavolá. Druhým je Google, který Core Web Vitals používá jako jeden ze signálů hodnocení stránky. Jak velký ten vliv je, rozebíráme níže.

Tři metriky a jejich limity

LCP odpovídá na otázku „kdy návštěvník vidí to podstatné“. U e-shopu je to typicky fotka produktu, u kavárny velký úvodní obrázek s interiérem. INP v březnu 2024 nahradil starší metriku FID. Na rozdíl od ní nesleduje jen první kliknutí, ale reakce během celé návštěvy, a proto odhalí i stránky, které jsou po načtení líné. CLS je bezrozměrné číslo: čím víc a čím větší kusy stránky uskočí, tím je vyšší.

Důležitý detail: Google nehodnotí průměr, ale 75. percentil. Stránka projde, když limit splní aspoň tři čtvrtiny návštěv. Mobily a počítače se hodnotí zvlášť a mobilní výsledky bývají horší, protože telefony mají slabší procesor a pomalejší připojení.

Laboratorní a reálná data: proč se čísla liší

Nejvíc zmatku vzniká z toho, že existují dva druhy měření a každý nástroj ukazuje něco jiného.

• Reálná data (field data) pocházejí z prohlížeče Chrome u skutečných návštěvníků, kteří s tím souhlasili. Google je sbírá v databázi CrUX (Chrome User Experience Report) za posledních 28 dní. Právě tato data rozhodují o hodnocení ve vyhledávání.
• Laboratorní data (lab data) vznikají jedním simulovaným načtením v nástroji Lighthouse se zpomaleným připojením a procesorem. Hodí se na ladění, protože výsledek vidíte hned. Nejsou ale tím, co Google hodnotí.

Laboratorní test navíc INP změřit nemůže, protože nikdo neklikne. Lighthouse místo něj ukazuje TBT (Total Blocking Time), tedy jak dlouho je hlavní vlákno prohlížeče zablokované. Vysoké TBT obvykle znamená i špatné INP.

Proč laboratoř a realita nesouhlasí

Typická situace: e-shop s kávou na Shoptetu má v laboratorním testu skóre 45, ale reálná data jsou zelená. Nebo naopak. Obojí je běžné a má vysvětlitelné příčiny:

• Jiná zařízení. Lighthouse simuluje průměrně slabý telefon. Pokud vaši zákazníci nakupují hlavně z novějších telefonů, realita vychází lépe.
• Cache. Vracející se návštěvník má obrázky a styly uložené v prohlížeči, laboratorní test načítá vše poprvé.
• Cookie lišta a souhlas. Test často vidí stránku bez souhlasu, skuteční lidé po souhlasu spustí měřicí a reklamní skripty, které zhorší INP.
• Vstupní stránky. Reálná data váží stránky podle návštěvnosti. Pomalá stránka, na kterou nikdo nechodí, se do výsledku skoro nepromítne.

Kde data najdete

Co bývá špatně a jak to opravit

Pomalé LCP

• Velký úvodní obrázek. Fotka z fotoaparátu o velikosti několika MB je nejčastější viník. Zmenšete ji na skutečně zobrazovanou šířku a převeďte do WebP nebo AVIF.
• Úvodní obrázek s líným načítáním. Atribut loading="lazy" patří obrázkům níž na stránce. Hlavní obrázek naopak označte fetchpriority="high", aby ho prohlížeč stáhl přednostně.
• Pomalá odpověď serveru. Pokud server odpovídá déle než zhruba půl sekundy, ztrácíte čas ještě před stažením čehokoli. Pomůže cache celých stránek, lepší hosting nebo CDN.
• Blokující CSS, JavaScript a fonty. Prohlížeč nevykreslí obsah, dokud nestáhne soubory v hlavičce. Odložte skripty atributem defer a fonty načítejte s font-display: swap.
• Obsah vykreslovaný až JavaScriptem. Slidery a stránky skládané v prohlížeči ukážou hlavní prvek pozdě. Víc v článku o JavaScriptu a SEO.

Špatné INP

• Skripty třetích stran. Chatovací okno, měřicí kódy, mapy, widgety recenzí a reklamní pixely soupeří o stejné vlákno procesoru. Zjistěte, co opravdu používáte, a zbytek odstraňte.
• Těžké stavitele stránek a šablony. Hodně kódu, který se spouští při každé interakci, se na levnějším telefonu projeví hned.
• Dlouhé úlohy. Kód, který běží déle než 50 ms v kuse, blokuje reakci na klepnutí. Vývojář ho může rozdělit na menší části nebo spustit až po vykreslení odezvy.
• Okamžitá zpětná vazba. Po kliknutí na „Přidat do košíku“ ukažte změnu tlačítka hned a teprve potom posílejte data na server.

Vysoké CLS

• Obrázky a videa bez rozměrů. Doplňte atributy width a height nebo CSS vlastnost aspect-ratio, aby prohlížeč rezervoval místo dopředu.
• Vkládané lišty a bannery. Cookie lišta, upozornění na dopravu zdarma nebo reklama, která odsune obsah dolů. Lištu dejte jako překryvnou vrstvu, ne do toku stránky, nebo jí rezervujte místo.
• Webové fonty. Když se náhradní písmo vymění za vlastní s jinou šířkou, text přeskočí. Pomůže přednačtení fontu a sladění metrik náhradního písma.
• Obsah doplňovaný po načtení, například produkty „mohlo by se vám líbit“ nad hlavním obsahem.

Praktický postup pro obrázky, cache, hosting a pluginy najdete v samostatném návodu, jak zrychlit web, včetně specifik WordPressu a Shoptetu.

Jak moc Core Web Vitals ovlivňují pozice

Realisticky: méně, než by se podle množství článků o nich zdálo. Google je zahrnuje do signálů hodnocení zkušenosti se stránkou, ale opakovaně uvádí, že relevance a kvalita obsahu mají přednost. Pomalá stránka, která přesně odpovídá na dotaz, porazí rychlou stránku, která neodpovídá.

Rozdíl se projeví hlavně tam, kde jsou si konkurenti obsahem podobní. Dva autoservisy v Liberci s podobnými stránkami služeb a recenzemi: tady může rychlejší a stabilnější web pomoct. A nepřímý efekt bývá větší než přímý. Rychlý web má méně lidí, kteří odejdou hned po příchodu, a víc dokončených objednávek a poptávek.

Z toho plyne i rozumná priorita. Pokud máte na webu chybějící titulky, neindexované stránky nebo tenký obsah, řešte nejdřív ty. Pořadí kroků najdete v SEO audit checklistu a v článku jak zlepšit SEO webu. Skóre 100 v PageSpeed Insights není cíl. Cíl je zelená v reálných datech.

Jak ověřit, že oprava zabrala

1. Před úpravou si uložte výsledky z PageSpeed Insights pro několik typických stránek: úvod, kategorii, produkt nebo službu, kontakt.
2. Po nasazení spusťte laboratorní test znovu. Ten ukáže změnu hned, takže víte, že oprava technicky funguje.
3. Ve Search Console otevřete přehled Core Web Vitals, klikněte na konkrétní problém a zvolte ověření opravy. Google pak 28 dní sleduje reálná data.
4. Výsledek reálných dat čekejte zhruba za měsíc, protože CrUX počítá klouzavé okno 28 dní. Pokud se hodnota zlepší jen v laboratoři, problém může být u návštěvníků s pomalejšími telefony.
5. Kontrolujte znovu po každé větší změně: nová šablona, nový plugin nebo nový měřicí kód umí výsledky rychle zhoršit.

Jak se v Search Console orientovat, popisuje návod na Google Search Console. Další bezplatné nástroje, včetně PageSpeed Insights a Screaming Frogu, shrnuje přehled SEO nástrojů zdarma.

Bezplatný sken webu od Zmínky Core Web Vitals neměří. Zkontroluje ale rychlost odpovědi serveru, velikost HTML a mobilní zobrazení, tedy základ, na kterém dobré hodnoty stojí, spolu s dalšími technickými a AI kontrolami.