Google ne meri samo da li vam se sajt učitava, on meri kako se učitava i kako se korisnik oseća dok čeka. To su Core Web Vitals.
Core Web Vitals su skup mernih vrednosti koje Google koristi da oceni korisničko iskustvo na sajtu. Nisu isti kao opšta brzina učitavanja, idu dublje. Mere kada se vidi prvi sadržaj, kada korisnik može da počne da klika i da li se elementi na stranici skaču dok se ostali još učitavaju. Sve tri vrednosti direktno utiču na rang u pretragama, a sve tri se mogu popraviti ako znate šta tačno radite.
Tri merila koja Google prati: LCP, INP i CLS
LCP (Largest Contentful Paint) meri vreme do trenutka kada se najveći vidljivi element, slika ili blok teksta, u potpunosti prikaže na ekranu. Google smatra dobrim sve do 2,5 sekunde. Iznad četiri sekunde ulazite u crvenu zonu. LCP je najčešće najteže popraviti jer zavisi od slike heroa, servera, i CSS-a koji blokira renderovanje.
INP (Interaction to Next Paint) je merilo koje je Google zamenio starim FID-om od 2024. Meri koliko brzo sajt reaguje na sve interakcije korisnika, ne samo prvu. Klik na dugme, otvaranje menija, scroll. Vrednost ispod 200 milisekundi je dobra, iznad 500 je problem. Uzrok je najčešće previše JavaScript-a koji se izvršava na main thread-u.
CLS (Cumulative Layout Shift) meri koliko se elementi na stranici pomeraju dok se ostali još učitavaju. Sigurno ste doživeli da kliknete na dugme, a ono se pomeri u poslednjem trenutku jer se iznad njega učitala slika ili oglas. To je CLS. Vrednost ispod 0,1 je prihvatljiva. Iznad 0,25 korisnik doživljava sajt kao nestabilan.
Kako izmeriti Core Web Vitals za vaš sajt
Google Search Console ima poseban izveštaj za Core Web Vitals koji prikazuje podatke iz stvarnih korisničkih poseta vašem sajtu. To su takozvani 'field data', tj. stvarno iskustvo, a ne laboratorijsko merenje. Ovde vidite koje stranice imaju problem i koliko je ozbiljan.
Za detaljnu dijagnozu koristite PageSpeed Insights koji za svaku stranicu prikazuje i field data i lab data uz preporuke šta tačno uzrokuje probleme. Chrome DevTools ima Performance panel koji snima svaki milisekund izvršavanja i pokazuje gde se gubi vreme. Za redovno praćenje, Google Analytics 4 može da beleži Web Vitals ako ga povežete sa Search Console.
- Google Search Console, Core Web Vitals izveštaj, za pregled celog sajta
- PageSpeed Insights za analizu pojedinačnih stranica
- Chrome DevTools Performance panel za detaljan laboratorijski uvid
- web-vitals JavaScript biblioteka za merenje u produkciji
- Lighthouse CI za automatsko testiranje u CI/CD pipeline-u
Core Web Vitals nisu birokratija Googla, oni su odraz iskustva koje vaši kupci imaju na sajtu i to iskustvo se direktno vidi u konverzijama.
Kako popraviti LCP
Loš LCP najčešće dolazi od jednog od tri izvora: spora server response (TTFB), slika koja se kasno učitava ili CSS koji blokira renderovanje. Počnite sa preload linkom u head-u za hero sliku, to govori browseru da počne da je skida odmah. Koristite fetchpriority='high' na hero img tagu.
Ako je hero element tekst a ne slika, proverite da li je font self-hosted. Google Fonts koje se učitavaju sa eksternog servera usporavaju LCP. Preuzmite fontove i servujte ih sa sopstvenog domena uz font-display: swap u CSS-u. Kombinacija tih koraka može da poboljša LCP i za sekund i po.
Kako popraviti CLS
Uzrok CLS-a je skoro uvek nedefinisana veličina medija. Kada browser ne zna koliko mesta da rezerviše za sliku ili video pre nego što se učita, ostatak sadržaja se pomera kad dođe. Rešenje je jednostavno: uvek definirajte width i height atribute na img i video elementima, čak i na responsivnim.
Oglasi koji se učitavaju dinamički su drugi veliki uzrok CLS-a. Rezervišite prostor za oglas kontejnerom fiksne visine pre nego što se oglas učita. Fontovi koji se menjaju dok se učitavaju (FOUT) takođe uzrokuju sitni CLS koji se akumulira. font-display: swap ili optional smanjuje to na minimum.
- Uvek definišite width i height na svim img i video elementima
- Rezervišite fiksni prostor za dinamički učitane reklame i widgete
- Koristite font-display: swap ili optional za webfontove
- Izbegavajte ubacivanje sadržaja iznad već učitanog sadržaja
- Testirajte na pravim uređajima, ne samo u DevTools emulaciji
Kako popraviti INP
Visok INP znači da JavaScript blokira main thread. Svaki dugi task (iznad 50ms) na main thread-u znači da browser ne može da reaguje na korisnikov input. Koristite Chrome DevTools Performance profiler da pronađete dugotrajne taskove i identifikujete koji kod ih uzrokuje.
Rešenja uključuju code splitting koji deli JS u manje delove koji se učitavaju po potrebi, postavljanje heavy taskova na Web Workers da se izvršavaju van main thread-a, i ukljanjanje trećih strana koje ne doprinose direktno korisničkom iskustvu. Svaki analytics ili chat widget koji dodate dodaje teret na main thread.
Core Web Vitals u kontekstu celog SEO-a
Core Web Vitals su deo Page Experience signala, ali nisu jedini faktor ranga. Odličan sadržaj na sajtu sa lošim Vitals-ima i dalje može da rangira visoko. Loš sadržaj na perfektno brzom sajtu neće. Tretiraju ih kao tiebreaker, kada je sve ostalo izjednačeno, bolji Vitals pobeđuju.
Tim izreklamiraj.me integriše Core Web Vitals optimizaciju u svaki web projekat od samog starta. Graditi sajt koji ne zadovoljava te standarde je kao graditi kuću bez izolacije, sve izgleda dobro dok ne dođe zima. Sa iskustvom u web razvoju i SEO-u, znamo da tehničke performanse i sadržaj moraju da idu zajedno.
Ako vaš sajt ima loše ocene za Core Web Vitals, gubite rang i posetioce koji odlaze pre nego što vide vašu ponudu. Izreklamiraj.me radi kompletnu tehničku optimizaciju sajtova, uključujući dijagnozu i popravku sva tri Core Web Vitals merila. Zakažite besplatnu konsultaciju i saznajte tačno šta usporava vaš sajt i koji koraci će dati rezultat najbrže.
