Core Web Vitals

Dokumentované cíle pro „dobrý“ výsledek jsou: LCP nejvýš 2,5 sekundy, INP nejvýš 200 milisekund a CLS nejvýš 0,1. Stránka projde, když všech tří dosáhne na 75. percentilu načtení zvlášť pro mobily a desktopy — čtvrtina návštěv tedy může být nad hranicí.

Ten percentil je to podstatné. Průměr schová všechno: když mobilní data po 4G srazí LCP na 4 s, zatímco z kanceláře na optice je to 0,8 s, průměr vypadá jako 1,5 s a e-shop ty lidi i tak ztratí. Měřte, co zažívají reální lidé, podle třídy zařízení a podle typu stránky — detail produktu, výpis a pokladna se chovají každý jinak.

LCP je skoro vždy obrázek nebo nadpis: hero fotka o 1,6 MB, webfont, který blokuje text, nebo reklamní prvek, který vyhraje závod. Optimalizace hero obrázku a preload LCP prvku vyřeší většinu případů, o 200 kB JavaScriptu méně vyřeší zbytek nepřímo.

INP je o práci na hlavním vlákně: handler kliknutí, který přereneruje tabulku s tisíci řádky, těžká knihovna inicializovaná při načtení, skript třetí strany (chat, consent, analytika) běžící ve chvíli, kdy uživatel ťuká. CLS je o prostoru: obrázky bez `width`/`height`, fonty, které se vymění za jiné metriky, bannery vložené nahoru po dodatečném dotazu na server.

Stránce, která má LCP 1,4 s, dalších 300 ms ladění moc nepřinese; každá další ušetřená sekunda stojí víc, než vydělá. A „100“ není cíl samo o sobě — stránka může splnit všechny tři metriky a přesto být nepříjemná, když je kontaktní formulář tři kliknutí hluboko.

Odlišujte metriku od příčiny. Přepisovat framework kvůli CLS, když viníkem je nesouvisející banner, je čtvrtletí práce pro nic. Opravte LCP prvek, dlouhou úlohu a poskakující element a pak se podívejte, jestli se čísla v terénu posunula.