Rychlost webu a metriky Core Web Vitals v praxi

Rychlost webu se dnes nejčastěji hodnotí třemi metrikami Core Web Vitals: LCP měří, jak brzy se zobrazí hlavní obsah, INP, jak pohotově stránka reaguje na kliknutí či psaní, a CLS, zda prvky během načítání neposkakují. Za dobrý výsledek považuje Google hodnotu LCP do 2,5 sekundy, INP do 200 milisekund a CLS do 0,1. Rozhodující přitom nejsou čísla z jednorázového testu, ale data od skutečných návštěvníků.

Tři metriky, tři různé potíže

LCP, celým názvem Largest Contentful Paint, zaznamenává okamžik, kdy se vykreslí největší viditelný prvek v horní části stránky. Většinou jde o úvodní fotografii, velký nadpis nebo blok textu. Metrika tak odpovídá na otázku, kdy má návštěvník dojem, že se stránka načetla.

INP, Interaction to Next Paint, sleduje odezvu. Měří dobu od kliknutí, klepnutí nebo stisku klávesy do chvíle, kdy prohlížeč vykreslí viditelnou změnu, a to po celou dobu návštěvy. V březnu 2024 nahradila starší metriku FID, která hodnotila jen zpoždění u úplně první akce na stránce a pomalé reakce později nezachytila.

CLS, Cumulative Layout Shift, je bezrozměrné číslo, které vyjadřuje, jak moc se obsah při načítání nečekaně posouvá. Každý zná situaci, kdy chce klepnout na odkaz a v tu chvíli jej dolů odsune dodatečně načtený banner. Myslím, že právě CLS si provozovatelé všímají nejméně, protože na rychlém počítači s uloženými soubory v mezipaměti se posuny skoro neprojeví.

Laboratorní měření a data z provozu

Laboratorní data vznikají jedním zkušebním načtením stránky v přesně daných podmínkách: simulovaný telefon střední třídy, zpomalené připojení, prázdná mezipaměť. Jsou opakovatelná a hodí se k ladění, protože hned ukážou, zda úprava pomohla. Neříkají však, co zažívají skuteční lidé.

Data z provozu sbírá prohlížeč Chrome od uživatelů, kteří se sdílením statistik souhlasili, a Google je zveřejňuje v sadě Chrome UX Report. Pokrývají vždy posledních dvacet osm dní, takže se oprava v nich projeví až s odstupem několika týdnů. Stránka se pokládá za vyhovující, když prahovou hodnotu splní alespoň tři čtvrtiny návštěv; hodnotí se tedy sedmdesátý pátý percentil, nikoli průměr. Weby s malou návštěvností v sadě chybějí, protože pro ně není dost záznamů.

Obě měření se běžně rozcházejí a není to chyba. Laboratorní test nikam nekliká, proto INP vůbec neumí změřit a nahrazuje jej příbuzným ukazatelem celkové doby blokování. Skuteční návštěvníci zase mívají část souborů uloženou z dřívějška, nebo naopak slabší telefon, než jaký test simuluje.

PageSpeed Insights a Lighthouse: který nástroj na co

PageSpeed Insights je webová služba, do které se zadá adresa stránky. Nahoře zobrazí data z provozu, pokud pro stránku nebo celý web existují, a pod nimi laboratorní rozbor. Ten zajišťuje Lighthouse, otevřený nástroj, který je zároveň vestavěný v prohlížeči Chrome mezi vývojářskými nástroji. Lighthouse vrací skóre výkonu od nuly do sta a seznam konkrétních doporučení.

Doporučil bych nedělat ze skóre cíl. Je to vážený souhrn laboratorních metrik, mezi dvěma měřeními téže stránky kolísá o několik bodů a do hodnocení Core Web Vitals nevstupuje. Užitečnější je horní část s daty z provozu a rozbalovací seznam příležitostí, kde nástroj uvádí, který soubor nebo prvek stránku zdržuje. Přehled za celý web, rozdělený na vyhovující a nevyhovující adresy, nabízí také Google Search Console.

Nejčastější příčiny pomalé stránky

Velké obrázky jsou první podezřelý u špatného LCP. Fotografie nahraná v rozlišení z fotoaparátu, kterou prohlížeč zmenšuje na šířku telefonu, znamená zbytečně přenesené megabajty. Pomáhá uložit obrázek v rozměrech, v jakých se opravdu zobrazí, použít úsporný formát WebP nebo AVIF a odložené načítání nastavit jen u snímků mimo první obrazovku. Hlavní obrázek naopak odkládat nesmíte, jinak se LCP zhorší.

Blokující skripty a styly zdržují vykreslení a zhoršují i odezvu. Prohlížeč musí soubory uvedené v hlavičce stránky stáhnout a zpracovat dřív, než cokoli zobrazí. Každý měřicí kód, okno chatu či vložené video přidává práci. Zkusil bych nejdřív projít seznam skriptů třetích stran a vyřadit ty, které už nikdo nepoužívá; bývá to nejlevnější zrychlení ze všech, protože nevyžaduje žádné programování.

Chybějící rozměry prvků stojí za většinou potíží s CLS. Pokud obrázek, reklamní plocha nebo vložený rám nemají v kódu uvedenou šířku a výšku, prohlížeč pro ně nevyhradí místo a po načtení odsune vše pod nimi. Stejně působí písmo, které se načte se zpožděním a má jinou šířku znaků než náhradní.

Postup oprav od šablony k jednotlivým stránkám

Začněte tím, že v PageSpeed Insights změříte tři adresy: úvodní stránku, typický článek nebo produkt a stránku s formulářem. Problémy se zpravidla opakují v rámci šablony, takže jedna oprava pomůže stovkám adres najednou. Opravujte vždy jednu věc, ověřte ji laboratorním testem a zapište datum, abyste za měsíc poznali, co se v datech z provozu projevilo.

Pomalá odpověď serveru je samostatná kapitola, která souvisí s tím, kde web běží; vztahy mezi službami popisuje článek doména, hosting a DNS. Zda zrychlení změnilo i chování návštěvníků, ukáže míra zapojení a konverzní poměr, jejichž význam vysvětluje přehled webová analytika.

Zdroje

• Google – web.dev: Web Vitals (definice a prahové hodnoty metrik LCP, INP a CLS)
• Google – Chrome for Developers: dokumentace Chrome UX Report (CrUX)
• Google – Chrome for Developers: dokumentace nástroje Lighthouse a služby PageSpeed Insights
• W3C – Web Performance Working Group: specifikace Largest Contentful Paint, Layout Instability a Event Timing