PageSpeed Insights: jak číst výsledky

Skóre z PageSpeed Insights bere hodně lidí jako známku ve škole. Stovka super, sedmdesát propadák. Tak to ale není. To číslo je orientační a samo o sobě vám zákazníky nepřivede. Důležitější je rozumět tomu, co se za ním skrývá, a podle toho web reálně zrychlit. V tomhle článku projdu, co nástroj měří, co z toho má smysl řešit a jak se k rychlosti postavit, když nejste vývojář a jen chcete, aby web fungoval.

Co PageSpeed Insights vlastně měří

Když do nástroje vložíte adresu, dostanete skóre od nuly do sta, sadu naměřených metrik a dlouhý seznam doporučení. Klíčové je vědět, že to skóre nevychází z jednoho měření, ale ze sady ukazatelů toho, jak rychle a plynule se stránka chová. A že nástroj pracuje se dvěma druhy dat, které se snadno pletou.

Laboratorní data versus terénní data

Laboratorní data (lab data) jsou simulace. Google načte vaši stránku ve standardizovaném prostředí, pokaždé stejném, na předem daném zařízení a připojení. Výhoda je, že měření je opakovatelné a hned po ruce, takže se s ním dobře ladí. Nevýhoda je, že to nejsou vaši skuteční návštěvníci.

Terénní data (field data, Core Web Vitals) jsou naopak naměřená od reálných lidí, kteří váš web v posledních týdnech otevřeli, na jejich zařízeních a jejich připojení. Google je sbírá v rámci datasetu CrUX (Chrome User Experience Report). Pro hodnocení ze strany Googlu se počítají hlavně tahle terénní data, ne laboratorní skóre. Laboratorní část berte jako diagnostiku, terénní část jako verdikt. Pokud je váš web nový nebo má málo návštěv, terénní data se nemusí vůbec zobrazit, protože jich není dost.

Mobil versus desktop

Nástroj testuje zvlášť mobilní a desktopovou verzi a skóre se mezi nimi často hodně liší. Mobilní test záměrně simuluje slabší procesor a pomalejší připojení, protože tak vypadá realita většiny návštěv. Desktop měří v silnějších podmínkách, a proto bývá zelenější. Když si máte vybrat, na co se soustředit, řešte mobil. Tam web otevře většina lidí a tam se rozhoduje, jestli zůstanou.

Core Web Vitals srozumitelně

Core Web Vitals jsou tři metriky, které dohromady popisují, jak rychle a stabilně web působí na člověka. Nemusíte si pamatovat zkratky, stačí pochopit, co každá z nich vystihuje.

LCP (Largest Contentful Paint)

Měří, jak rychle se zobrazí největší prvek na obrazovce, typicky hlavní obrázek nebo velký nadpis. Tohle člověk vnímá jako okamžik, kdy „web už je tu". Za dobrou hodnotu se považuje načtení pod 2,5 sekundy. Pomalé LCP nejčastěji způsobuje velký neoptimalizovaný obrázek nebo pomalá odpověď serveru.

INP (Interaction to Next Paint)

Měří, jak rychle web zareaguje, když na něco kliknete nebo ťuknete. Nahradilo dřívější metriku FID. Za dobré se bere zareagovat zhruba do 200 milisekund. Pomalé INP znamená, že stránka při interakci „seká", protože je prohlížeč zaneprázdněný zpracováním skriptů.

CLS (Cumulative Layout Shift)

Měří, jak moc obsah poskakuje během načítání. Když vám pod prstem uskočí tlačítko, protože se nad ním dogruloval banner nebo doskočil obrázek, to je špatné CLS. Cílem je hodnota pod 0,1. Nejčastěji pomůže, když obrázkům a reklamním plochám předem vyhradíte rozměry.

Proč nehonit slepě skóre 100

Honit zelenou stovku za každou cenu je past. Posledních pár bodů často stojí nepoměrně víc práce než celý zbytek a uživatel ten rozdíl vůbec nepocítí. Skóre je navíc citlivé na drobnosti, takže se po každém měření může lišit, aniž byste cokoli změnili.

Smysl dává sledovat, jestli web spadá do zeleného pásma v terénních datech a jestli se reálně rychle načítá na běžném mobilu. To je to, co Google hodnotí a co rozhoduje, jestli návštěvník zůstane. Skóre 92, které stojí na zdravém základu, je lepší než vydřená stovka, kterou rozbije první přidaný plugin.

Rychlost není soutěž o nejvyšší číslo. Je to o tom, aby návštěvník nečekal a neodešel dřív, než se mu web vůbec ukáže.

Co web nejčastěji zpomaluje

Než začnete cokoli optimalizovat, vyplatí se vědět, kde bývá problém. U drtivé většiny firemních webů a e-shopů se to opakuje pořád dokola:

• Velké neoptimalizované obrázky. Zdaleka největší žrout u většiny webů. Fotka nahraná v plném rozlišení z foťáku váží mnohonásobně víc, než kolik je na webu potřeba. Stačí ji zmenšit na rozumné rozměry a převést do moderního formátu.
• Příliš mnoho skriptů. Každý plugin, chat, mapa, analytika a reklamní kód něco stojí. Často běží i věci, které dávno nikdo nepoužívá, jen je zapomněl vypnout.
• Render-blocking skripty a styly. Některý kód umí zablokovat vykreslení stránky, dokud se celý nenačte. Návštěvník pak chvíli kouká na prázdno, i když je obsah technicky připravený.
• Pomalý hosting. Levný přetížený sdílený hosting umí přidat citelnou prodlevu hned na začátku, ještě než se začne cokoli vykreslovat.
• Chybějící cache. Když server skládá stránku znovu při každé návštěvě a prohlížeč si nic neukládá, zbytečně se opakuje práce, která se mohla udělat jednou.

