Ako čítať PageSpeed Insights: Core Web Vitals zrozumiteľne vysvetlené
Otestovali ste svoju webovú stránku v nástroji PageSpeed Insights a vidíte červené číslo, napríklad 45. Čo to znamená a ako vážne to je? V tomto článku sa dozviete, ako čítať tento report, čo merajú tri Core Web Vitals a čo môžete sami vylepšiť.
Tri merania
| Meranie | Čo meria | Dobré | Vyžaduje zlepšenie | Zlé |
|---|---|---|---|---|
| LCP (Largest Contentful Paint) | Ako rýchlo sa zobrazí najväčší obsahový prvok, často veľký obrázok v hornej časti stránky | do 2,5 s | 2,5 až 4 s | nad 4 s |
| INP (Interaction to Next Paint) | Ako rýchlo stránka reaguje, keď kliknete, ťuknete alebo píšete | do 200 ms | 200 až 500 ms | nad 500 ms |
| CLS (Cumulative Layout Shift) | Koľko sa stránka posúva počas načítavania (skóre, nie čas) | do 0,1 | 0,1 až 0,25 | nad 0,25 |
Stránka spĺňa Core Web Vitals, ak aspoň 75 percent návštev dosiahne dobré skóre vo všetkých troch meraniach, samostatne pre mobilné zariadenia a počítače. Nezáleží teda na vašom rýchlom počítači, ale na skúsenosti väčšiny návštevníkov, aj na staršom telefóne. INP v marci 2024 nahradilo staršie meranie FID. Ak sa ešte stretnete s FID, táto informácia je zastaraná.
Údaje z terénu a laboratórne údaje
PageSpeed Insights zobrazuje dva druhy meraní, ktoré často uvádzajú odlišné čísla:
- Údaje z terénu (hore): merania u skutočných návštevníkov s prehliadačom Chrome za posledných 28 dní. Tieto údaje určujú, či stránka spĺňa Core Web Vitals. Ak má stránka príliš málo návštev, zobrazia sa čísla za celú vašu stránku, alebo sa nezobrazia žiadne údaje z terénu.
- Laboratórne údaje (nižšie): test pomocou nástroja Lighthouse, ktorý stránku raz načíta na simulovanom priemernom telefóne a pripojení. Odtiaľto pochádza číslo od 0 do 100. Lighthouse nedokáže merať INP, pretože nikto neklika.
Laboratórne údaje používajte na hľadanie príčin a na okamžité overenie, či zlepšenie pomohlo. Začnite na karte Mobilné: tam býva situácia obvykle horšia a Google sa zameriava predovšetkým na mobilnú verziu vašej stránky.
Akú váhu to má u Google?
Google uvádza, že Core Web Vitals sa zohľadňujú pri zaraďovaní vo výsledkoch vyhľadávania. Google však vždy zobrazuje najrelevantnejší obsah, aj keď daná stránka nie je najrýchlejšia. Číslo od 0 do 100 pochádza z laboratórneho testu a nie je hodnotením zo strany Google; toto hodnotenie vychádza z údajov z terénu. Dosiahnuť dokonalé skóre len kvôli Google podľa samotného Google nie je najlepším využitím vášho času. Snažte sa dostať do zelenej, alebo aspoň oranžovej oblasti, najmä preto, že návštevníci odchádzajú z pomalej alebo posúvajúcej sa stránky.
Čo môžete vylepšiť priamo na stránke
- Menšie obrázky. Fotografia so šírkou niekoľkých tisíc pixelov pre priestor s rozmerom 800 pixelov je najčastejšou príčinou pomalého LCP. Zmenšite fotografie ešte pred nahratím a použite moderný formát, ako je WebP alebo AVIF.
- Šírka a výška pri každom obrázku. Bez
widthaheightprehliadač nevie, koľko miesta obrázok potrebuje, a text sa posunie, keď sa obrázok načíta. To zvyšuje CLS:<img src="bloemstuk.webp" width="800" height="600" alt="Svadobná kytica s bielymi ružami">
- Najdôležitejší obrázok nenačítavať lenivo.
loading="lazy"je vhodné pre obrázky nižšie na stránke, ale nie pre obrázok, ktorý je viditeľný hneď po otvorení stránky. Inak prehliadač čaká práve s obrázkom, ktorý určuje váš LCP. - Nevkladať nič dodatočne nad obsah. Lišta cookies, reklama alebo widget, ktoré posunú stránku nadol, spôsobia, že sa všetko posunie. Takúto lištu je lepšie zobraziť cez obsah stránky.
- Menej skriptov od tretích strán. Zlý INP je takmer vždy spôsobený príliš veľkým množstvom JavaScriptu: náročnými šablónami, posuvníkmi, okienkami chatu a sledovacími skriptmi. Kriticky zhodnoťte každý plugin alebo vloženú službu.
Čo robí server
Všetko začína prvou reakciou servera, teda Time to First Byte (TTFB). Tá sama o sebe nie je Core Web Vital, ale pri pomalej prvej reakcii je dobré LCP takmer nemožné. Ako orientačná hodnota je vhodných 0,8 sekundy alebo menej. Príčinou býva často stránka bez cache, nedostatočný výkon alebo presmerovania. Server by mal textové súbory odosielať aj komprimované (kompresia pomocou gzip alebo Brotli). Ako upraviť serverovú stránku veci, si prečítate v článku Moja webová stránka je pomalá alebo využíva príliš veľa CPU: ako ju zrýchliť a v návode pre DirectAdmin, Moja webová stránka je pomalá.
V nástroji AI Builder a vo WordPresse
Stránka vytvorená v nástroji AI Builder nastaví šírku a výšku pri obrázkoch, ktorých rozmer je známy, prvý obrázok na stránke načíta ihneď a s prioritou a ostatné až vtedy, keď sa dostanú do zorného poľa, a pri publikovaní vytvorí menšiu verziu veľkých fotografií. Vo WordPresse najviac pomôže cachovací plugin a zmenšenie obrázkov. To si môžete prečítať v bezplatnom kurze WordPress, v lekciách Čo spôsobuje, že je stránka pomalá, a ako to zmerať? a Obrázky, PHP a ďalšie spôsoby zrýchlenia.
Ďalšie čítanie
- web.dev: Web Vitals (anglicky)
- O nástroji PageSpeed Insights (anglicky)
- Google: skúsenosť so stránkou a Vyhľadávanie Google (anglicky)
- Google: report Site-vitaliteit