Rychlost webu a Core Web Vitals: co měřit a co opravit
Rychlost webu není jen doba, za kterou zmizí načítací kolečko. Návštěvník vnímá, kdy uvidí hlavní obsah, jak rychle stránka reaguje a zda mu pod prstem neuhne tlačítko. Core Web Vitals tyto tři části zkušenosti popisují pomocí metrik LCP, INP a CLS. Jsou užitečným vodítkem, nikoli známkou celkové kvality podnikání ani zárukou pozic ve vyhledávání. Vizuálně bohatý web nemusí být pomalý; potřebuje ale promyšlené pořadí načítání a měření na skutečných zařízeních.
Tři metriky a jejich doporučené hranice
LCP měří, kdy se zobrazí největší obsahový prvek ve viditelné části stránky, často hlavní fotografie nebo text. Dobrá hodnota je nejvýše 2,5 sekundy. INP sleduje odezvu na interakce, například kliknutí či práci s formulářem; doporučená dobrá hodnota je nejvýše 200 milisekund. CLS vyjadřuje nečekané posuny rozložení a dobrá hodnota je nejvýše 0,1.
Pro posouzení skutečné zkušenosti se používá 75. percentil návštěv, zvlášť pro mobil a počítač. Neznamená to, že každý návštěvník dostane stejný výsledek. Hranice pocházejí z dokumentace web.dev a nejsou naměřenými výsledky tohoto webu. Když dodavatel uvádí konkrétní čísla, měl by doložit stránku, podmínky a zdroj měření.
Laboratoř a skutečné návštěvy odpovídají jinak
PageSpeed Insights může ukazovat reálná data z Chrome UX Report i laboratorní test Lighthouse. Laboratorní test simuluje konkrétní podmínky a pomáhá hledat příčinu problému. Reálná data shrnují zkušenosti návštěvníků v časovém okně; u malého nebo nového webu mohou chybět. Jejich nepřítomnost sama o sobě neznamená rychlý ani pomalý web.
Výsledek může být za celou doménu, pokud nejsou dostupná data konkrétní adresy. Vždy ověřte, kterou úroveň nástroj ukazuje. Laboratorní skóre se může mezi běhy lišit a není totožné s vyhodnocením Core Web Vitals. INP vyžaduje interakce: samotné načtení stránky v běžném testu Lighthouse jej plně neověří.
Nejdřív řešte hlavní obrázek
Velká úvodní fotografie často ovlivňuje LCP. Připravte varianty odpovídající velikosti displeje a použijte vhodný formát a kompresi. Není potřeba posílat telefonu soubor určený pro široký monitor. Hlavní viditelný obrázek by měl být objevitelný v HTML a neměl by čekat na zbytečnou interakci či dlouhý řetězec skriptů.
Obrázky níže na stránce lze načítat odloženě, ale hlavní úvodní fotografii zpravidla ne. Vždy určete rozměry nebo poměr stran, aby pro ni prohlížeč držel místo. Úprava velikosti souboru není důvod změnit schválenou fotografii: správně připravené varianty mohou zachovat její kompozici i vizuální charakter.
Reakce webu závisí i na skriptech
Pomalu reagující menu nebo formulář může souviset s dlouhou prací JavaScriptu na hlavním vlákně. Prověřte, které skripty jsou opravdu nutné při prvním otevření. Chat, mapu, video nebo složité náhledy lze často spustit až ve chvíli, kdy se přiblíží k obrazovce nebo je uživatel chce použít.
Při testu neklikejte pouze na úvod. Otevřete menu, přepněte galerii, vyplňte formulář a zkuste odeslání. Právě tyto situace ukážou, zda stránka reaguje plynule. Problém řešte podle měření, ne automatickým odstraněním všech animací. Respektování preference omezeného pohybu patří k pohodlí návštěvníků i u vizuálně výrazného webu.
Posuny obsahu často mají jednoduchou příčinu
CLS mohou zhoršit obrázky bez rozměrů, pozdě vložené bannery nebo změna velikosti textu po načtení písma. Rezervujte prostor pro média a obsah, který dorazí později. Důležitá písma načítejte rozumně a porovnejte rozložení před jejich načtením i po něm. Více přednačtených souborů nemusí znamenat rychlejší výsledek.
Modelový příklad: pod hlavním textem je tlačítko kontaktu a nad ním se dodatečně objeví velký panel. Návštěvník může kliknout na jiné místo, než zamýšlel. Oprava spočívá v uspořádání a rezervaci prostoru, nikoli v zakázání klikání. Ověřujte i chybové hlášky formuláře a načítací stavy, protože se používají během skutečné návštěvy.
Praktický kontrolní postup bez honby za stovkou
Vyberte reprezentativní stránky: úvod, detail služby a kontakt. Změřte je opakovaně na mobilním profilu, rozlišujte reálná a laboratorní data a zaznamenejte datum. Najděte největší konkrétní překážku, upravte ji a zopakujte stejný test. Jedna dobře doložená oprava má větší hodnotu než seznam obecných optimalizací.
Nakonec projděte funkce a vzhled na telefonu i počítači. Zrychlení, které rozbije formulář nebo odstraní podstatné informace, není úspěch. Dobré Core Web Vitals jsou součástí kvalitní zkušenosti, ale Google výslovně upozorňuje, že samy nezaručují dobré umístění. Měřte proto výkon spolu s použitelností a skutečným účelem webu.