Konkrétní kroky, jak web zrychlit

Tohle je pořadí, ve kterém to řeším já. Začínám tam, kde je největší zisk za nejmenší práci, a teprve pak jdu do detailů.

• Komprese a moderní formáty obrázků. Obrázky zmenšete na rozměry, ve kterých se reálně zobrazují, a převeďte je do formátu WebP nebo AVIF. Oproti starému JPG a PNG ušetří hodně dat při stejné kvalitě. Tohle je u většiny webů ten největší jednotlivý skok.
• Lazy loading. Obrázky a videa, která jsou až níž na stránce, se nemusí načítat hned. Lazy loading zařídí, že se stáhnou teprve ve chvíli, kdy k nim návštěvník doroluje. Horní část stránky se tím zobrazí rychleji.
• Cache. Nastavte, aby si prohlížeč ukládal soubory, které se nemění, a aby server neskládal stejnou stránku znovu a znovu. Opakovaná návštěva je pak skoro okamžitá.
• Omezení skriptů. Projděte, co všechno web načítá, a vypněte, co nepotřebujete. Zbylé skripty se často dají načítat až po vykreslení obsahu, takže nezdržují to hlavní.
• Kvalitní hosting. Pokud server odpovídá pomalu, žádná optimalizace na stránce to úplně nedožene. Rozumný hosting je základ, na kterém vše ostatní stojí.
• CDN. Síť serverů rozmístěných po světě (content delivery network) doručí soubory návštěvníkovi z místa, které je mu blíž. U webů s návštěvníky z více zemí to znatelně sníží prodlevu.

Tyhle věci řeším standardně už při stavbě webu, aby se rychlost nemusela dohánět dodatečně. Víc o tom, jak k tomu přistupuju, je na stránce weby a e-shopy. Rychlost je přitom jen jeden díl skládačky, druhý velký kus je obsah a struktura stránky, kterou rozebírám v článku o on-page SEO.

Jak změřit, jestli to pomohlo

Optimalizace bez měření je střelba naslepo. Než začnete, poznamenejte si výchozí stav: skóre a hodnoty Core Web Vitals na mobilu i desktopu. Po každé větší změně proměřte znovu a porovnejte. Nesledujte jen samotné skóre, dívejte se hlavně na LCP, INP a CLS, protože ty popisují skutečnou zkušenost.

Počítejte ale s tím, že terénní data se aktualizují postupně, jak Google sbírá nové návštěvy, takže reálný dopad v Core Web Vitals se neprojeví hned. Laboratorní měření vám dá zpětnou vazbu okamžitě, terénní data ji potvrdí s odstupem. Vedle nástroje se vyplatí web prostě otevřít na mobilu a sledovat, jak rychle naskočí a jestli při scrollování a klikání nic neseká. Tahle ruční zkouška vám řekne víc než jakékoli číslo. Téma rychlosti navíc úzce souvisí s celkovým provozem a údržbou webu, kde se rychlost dlouhodobě udržuje, ne jen jednorázově nastaví.

Časté otázky

Musím mít skóre 100?

Nemusíte a většinou to ani nedává smysl honit. Skóre v PageSpeed Insights je orientační. Pro hodnocení od Googlu se počítají hlavně terénní data z reálných návštěvníků, ne laboratorní skóre. Důležité je, aby se web rychle načítal a dobře reagoval, ne aby ukazoval konkrétní číslo.

Proč mám jiné skóre na mobilu a na desktopu?

PageSpeed Insights simuluje mobil na slabším procesoru a pomalejším připojení, zatímco desktop měří v silnějších podmínkách. Mobilní skóre proto bývá výrazně nižší. Řešte hlavně mobil, protože tam web otevře většina lidí.

Co znamenají LCP, INP a CLS?

Jsou to tři metriky Core Web Vitals. LCP měří, jak rychle se zobrazí největší prvek na obrazovce. INP měří, jak rychle web zareaguje na klik. CLS měří, jak moc obsah poskakuje při načítání. Dohromady popisují, jak rychle a stabilně web působí na člověka.

Zrychlí web rychlejší hosting?

Často ano, protože rychlost serverové odpovědi je první článek celého řetězce. Levný přetížený sdílený hosting umí přidat citelnou prodlevu hned na začátku. Sám hosting ale nevyřeší velké obrázky ani přebytek skriptů, ty je potřeba řešit zvlášť.

Pomůže komprese obrázků?

U většiny webů je to ten největší a nejrychlejší zisk. Velké neoptimalizované fotky bývají hlavní žrout. Zmenšení na rozumné rozměry a převod do formátu WebP nebo AVIF dokáže stránku zrychlit nejvíc ze všech zásahů.

Kdy to řešit

Když se web načítá viditelně pomalu, padá v Core Web Vitals nebo vám roste odchodovost. Pokud si nejste jistí, kde je problém, napište mi přes stránku weby a e-shopy. Web proměřím a řeknu vám, co reálně zrychlí, a co je jen kosmetika kvůli skóre. Když potřebujete řešit i logiku za webem, ne jen jeho rychlost, mrkněte na software na míru.