Branje rezultatov PageSpeed Insights: Core Web Vitals v preprostem jeziku
Svojo spletno stran ste preizkusili v orodju PageSpeed Insights in vidite rdečo številko, na primer 45. Kaj to pomeni in kako resno je? V tem članku boste prebrali, kako se bere poročilo, kaj merijo tri lastnosti Core Web Vitals in kaj lahko sami izboljšate.
Tri meritve
| Meritev | Kaj meri | Dobro | Potrebna izboljšava | Slabo |
|---|---|---|---|---|
| LCP (Largest Contentful Paint) | Kako hitro se na zaslonu prikaže največji del vsebine, pogosto velika slika na vrhu | do 2,5 s | 2,5 do 4 s | nad 4 s |
| INP (Interaction to Next Paint) | Kako hitro se stran odzove, ko kliknete, tapnete ali tipkate | do 200 ms | 200 do 500 ms | nad 500 ms |
| CLS (Cumulative Layout Shift) | Koliko se stran premika med nalaganjem (vrednost, ne čas) | do 0,1 | 0,1 do 0,25 | nad 0,25 |
Stran doseže Core Web Vitals, če je vsaj 75 odstotkov obiskov dobro ocenjenih pri vseh treh meritvah, ločeno za mobilne naprave in namizne računalnike. Ne šteje torej Vaš hiter računalnik, temveč izkušnja večine obiskovalcev, tudi na starejšem telefonu. INP je marca 2024 nadomestil starejšo meritev FID. Če še naletite na FID, je ta informacija zastarela.
Podatki s terena in laboratorijski podatki
PageSpeed Insights prikazuje dve vrsti meritev, ki pogosto dajeta različne številke:
- Podatki s terena (zgoraj): meritve pri dejanskih obiskovalcih s Chromom v zadnjih 28 dneh. Ti podatki določajo, ali dosežete Core Web Vitals. Če ima Vaša stran premalo obiskovalcev, boste videli številke za celotno spletno mesto ali pa sploh ne boste videli podatkov s terena.
- Laboratorijski podatki (spodaj): test z orodjem Lighthouse, ki stran enkrat naloži na simulirani srednje zmogljivi telefon in povezavi. Od tod izhaja številka od 0 do 100. Lighthouse ne more meriti INP, ker nihče ne klika.
Laboratorijske podatke uporabite za iskanje vzrokov in za takojšnji vpogled, ali izboljšava pomaga. Začnite z zavihkom Mobilno: tam je rezultat navadno slabši, Google pa pri Vaši strani predvsem upošteva mobilno različico.
Kolikšno težo ima to pri Googlu?
Google navaja, da Core Web Vitals vplivajo na razvrščanje. Vendar Google vedno prikaže najbolj relevantno vsebino, tudi če ta stran ni najhitrejša. Številka od 0 do 100 izhaja iz laboratorijskega testa in ni Googlova ocena; ta ocena izhaja iz podatkov s terena. Po navedbah Googla doseganje popolne ocene zgolj zaradi Googla ni najboljša poraba Vašega časa. Poskrbite, da ste v zelenem oziroma vsaj v oranžnem območju, predvsem zato, ker obiskovalci zapustijo počasno ali premikajočo se stran.
Kaj lahko izboljšate na sami strani
- Manjše slike. Slika širine več tisoč slikovnih pik za okvir širine 800 slikovnih pik je najpogostejši vzrok počasnega LCP. Slike pred nalaganjem pomanjšajte in uporabite sodoben format, kot je WebP ali AVIF.
- Širina in višina pri vsaki sliki. Brez
widthinheightbrskalnik ne ve, koliko prostora slika potrebuje, zato se besedilo ob prikazu slike premakne. To poveča CLS:<img src="bloemstuk.webp" width="800" height="600" alt="Bruidsboeket met witte rozen">
- Najpomembnejše slike ne nalagajte leno.
loading="lazy"je primerno za slike nižje na strani, ne pa za sliko, ki je vidna takoj ob odprtju. V nasprotnem primeru brskalnik čaka prav na sliko, ki določa Vaš LCP. - Ničesar ne vstavljajte naknadno nad vsebino. Pasica za piškotke, oglas ali pripomoček, ki stran potisne navzdol, povzroči, da se vse premakne. Tak pas raje postavite čez stran.
- Manj skript tretjih strani. Slab INP je skoraj vedno posledica preveč JavaScripta: obsežnih tem, drsnikov, klepetalnih oken in sledilnikov. Kritično preglejte vsak vtičnik ali vdelano storitev.
Kaj naredi strežnik
Vse se začne s prvim odzivom strežnika, imenovanim Time to First Byte (TTFB). Ta sam po sebi ni del Core Web Vitals, vendar je ob počasnem prvem odzivu dober LCP skoraj nemogoč. Kot smernica velja 0,8 sekunde ali manj kot dobra vrednost. Vzroki so pogosto spletno mesto brez predpomnilnika, premalo procesorske moči ali preusmeritve. Strežnik mora besedilne datoteke pošiljati tudi stisnjene (stiskanje z gzip ali Brotli). O tem, kako prilagoditi stran strežnika, lahko preberete v članku Moja spletna stran je počasna ali uporablja preveč CPU: tako jo pospešite in v priročniku za DirectAdmin, Moja spletna stran je počasna.
V AI Bouwer in WordPressu
Stran, izdelana z AI Bouwer, pri slikah z znano velikostjo nastavi širino in višino, prvo sliko na strani naloži takoj in s prednostjo, ostale pa šele, ko postanejo vidne, ob objavi pa ustvari manjšo različico velikih slik. V WordPressu najbolj pomagata vtičnik za predpomnjenje in pomanjšanje slik. O tem lahko preberete v brezplačnem tečaju WordPress, v lekcijah Zaradi česa je spletna stran počasna in kako to izmerite? ter Slike, PHP in druge pohitritve.
Dodatno branje
- web.dev: Web Vitals (v angleščini)
- O orodju PageSpeed Insights (v angleščini)
- Google: izkušnja strani in Googlovo iskanje (v angleščini)
- Google: poročilo o vitalnosti strani