Brzina sajta: Core Web Vitals bez žargona
Tri mjere kojima Google ocjenjuje koliko je tvoj sajt ugodan za korištenje, šta znače u praksi i najčešći razlozi zašto su loše.
Spor sajt ne izgleda kao problem dok ga ne otvoriš na telefonu, na mobilnim podacima, negdje izvan grada. Tad vidiš ono što vidi kupac: bijeli ekran, tekst koji skače, dugme koje ne reaguje.
Google to mjeri kroz tri pokazatelja koje zove Core Web Vitals.
Tri mjere, ljudskim jezikom
| Mjera | Šta mjeri | Dobro je |
|---|---|---|
| LCP (Largest Contentful Paint) | Koliko brzo se pojavi glavni sadržaj, obično velika slika ili naslov | do 2,5 s |
| INP (Interaction to Next Paint) | Koliko brzo stranica reaguje kad nešto klikneš ili dodirneš | do 200 ms |
| CLS (Cumulative Layout Shift) | Koliko sadržaj „skače“ dok se stranica učitava | do 0,1 |
Dvije stvari je dobro znati:
- Google ocjenjuje stvarne posjete iz Chromea, a ne test u laboratoriji. Da bi stranica prošla, najmanje 75% posjeta mora biti u dobroj zoni.
- INP je u martu 2024. zamijenio stariju mjeru FID. Ako ti neko još priča o FID-u, njegove informacije su zastarjele.
Koliko je to bitno za Google?
Core Web Vitals su dio onoga što Google zove „page experience“ i ulaze u rangiranje, ali relevantan i koristan sadržaj je važniji. Brz sajt bez dobrog sadržaja neće prestići odličan sadržaj na sporijem sajtu.
Brzina stvarno odlučuje o onome što se desi nakon klika. Čovjek koji na mobitelu gleda bijeli ekran ne čeka dugo.
Kako provjeriti svoj sajt
- Otvori PageSpeed Insights i upiši adresu sajta.
- Prvo gledaj gornji dio izvještaja, sa stvarnim podacima korisnika. Donji dio je laboratorijski test i služi za dijagnozu.
- Ako sajt ima malo posjeta, stvarnih podataka možda neće biti. Tad se oslanjaš na test, uz svijest da je okviran.
- U Google Search Consoleu izvještaj „Core Web Vitals“ pokazuje koje grupe stranica imaju problem.
Najčešći krivci
Prevelike slike
Fotografija od 5 MB direktno s telefona, prikazana u kvadratu od 400 piksela. Najčešći i najlakše rješiv problem: format WebP ili AVIF, slike u veličini u kojoj se prikazuju i odloženo učitavanje (loading="lazy") za sve ispod prvog ekrana.
Previše dodataka i teški page builderi
Svaki dodatak, slider, chat widget i pop-up dodaje kod koji telefon mora preuzeti i izvršiti. To obično najviše kvari INP.
Skripte trećih strana
Analitika, pikseli za oglase, ugrađeni videi i mape. Svaka od njih učitava svoj kod s tuđeg servera. Zadrži samo ono što stvarno koristiš, a mape i videe učitaj tek na klik.
Sadržaj koji skače
Slike bez zadatih dimenzija, baneri koji se ubace na vrh nakon učitavanja, fontovi koji promijene veličinu teksta. Rješenje je da se prostor za svaki element rezerviše unaprijed.
Spor hosting bez CDN-a
Ako je server spor ili daleko, sve ostalo kasni. Statički sajt na CDN-u stiže sa servera blizu posjetioca.
Kako to radim
Na ovom sajtu sam, na primjer, globus na početnoj napravio od nule umjesto da učitam gotovu 3D biblioteku. Verzija s bibliotekom imala je oko 240 KB, a ova ima oko 6 KB. Takve odluke se ne vide, ali se osjete na svakom telefonu.
Ako ti PageSpeed pokaže crvene brojke, a ne znaš šta s njima, javi se za besplatan razgovor od dvadeset minuta, pa idemo redom.