Performanse web-stranice ne ovise samo o tome koliko se brzo stranica učitava. Čak i ako se sadržaj pojavi za nekoliko sekundi, spori odaziv gumba ili neočekivani pomaci rasporeda mogu frustrirati posjetitelje i narušiti njihovo iskustvo. Kako onda utvrditi radi li vaša web-stranica dobro? Core Web Vitals ključni su Googleovi pokazatelji performansi koji mjere brzinu učitavanja, interaktivnost i vizualnu stabilnost. U ovom vodiču upoznat ćete tri metrike Core Web Vitals, njihove preporučene granične vrijednosti te alate pomoću kojih možete mjeriti i poboljšati performanse svoje web-stranice.
Što su Core Web Vitals?
Core Web Vitals skup su metrika performansi koje je Google uveo kako bi mjerio važne aspekte korisničkog iskustva na web-stranici. Te se metrike usredotočuju na tri glavna čimbenika: performanse učitavanja, interaktivnost i vizualnu stabilnost. Drugim riječima, pomažu vlasnicima web-stranica razumjeti koliko se brzo stranica učitava, koliko glatko korisnici mogu s njom komunicirati i ostaje li njezin sadržaj stabilan tijekom učitavanja.
Performanse web-stranice ne svode se samo na to koliko se brzo stranica otvara. Web-stranica može učitati sadržaj u kratkom vremenu, ali ako korisnici moraju čekati prije nego što mogu kliknuti gumb ili se raspored stranice neočekivano mijenja, ukupno iskustvo i dalje može biti loše. Core Web Vitals pomažu prepoznati takve probleme i daju mjerljive ciljeve za poboljšanje performansi web-stranice.
Google trenutačno koristi tri metrike Core Web Vitals: Largest Contentful Paint (LCP), Interaction to Next Paint (INP) i Cumulative Layout Shift (CLS). Svaka metrika mjeri drugi dio korisničkog iskustva, pa poboljšanje jedne od njih ne znači nužno da će se poboljšati i preostale dvije.
Zašto su Core Web Vitals važni?
Web-stranica treba posjetiteljima pružiti glatko i pouzdano iskustvo. Kada se stranica predugo učitava, korisnici mogu otići prije nego što dođu do informacija koje trebaju. Slično tome, ako gumbi sporo reagiraju ili se elementi stranice neočekivano pomiču, posjetitelji se mogu frustrirati i teško dovršiti ono što su namjeravali.
Core Web Vitals pomažu vlasnicima web-stranica prepoznati te probleme na temelju mjerljivih podataka o performansama, umjesto da se oslanjaju samo na osobne dojmove. Na primjer, programer može testirati web-stranicu na snažnom računalu i zaključiti da se brzo učitava. Međutim, posjetitelji koji koriste starije mobilne uređaje ili sporije internetske veze mogu imati znatno dulje vrijeme učitavanja.
Zbog tih je razlika praćenje performansi važno. Analizom podataka Core Web Vitals programeri mogu utvrditi koje dijelove web-stranice treba poboljšati i daju li njihovi napori u optimizaciji očekivane rezultate.
Core Web Vitals važni su i za optimizaciju za tražilice (SEO). Google u svojim sustavima rangiranja koristi signale iskustva stranice, ali dobri rezultati Core Web Vitals ne jamče bolji položaj. Relevantan sadržaj i mnogi drugi čimbenici i dalje su važni. Stoga poboljšanje ovih metrika treba promatrati kao dio šire strategije izgradnje korisne, pristupačne i pouzdane web-stranice.
Koje su tri metrike Core Web Vitals?
Svaka metrika Core Web Vitals usredotočena je na određeni aspekt performansi web-stranice. Razumijevanje načina na koji funkcioniraju olakšava prepoznavanje problema s performansama i odabir pravih tehnika optimizacije.
Što je Largest Contentful Paint (LCP)?
Largest Contentful Paint (LCP) mjeri koliko je vremena potrebno da se pojavi najveća slika ili tekstni blok vidljiv u početnom prikazu (viewportu). Ova metrika pomaže procijeniti kada glavni sadržaj stranice postaje vidljiv korisniku.
Zamislite, primjerice, da posjetitelj otvori članak na blogu. Pozadina stranice i navigacijski izbornik mogu se pojaviti gotovo odmah, ali glavnom naslovu ili istaknutoj slici može trebati nekoliko sekundi da se učitaju. U takvoj situaciji posjetitelj može imati dojam da se stranica još učitava, iako su neki njezini elementi već vidljivi. Dobar rezultat LCP-a iznosi 2,5 sekunde ili manje. Ako je vrijednost između 2,5 i 4 sekunde, stranicu treba poboljšati. Vrijednost LCP-a veća od 4 sekunde smatra se lošom.
Na LCP može utjecati nekoliko čimbenika, uključujući sporo vrijeme odziva poslužitelja, velike slike, CSS i JavaScript koji blokiraju iscrtavanje te kašnjenje u otkrivanju glavnog sadržaja.
Kako bi poboljšali LCP, vlasnici web-stranica mogu poduzeti sljedeće korake:
- Optimizirajte slike: Smanjite veličinu slikovnih datoteka i, kada je prikladno, koristite moderne formate poput WebP-a ili AVIF-a.
- Poboljšajte vrijeme odziva poslužitelja: Koristite učinkovite hosting resurse, predmemoriju (caching) i mrežu za isporuku sadržaja (CDN) kada su prikladni za web-stranicu.
- Dajte prednost glavnom sadržaju: Pobrinite se da preglednik može otkriti važne slike izravno iz HTML izvora i po potrebi dajte prednost njihovu učitavanju.
- Smanjite resurse koji blokiraju iscrtavanje: Optimizirajte CSS i JavaScript datoteke koje sprječavaju preglednik da prikaže glavni sadržaj.
- Izbjegavajte odgođeno (lazy) učitavanje LCP slike: Ako će slika vjerojatno biti LCP element, odgađanje njezina učitavanja može učiniti da se stranica čini sporijom.
Ove tehnike mogu skratiti vrijeme koje korisnici provode čekajući da se pojavi glavni sadržaj. Međutim, najučinkovitije rješenje ovisi o uzroku kašnjenja, pa je važno izmjeriti stranicu prije nego što unesete promjene.
Što je Interaction to Next Paint (INP)?
Interaction to Next Paint (INP) mjeri koliko brzo web-stranica reagira kada korisnici s njom komuniciraju. Procjenjuje kašnjenje između korisničke interakcije, poput klika na gumb ili pritiska tipke, i sljedećeg vizualnog ažuriranja koje prikaže preglednik.
Uzmimo kao primjer internetsku trgovinu u kojoj posjetitelj klikne gumb Dodaj u košaricu. Ako pregledniku treba primjetno mnogo vremena da ažurira košaricu, posjetitelj može pomisliti da gumb nije proradio i kliknuti ga ponovno. To može izazvati zabunu, pa čak i dovesti do dvostrukih radnji.
INP pomaže prepoznati takve probleme mjerenjem odzivnosti stranice tijekom cijelog korisnikova posjeta. Za razliku od metrike First Input Delay (FID), koja je mjerila samo kašnjenje prije nego što preglednik počne obrađivati prvu interakciju, INP uzima u obzir šire iskustvo interakcije tijekom cijelog životnog vijeka stranice. Dobar rezultat INP-a iznosi 200 milisekundi ili manje. Vrijednosti veće od 200 milisekundi, a najviše 500 milisekundi treba poboljšati, dok se vrijednosti iznad 500 milisekundi smatraju lošima.
JavaScript je čest uzrok lošeg INP-a jer preglednik možda mora izvršiti skripte prije nego što može reagirati na korisnički unos i prikazati ažuriranje. Dugotrajni zadaci mogu spriječiti preglednik da pravodobno obradi interakcije.
Za poboljšanje INP-a programeri mogu primijeniti nekoliko tehnika:
- Smanjite nepotreban JavaScript: Uklonite neiskorišteni kod i izbjegavajte učitavanje skripti koje trenutačnoj stranici nisu potrebne.
- Razbijte duge zadatke: Podijelite velike JavaScript zadatke na manje kako bi preglednik imao više prilika za obradu korisničkih interakcija.
- Optimizirajte rukovatelje događajima: Funkcije povezane s interakcijama neka budu što jednostavnije i učinkovitije.
- Izbjegavajte nepotrebna ažuriranja DOM-a: Ažuriranje previše elemenata odjednom može produljiti vrijeme iscrtavanja i odgoditi sljedeće vizualno ažuriranje.
- Smanjite skripte trećih strana: Analitički alati, oglašivačke skripte i ugrađene usluge mogu trošiti resurse za obradu i utjecati na odzivnost.
Poboljšanje INP-a zahtijeva više od smanjenja ukupne veličine JavaScript datoteka. Programeri također moraju razumjeti kada se skripte izvršavaju i koliko posla preglednik mora obaviti nakon interakcije.
Što je Cumulative Layout Shift (CLS)?
Cumulative Layout Shift (CLS) mjeri vizualnu stabilnost web-stranice. Usredotočuje se na neočekivane promjene položaja vidljivih elemenata dok se stranica prikazuje.
Zamislite, na primjer, da posjetitelj čita članak i odjednom vidi kako se tekst pomiče prema dolje jer se iznad njega pojavio oglas. Ako je posjetitelj upravo htio kliknuti poveznicu, neočekivani pomak mogao bi ga navesti da klikne neki drugi element. Takve promjene rasporeda mogu otežati korištenje web-stranice, osobito na mobilnim uređajima na kojima je vidljivo područje ograničeno. Dobar rezultat CLS-a iznosi 0,1 ili manje. Rezultate veće od 0,1, a najviše 0,25 treba poboljšati, dok se rezultati iznad 0,25 smatraju lošima.
Neočekivane pomake rasporeda može uzrokovati nekoliko čestih problema. Slike bez definiranih dimenzija, dinamički umetnuti oglasi, sadržaj koji se kasno učitava te web-fontovi koji mijenjaju izgled teksta mogu narušiti vizualnu stabilnost.
Sljedeće tehnike mogu pomoći u poboljšanju CLS-a:
- Zadajte dimenzije slika: Navedite širinu i visinu slika ili koristite CSS omjere stranica (aspect ratio) kako biste rezervirali potreban prostor prije nego što se slika učita.
- Rezervirajte prostor za oglase: Osigurajte dovoljno prostora za spremnike oglasa kako se okolni sadržaj ne bi pomicao kada se oglasi pojave.
- Izbjegavajte umetanje sadržaja iznad postojećeg sadržaja: Ako je potrebno prikazati nove elemente, smjestite ih tako da neočekivano ne pomaknu sadržaj koji korisnici već gledaju.
- Optimizirajte učitavanje fontova: Koristite odgovarajuće strategije učitavanja fontova i zamjenske fontove kako biste smanjili neočekivane promjene u rasporedu teksta.
- Koristite prikladne CSS animacije: Kada je moguće, dajte prednost animacijama temeljenima na svojstvima poput transform i opacity, a ne svojstvima koja uzrokuju promjene rasporeda.
Važno je razumjeti da nije svaki pomak rasporeda štetan. Promjena koja nastaje izravno kao odgovor na korisničku interakciju može biti očekivana. CLS se usredotočuje na neočekivanu vizualnu nestabilnost i koristi način bodovanja koji se temelji na učinku i udaljenosti pomaka rasporeda.
Koje su preporučene granične vrijednosti za Core Web Vitals?
Google navodi konkretne granične vrijednosti koje vlasnicima web-stranica pomažu utvrditi pružaju li njihove stranice dobro korisničko iskustvo. Te vrijednosti dijele performanse u tri kategorije: dobro, treba poboljšati i loše.
Ove granične vrijednosti pomažu programerima da svaku metriku procijene zasebno. Međutim, jedan test nije dovoljan da bi se utvrdilo pruža li web-stranica dosljedno dobro iskustvo.
Google preporučuje procjenu Core Web Vitals na 75. percentilu posjeta stranici, pri čemu se rezultati za mobilne uređaje i stolna računala promatraju zasebno. To znači da barem 75 % izmjerenih posjeta mora zadovoljiti granicu za dobar rezultat kod svake metrike.
Pretpostavimo, primjerice, da web-stranica ima vrijednost LCP-a od 2 sekunde na 75. percentilu. To znači da 75 % izmjerenih posjeta stranici ima LCP od 2 sekunde ili manje, čime je preporučena granična vrijednost zadovoljena.
Web-stranica bi trebala težiti tome da zadovolji granice za dobar rezultat kod sve tri metrike, umjesto da se usredotoči samo na svoj najbolji rezultat.
Koji su alati za mjerenje Core Web Vitals?
Core Web Vitals mogu se mjeriti pomoću nekoliko Googleovih alata. Ti alati pomažu programerima razumjeti kako web-stranica radi i prepoznati područja koja treba poboljšati.
PageSpeed Insights
PageSpeed Insights jedan je od najkorisnijih alata za provjeru Core Web Vitals. Pruža i podatke stvarnih korisnika, kada su dostupni, i laboratorijske podatke prikupljene simuliranim testom. Također nudi prijedloge za poboljšanje performansi stranice.
Google Search Console
Google Search Console sadrži izvješće Core Web Vitals koje pokazuje koje skupine stranica pružaju dobro korisničko iskustvo, a koje treba poboljšati. Koristi podatke iz stvarnog svijeta kako bi vlasnicima web-stranica pomogao prepoznati probleme s performansama na više stranica.
Chrome DevTools i Lighthouse
Chrome DevTools i Lighthouse pomažu programerima testirati performanse stranice u kontroliranom okruženju. Mogu otkriti probleme povezane s izvršavanjem JavaScripta, učitavanjem slika, pomacima rasporeda i drugim čimbenicima koji utječu na Core Web Vitals.
Koja je razlika između terenskih i laboratorijskih podataka?
Core Web Vitals mogu se procjenjivati pomoću dviju vrsta podataka: terenskih (field) i laboratorijskih (lab) podataka. Razumijevanje razlike pomaže programerima protumačiti rezultate testova i odabrati pravi pristup poboljšanju performansi web-stranice.
Terenski podaci
Terenski podaci prikupljaju se od stvarnih korisnika dok pregledavaju web-stranicu. Odražavaju stvarne uvjete pregledavanja, uključujući različite uređaje, mrežne veze i korisničke interakcije.
Ti su podaci osobito korisni za procjenu zadovoljava li web-stranica Googleove preporučene granične vrijednosti Core Web Vitals u stvarnim situacijama.
Laboratorijski podaci
Laboratorijski podaci prikupljaju se u kontroliranom testnom okruženju pomoću alata kao što je Lighthouse. Pomažu programerima reproducirati probleme s performansama i istražiti njihove moguće uzroke.
Za razliku od terenskih podataka, laboratorijski podaci ne predstavljaju svako stvarno korisničko iskustvo. Zato web-stranica može dobiti različite rezultate u laboratorijskim testovima i mjerenjima stvarnih korisnika.
Kako poboljšati Core Web Vitals
Poboljšanje Core Web Vitals zahtijeva prepoznavanje problema koji utječu na brzinu učitavanja, interaktivnost i vizualnu stabilnost. Pravo rješenje ovisi o tome koja metrika daje loše rezultate.
Poboljšajte Largest Contentful Paint (LCP)
Kako bi poboljšali LCP, programeri se trebaju usredotočiti na to da se najveći vidljivi element sadržaja učita što je brže moguće. Uobičajena poboljšanja uključuju optimizaciju slika, odabir pouzdane usluge web hostinga, smanjenje vremena odziva poslužitelja, uključivanje predmemorije i izbjegavanje nepotrebnih kašnjenja pri učitavanju važnih resursa.
Poboljšajte Interaction to Next Paint (INP)
INP se može poboljšati smanjenjem dugotrajnih JavaScript zadataka i svođenjem nepotrebnog posla na glavnoj niti na najmanju moguću mjeru. Programeri bi također trebali optimizirati rukovatelje događajima i izbjegavati da preglednik mora obaviti previše posla nakon što korisnik klikne, dodirne zaslon ili nešto upiše.
Poboljšajte Cumulative Layout Shift (CLS)
Kako bi smanjili CLS, programeri trebaju rezervirati prostor za slike, videozapise, oglase i druge elemente prije nego što se učitaju. Izbjegavajte neočekivano umetanje novog sadržaja iznad postojećeg i, kad god je moguće, koristite dosljedne dimenzije za vizualne elemente.
Zaključak
Core Web Vitals pomažu programerima razumjeti kako korisnici doživljavaju web-stranicu u pogledu performansi učitavanja, interaktivnosti i vizualne stabilnosti. Mjerenjem LCP-a, INP-a i CLS-a vlasnici web-stranica mogu prepoznati probleme s performansama i odrediti prioritete poboljšanja koja olakšavaju korištenje njihovih stranica.
Redovito praćenje, podaci stvarnih korisnika i ciljana optimizacija mogu pomoći web-stranicama da dugoročno zadrže dobre rezultate Core Web Vitals
Česta pitanja
1. Koja je razlika između terenskih i laboratorijskih podataka?
Terenski podaci potječu od stvarnih korisnika koji posjećuju web-stranicu, dok se laboratorijski podaci prikupljaju u kontroliranom testnom okruženju. Terenski podaci odražavaju stvarna korisnička iskustva, a laboratorijski podaci pomažu programerima reproducirati i dijagnosticirati probleme s performansama.
2. Kako mogu poboljšati rezultate Core Web Vitals?
Core Web Vitals možete poboljšati optimizacijom slika, smanjenjem nepotrebnog JavaScripta, skraćivanjem vremena odziva poslužitelja, uključivanjem predmemorije i sprječavanjem neočekivanih pomaka rasporeda.
