Pomalý web stráca zákazníkov skôr, než si prečítajú prvú vetu. Google preto meria skúsenosť návštevníkov tromi metrikami, ktoré nazýva Core Web Vitals. Vysvetlíme si, čo znamenajú, aké hodnoty sú dobré, ako ich zmerať a čo weby najčastejšie brzdí.
Prečo na rýchlosti záleží
Rýchlosť nie je technická kozmetika. Štúdia Milliseconds Make Millions, ktorú pre Google vypracovali spoločnosti 55 a Deloitte, sledovala na konci roka 2019 mobilné weby 37 európskych a amerických značiek. Zrýchlenie mobilného webu o 0,1 sekundy v nej súviselo s nárastom konverzií o 8,4 % pri maloobchodných weboch. Platilo to vtedy, keď sa zrýchlila celá cesta zákazníka, nie iba úvodná stránka.
Rýchlosť ovplyvňuje aj vyhľadávanie. Google v dokumentácii pre weby dôrazne odporúča dosiahnuť dobré hodnoty Core Web Vitals pre úspech vo Vyhľadávaní a uvádza, že zodpovedajú tomu, čo jeho hlavné systémy hodnotenia chcú odmeňovať. Rýchlosť však nenahradí dobrý obsah.
Tri metriky: LCP, INP a CLS
Každá metrika meria inú časť skúsenosti. Hodnoty sa podľa web.dev hodnotia na 75. percentile návštev, zvlášť pre mobil a počítač. Dobrý výsledok teda musí mať aj väčšina pomalších návštev, nie iba tá vaša na rýchlom Wi-Fi.
- LCP (Largest Contentful Paint) meria, kedy sa zobrazí najväčší prvok v úvodnej časti stránky, napríklad hlavná fotka alebo nadpis. Dobrá hodnota je do 2,5 s, nad 4 s je zlá.
- INP (Interaction to Next Paint) meria, ako rýchlo stránka zareaguje na kliknutie, ťuknutie alebo písanie. Dobrá hodnota je do 200 ms, nad 500 ms je zlá. INP nahradil staršiu metriku FID 12. marca 2024.
- CLS (Cumulative Layout Shift) meria, ako veľmi sa obsah počas načítania posúva. Poznáte to, keď chcete kliknúť na tlačidlo a pod prstom sa zrazu objaví banner. Dobrá hodnota je do 0,1, nad 0,25 je zlá.
Ako rýchlosť zmerať
Na začiatok stačia dva bezplatné nástroje od Google.
PageSpeed Insights ukazuje dva druhy údajov. Laboratórne dáta vznikajú simuláciou v nástroji Lighthouse a pomáhajú nájsť konkrétne problémy. Terénne dáta pochádzajú zo správy Chrome User Experience Report, teda od skutočných návštevníkov za posledných 28 dní. Test Core Web Vitals stránka splní, ak sú na 75. percentile všetky tri metriky v pásme dobré.
Search Console má prehľad Core Web Vitals, ktorý zoskupuje podobné stránky webu a ukazuje ich stav zvlášť pre mobil a počítač. Skupina dostane hodnotenie podľa svojej najslabšej metriky, takže hneď vidíte, či máte problém s načítaním, odozvou alebo posúvaním.
Odporúčame začať terénnymi dátami. Ak ich váš web nemá k dispozícii, napríklad pre nižšiu návštevnosť, pracujte s laboratórnymi hodnotami a merajte vždy mobilnú verziu.
Čo najčastejšie spomaľuje weby
- Veľké obrázky. Fotky nahrané bez úpravy priamo z fotoaparátu alebo mobilu môžu mať aj niekoľko megabajtov. Moderné formáty ako WebP a AVIF podľa web.dev ponúkajú výrazne menšie súbory než JPEG. Hlavný obrázok navrchu stránky pritom podľa Google nikdy nenačítavajte oneskorene (lazy-load), lebo to zhorší LCP.
- Animované GIFy. V príklade na web.dev má GIF 3,7 MB, rovnaká animácia ako video MP4 iba 551 KB a vo formáte WebM 341 KB.
- Pluginy a JavaScript. Každý ďalší plugin alebo skript môže pridať kód, ktorý musí prehliadač stiahnuť a spustiť. Podľa web.dev príliš veľa JavaScriptu blokuje vykresľovanie stránky.
- Fonty. Viac rodín a hrúbok písma znamená viac súborov. Google odporúča formát WOFF2, obmedziť počet písiem, odstrániť nepoužívané znaky a nastaviť vlastnosť font-display. Pri orezávaní znakov dajte pozor, aby ste si nevymazali ľ, ť, ô či ä.
- Služby tretích strán. Reklamy, vložené videá, chaty či sledovacie kódy. Podľa web.dev môžu byť vložené reklamy a videá hlavnou príčinou pomalého webu. Skripty tretích strán odporúča načítavať s atribútmi async alebo defer a tie, ktoré neprinášajú jasný úžitok, odstrániť.
- Pomalý server. Ak server odpovedá pomaly, podľa web.dev môže byť LCP do 2,5 s ťažké až nemožné dosiahnuť. Pomôže kvalitnejší hosting, cache a CDN.
Kde začať v praxi
- Otvorte PageSpeed Insights pre úvodnú stránku a pre najnavštevovanejšiu stránku služby alebo produktu, vždy v mobilnom zobrazení.
- Zistite, ktorá z troch metrík je najslabšia, a začnite ňou.
- Pri zlom LCP riešte najprv hlavný obrázok a odozvu servera. Pri zlom INP sa pozrite na JavaScript, pluginy a skripty tretích strán. Pri zlom CLS doplňte rozmery obrázkov a videí a skontrolujte reklamy, bannery a fonty.
- Po úprave buďte trpezliví. Terénne dáta zahŕňajú posledných 28 dní, takže zlepšenie sa v nich prejaví postupne.
Časté otázky
Ovplyvňuje rýchlosť webu pozície v Google?
Google odporúča dosahovať dobré Core Web Vitals pre úspech vo Vyhľadávaní a zaraďuje ich medzi signály skúsenosti so stránkou, ktoré jeho systémy chcú odmeňovať. Dobré hodnoty však samy osebe nezaručia vysoké pozície, rozhoduje najmä relevantný a užitočný obsah.
Prečo PageSpeed Insights ukazuje dve rôzne hodnotenia?
Nástroj zobrazuje terénne dáta od skutočných návštevníkov za posledných 28 dní a zároveň laboratórny test v Lighthouse, ktorý načítanie stránky simuluje. Pre hodnotenie Core Web Vitals sú rozhodujúce terénne dáta, laboratórny test slúži na hľadanie príčin.
Treba mať v PageSpeed Insights skóre 100?
Nie. Skóre z laboratórneho testu je pomôcka. Dôležitejšie je, či skutoční návštevníci na mobile dosahujú dobré hodnoty LCP, INP a CLS, čo uvidíte v terénnych dátach a v prehľade Core Web Vitals v Search Console.
Ak je váš web pomalý alebo ho plánujete prerobiť, pozrite si, ako staviame weby a e-shopy na mieru s dôrazom na rýchlosť od prvého dňa.