Jak číst PageSpeed Insights: Core Web Vitals srozumitelně vysvětlené
Otestovali jste svůj web v nástroji PageSpeed Insights a vidíte červené číslo, například 45. Co to znamená a jak vážné to je? V tomto článku se dozvíte, jak číst zprávu, co měří tři Core Web Vitals a co můžete sami zlepšit.
Tři měření
| Měření | Co měří | Dobré | Potřebuje zlepšení | Špatné |
|---|---|---|---|---|
| LCP (Largest Contentful Paint) | Jak rychle se zobrazí největší část obsahu, často velký obrázek nahoře | do 2,5 s | 2,5 až 4 s | nad 4 s |
| INP (Interaction to Next Paint) | Jak rychle stránka reaguje, když kliknete, klepnete nebo píšete | do 200 ms | 200 až 500 ms | nad 500 ms |
| CLS (Cumulative Layout Shift) | Kolik se stránka posouvá během načítání (jde o skóre, nikoli o čas) | do 0,1 | 0,1 až 0,25 | nad 0,25 |
Stránka splňuje Core Web Vitals, pokud alespoň 75 procent návštěv dosahuje dobrého výsledku ve všech třech měřeních, zvlášť pro mobilní zařízení a počítač. Nerozhoduje tedy Váš rychlý počítač, ale zkušenost většiny návštěvníků, i na starším telefonu. V březnu 2024 nahradilo měření INP starší měření FID. Pokud se ještě setkáte s FID, jde o zastaralou informaci.
Data z pole a data z laboratoře
PageSpeed Insights zobrazuje dva druhy měření, které často udávají odlišná čísla:
- Data z pole (nahoře): měření u skutečných návštěvníků s prohlížečem Chrome za posledních 28 dní. Tato data určují, zda splňujete Core Web Vitals. Pokud má Vaše stránka málo návštěvníků, uvidíte čísla za celý web, případně žádná data z pole.
- Data z laboratoře (níže): test pomocí nástroje Lighthouse, který stránku jednou načte na simulovaném průměrném telefonu a připojení. Odtud pochází číslo od 0 do 100. Lighthouse nedokáže měřit INP, protože nikdo neklepe.
Data z laboratoře použijte k hledání příčin a k okamžitému ověření, zda zlepšení pomohlo. Začněte na kartě Mobil: tam bývá výsledek obvykle horší a Google se zaměřuje především na mobilní verzi Vašeho webu.
Jak moc to váží u Google?
Google uvádí, že Core Web Vitals se počítají při řazení výsledků. Google však vždy zobrazí nejrelevantnější obsah, i když daná stránka není nejrychlejší. Číslo od 0 do 100 pochází z laboratorního testu a nejde o hodnocení Googlem; to hodnocení vychází z dat z pole. Dosažení dokonalého skóre pouze kvůli Googlu podle samotného Googlu není nejlepším využitím Vašeho času. Zajistěte si pozici v zeleném, nebo alespoň v oranžovém pásmu, především proto, že návštěvníci odcházejí z pomalé nebo posouvající se stránky.
Co zlepšíte přímo na stránce
- Menší obrázky. Fotografie o šířce tisíců pixelů pro pole o šířce 800 pixelů je nejčastější příčinou pomalého LCP. Zmenšete fotografie před nahráním a používejte moderní formát, jako je WebP nebo AVIF.
- Šířka a výška u každého obrázku. Bez
widthaheightprohlížeč neví, kolik místa obrázek potřebuje, a text se při jeho načtení posune. To zvyšuje CLS:<img src="bloemstuk.webp" width="800" height="600" alt="Svatební kytice s bílými růžemi">
- Nejdůležitější obrázek nenačítejte líně.
loading="lazy"je vhodné pro obrázky níže na stránce, ale ne pro obrázek, který je vidět hned po otevření. Jinak prohlížeč čeká právě na obrázek, který určuje Vaše LCP. - Nic nevkládejte dodatečně nad obsah. Lišta s cookies, reklama nebo widget, který posune stránku dolů, způsobí posun celého obsahu. Takovou lištu je lépe umístit přes stránku.
- Méně skriptů od třetích stran. Špatné INP má téměř vždy na svědomí příliš mnoho JavaScriptu: náročná témata, slidery, chatovací okna a sledovací nástroje. Kriticky zhodnoťte každý plugin nebo vložené externí služby.
Co dělá server
Vše začíná první odpovědí serveru, takzvaným Time to First Byte (TTFB). Samo o sobě nejde o Core Web Vital, ale s pomalou první odpovědí je dobré LCP téměř nemožné. Jako orientační hodnotu lze považovat 0,8 sekundy nebo méně za dobré. Příčinou bývá web bez mezipaměti, nedostatečný výpočetní výkon nebo přesměrování. Server by měl textové soubory odesílat také komprimované (komprese pomocí gzip nebo Brotli). Jak upravit stranu serveru, se dočtete v článku Můj web je pomalý nebo využívá příliš mnoho CPU: takto ho zrychlíte a v návodu k DirectAdmin, Můj web je pomalý.
V AI Bouwer a WordPressu
Web vytvořený pomocí AI Bouwer nastavuje šířku a výšku u obrázků, jejichž rozměr je znám, první obrázek na stránce načítá okamžitě a přednostně, zatímco ostatní až ve chvíli, kdy se objeví v zobrazení, a při publikování vytváří menší verzi velkých fotografií. Ve WordPressu nejvíce pomůže plugin pro mezipaměť a zmenšení obrázků. Více se dozvíte v bezplatném kurzu WordPressu, v lekcích Co způsobuje pomalý web a jak to změřit? a Obrázky, PHP a další způsoby, jak zrychlit web.
Další čtení
- web.dev: Web Vitals (anglicky)
- O nástroji PageSpeed Insights (anglicky)
- Google: zkušenost se stránkou a Google Vyhledávání (anglicky)
- Google: zpráva Důležité údaje o webu