Čitanje PageSpeed Insightsa: Core Web Vitals jednostavnim jezikom
Testirali ste svoju web stranicu u PageSpeed Insights i vidite crveni broj, na primjer 45. Što to znači i koliko je ozbiljno? U ovom članku saznajte kako čitati izvještaj, što mjere tri Core Web Vitals pokazatelja i što sami možete poboljšati.
Tri mjerenja
| Mjerenje | Što mjeri | Dobro | Potrebno poboljšanje | Loše |
|---|---|---|---|---|
| LCP (Largest Contentful Paint) | Koliko brzo se najveći dio sadržaja prikaže na ekranu, često velika slika pri vrhu | do 2,5 s | 2,5 do 4 s | iznad 4 s |
| INP (Interaction to Next Paint) | Koliko brzo stranica reagira kada kliknete, dodirnete ili tipkate | do 200 ms | 200 do 500 ms | iznad 500 ms |
| CLS (Cumulative Layout Shift) | Koliko se stranica pomiče tijekom učitavanja (bodovna ocjena, ne vrijeme) | do 0,1 | 0,1 do 0,25 | iznad 0,25 |
Stranica zadovoljava Core Web Vitals ako barem 75 posto posjeta ima dobru ocjenu na sva tri pokazatelja, zasebno za mobilne uređaje i računala. Dakle, ne broji se Vaše brzo računalo, nego iskustvo većine posjetitelja, uključujući one sa starijim telefonom. INP je u ožujku 2024. zamijenio stariji pokazatelj FID. Ako naiđete na FID, radi se o zastarjeloj informaciji.
Podaci s terena i laboratorijski podaci
PageSpeed Insights prikazuje dvije vrste mjerenja, koje često daju različite brojke:
- Podaci s terena (pri vrhu): mjerenja kod stvarnih posjetitelja s Chromeom u posljednjih 28 dana. Ovo određuje zadovoljavate li Core Web Vitals. Ako Vaša stranica ima premalo posjetitelja, vidjet ćete brojke za cijelu stranicu ili uopće nećete vidjeti podatke s terena.
- Laboratorijski podaci (ispod toga): test pomoću alata Lighthouse, koji jednom učita stranicu na simuliranom prosječnom telefonu i vezi. Odavde dolazi broj od 0 do 100. Lighthouse ne može izmjeriti INP jer nitko ne klika.
Koristite laboratorijske podatke za pronalaženje uzroka i kako biste nakon poboljšanja odmah vidjeli pomaže li to. Počnite na kartici Mobilni uređaji: tamo je rezultat obično lošiji, a Google prije svega gleda mobilnu verziju Vaše stranice.
Koliko je to važno za Google?
Google navodi da se Core Web Vitals uzimaju u obzir pri rangiranju. No Google uvijek prikazuje najrelevantniji sadržaj, čak i ako ta stranica nije najbrža. Broj od 0 do 100 dolazi iz laboratorijskog testa i nije ocjena koju dodjeljuje Google; ta ocjena proizlazi iz podataka s terena. Prema samom Googleu, postizanje savršenog rezultata isključivo radi Googlea nije najbolji način ulaganja Vašeg vremena. Pobrinite se da se nalazite u zelenom ili barem narančastom području, prije svega zato što posjetitelji napuštaju sporu ili nestabilnu stranicu.
Što možete poboljšati na samoj stranici
- Manje slike. Fotografija široka tisuće piksela za okvir od 800 piksela najčešći je uzrok sporog LCP-a. Smanjite fotografije prije prijenosa i koristite moderan format poput WebP ili AVIF.
- Širina i visina za svaku sliku. Bez atributa
widthiheightpreglednik ne zna koliko prostora slika zahtijeva, pa se tekst pomiče kada se slika učita. To povećava CLS:<img src="bloemstuk.webp" width="800" height="600" alt="Bruidsboeket met witte rozen">
- Nemojte lijeno učitavati najvažniju sliku. Atribut
loading="lazy"dobar je za slike dalje na stranici, ali ne za sliku koja je odmah vidljiva pri otvaranju. U suprotnom, preglednik čeka upravo sa slikom koja određuje Vaš LCP. - Ne umećite ništa накnadno iznad sadržaja. Traka s kolačićima, oglas ili widget koji gura stranicu prema dolje uzrokuje pomicanje svega. Takvu traku radije postavite preko stranice.
- Manje vanjskih skripti. Loš INP gotovo uvijek proizlazi iz previše JavaScripta: teških tema, kliznih prikaza, prozora za razgovor i alata za praćenje. Kritički pregledajte svaki dodatak ili ugrađenu uslugu.
Što radi server
Sve počinje prvim odgovorom servera, pokazateljem Time to First Byte (TTFB). On sam po sebi nije Core Web Vital pokazatelj, ali uz spor prvi odgovor dobar LCP gotovo je nemoguć. Kao okvirna vrijednost, 0,8 sekundi ili manje smatra se dobrim. Uzroci su često stranica bez predmemorije (cache), nedovoljna procesorska snaga ili preusmjeravanja. Server bi tekstualne datoteke trebao slati i komprimirane (kompresija pomoću gzip ili Brotli). Kako prilagoditi stranu servera, pročitajte u članku Moja web stranica je spora ili koristi previše CPU-a: ovako je ubrzati i u DirectAdmin priručniku, Moja web stranica je spora.
U AI Bouweru i WordPressu
Stranica izrađena u AI Bouweru postavlja širinu i visinu za slike čija je veličina poznata, prvu sliku na stranici učitava odmah i prioritetno, dok ostale učitava tek kada postanu vidljive, te pri objavljivanju izrađuje manju verziju velikih fotografija. U WordPressu najviše pomažu dodatak za predmemoriju i smanjivanje slika. O tome više pročitajte u besplatnom WordPress tečaju, u lekcijama Zbog čega je stranica spora i kako to izmjeriti? i Slike, PHP i druge metode za povećanje brzine.
Dodatno čitanje
- web.dev: Web Vitals (na engleskom)
- O alatu PageSpeed Insights (na engleskom)
- Google: iskustvo stranice i Google pretraživanje (na engleskom)
- Google: izvještaj o osnovnim web pokazateljima