Core Web Vitals: co skutečně hýbe čísly
Core Web Vitals jsou tři terénní měření toho, jak stránka působí: jak dlouho trvá, než se objeví hlavní obsah, jak moc při načítání poskakuje, a jak rychle stránka reaguje na vstup.
Tento průvodce prochází, co každá metrika měří, konkrétní příčiny špatných hodnot, a opravy, které hýbou terénními daty, ne jen laboratorními skóre.
Co tři metriky měří#
Každá má práh pro «dobré» a malou sadu obvyklých příčin. Všimněte si, že číslo, které se počítá pro pozice, jsou terénní data od skutečných návštěvníků, ne skóre z vašeho notebooku.
| Metrika | Dobré | Měří | Obvyklá příčina špatné hodnoty |
|---|---|---|---|
| LCP | Pod 2,5 s | Čas do vykreslení největšího viditelného prvku | Neoptimalizovaný hlavní obrázek, pomalý server, blokující CSS |
| CLS | Pod 0,1 | Jak moc rozvržení při načítání poskakuje | Obrázky bez rozměrů, vkládané bannery, pozdě načtená písma |
| INP | Pod 200 ms | Rychlost reakce na interakci | Dlouhé JavaScriptové úlohy blokující hlavní vlákno |
Laboratorní nástroje měří jedno načtení na jednom stroji. Terénní data jsou 75. percentil skutečných návštěv, včetně starých telefonů na špatných sítích — právě těch návštěvníků, kteří odcházejí nejrychleji.
Oprava LCP#
LCP je téměř vždy obrázek nebo nadpis zablokovaný něčím jiným. Projděte body v pořadí; první dva vyřeší většinu webů.
- Zjistěte, který prvek je v terénních datech skutečně LCP prvkem. Optimalizovat špatný obrázek je nejčastější zbytečná práce.
- Nikdy nenačítejte LCP obrázek odloženě. Dejte mu místo toho fetchpriority="high".
- Servírujte ho v moderním formátu ve velikosti, ve které se zobrazuje, se srcset pro menší obrazovky.
- Předběžně načtěte písmo pro LCP text a použijte font-display: swap.
- Odstraňte blokující CSS a JavaScript z hlavičky; kritické CSS vložte přímo, pokud je stránka dost malá.
- Snižte Time to First Byte pomocí cache a CDN — žádná frontendová práce nevyváží pomalý server.
- Odstraňte skripty třetích stran z kritické cesty. Každý je DNS dotaz, spojení a nepředvídatelný soubor.
Oprava CLS#
Poskakující rozvržení je téměř zcela odstranitelné a opravy jsou levné. Je to zároveň metrika, kterou návštěvníci cítí nejsilněji — je to to, co je nutí kliknout na špatnou věc.
- Nastavte width a height u každého obrázku a videa, aby prohlížeč rezervoval místo.
- Rezervujte místo pro reklamy, vložený obsah a rámy kontejnerem s pevným poměrem stran.
- Nikdy nevkládejte obsah nad stávající po načtení — cookie lišta patří dolů nebo jako překryv.
- Přizpůsobte metriky záložního písma webovému, nebo použijte size-adjust, aby výměna nepřeskládala stránku.
- Vyhněte se animování vlastností rozvržení. Animujte transform a opacity, které nevynucují přepočet.
- Dejte dynamicky načítaným sekcím min-height, aby se nerozbalovaly od nuly.
Oprava INP#
INP nahradil First Input Delay a je obtížnější, protože měří každou interakci během návštěvy, ne jen první. Špatné INP je téměř vždy příliš mnoho JavaScriptu na hlavním vlákně.
| Příčina | Oprava |
|---|---|
| Velký balík zpracovávaný při načtení | Rozdělit kód; načítat jen to, co stránka používá |
| Dlouhé úlohy nad 50 ms | Rozdělit práci a vrátit vlákno |
| Drahé obslužné rutiny událostí | Debounce a přesunout těžkou práci mimo cestu interakce |
| Těžké značky třetích stran | Načítat po interakci, nebo odstranit — ověřte, co každá přináší |
| Velký DOM, nad 10 000 uzlů | Virtualizovat dlouhé seznamy; zjednodušit hluboké vnoření |
| Střídání čtení a zápisů rozvržení | Seskupit čtení a zápisy místo střídání |
Na obsahových webech je nejcennějším zásahem do INP obvykle odstranit JavaScript, ne ho optimalizovat. Ptejte se, co každý skript přináší; správci značek sbírají skripty, na jejichž přidání si nikdo nevzpomíná.
Časté dotazy
Jak moc Core Web Vitals ovlivňují pozice?
Jsou skutečným, ale mírným signálem, který funguje spíš jako rozhodčí při remíze než jako náhrada relevance. Rychlá stránka o špatném tématu neporazí pomalejší, která odpoví na otázku. Silnějším důvodem k opravě je chování: pomalé a poskakující stránky ztrácejí návštěvníky dřív, než pozice vůbec vstoupí do hry.
Proč mám dobré skóre v Lighthouse a špatná terénní data?
Protože Lighthouse simuluje jedno načtení na vašem stroji s vaším připojením, zatímco terénní data jsou 75. percentil skutečných návštěv — včetně tříletých telefonů na přetížených mobilních sítích. Když si ti dva odporují, platí terénní data. Používejte laboratoř k diagnostice, ne k bodování.
Musím opravit všechny tři metriky?
Opravte ty, které selhávají, v pořadí podle toho, co návštěvníci prožívají. CLS bývá nejlevnější na opravu a pro uživatele nejotravnější, takže je to dobrý start. LCP má největší vliv na to, zda lidé počkají. INP váží nejvíc na interaktivních webech a nejmíň u statických článků.
Za jak dlouho se zlepšení projeví?
Terénní data jsou klouzavé okno 28 dní, takže smysluplný pohyb trvá zhruba čtyři týdny poté, co oprava dorazí ke všem návštěvníkům. Nehodnoťte změnu po třech dnech. Laboratorní hodnoty ale zkontrolujte hned, abyste potvrdili, že oprava udělala, co jste čekali.
core web vitalslcpclsinprychlost stránkyvýkon webu
