Kako poboljšati Core Web Vitals ocjenu

Što su Core Web Vitals

Core Web Vitals su set metrika koje Google koristi za mjerenje korisničkog iskustva na web stranicama. Od 2021 godine ove metrike su faktor rangiranja u Google pretraži što znači da sajt sa boljim Core Web Vitals ima prednost u rezultatima pretrage nad sajtom sa lošijim ocjenama. Google je ovim potezom jasno stavio do znanja da korisničko iskustvo nije samo stvar dizajna već mjerljiv tehnički parametar koji utječe na vidljivost u pretraži.

Tri glavne metrike su Largest Contentful Paint koji mjeri brzinu učitavanja, Interaction to Next Paint koji mjeri responsivnost na korisničke akcije i Cumulative Layout Shift koji mjeri vizuelnu stabilnost stranice. Svaka metrika ima definirane pragove za dobru, potrebno poboljšanje i lošu ocjenu. Cilj je da 75 posto posjeta stranici ima dobre ocjene za sve tri metrike. Razumijevanje svake metrike i tehnika za njenu optimizaciju je ključ za postizanje visokih ocjena.

Largest Contentful Paint (LCP)

Što mjeri LCP

LCP mjeri vrijeme potrebno da se najveći vidljiv element na stranici učita u viewport-u. Ovaj element je obično hero slika, veliki naslov ili video poster. Dobra ocjena je LCP ispod 2.5 sekunde, između 2.5 i 4 sekunde zahtijeva poboljšanje, a iznad 4 sekunde je loša ocjena. LCP je najvažnija metrika za percepciju brzine jer korisnici smatraju da je stranica učitana kada vide glavni sadržaj bez obzira da li su se svi elementi završili sa učitavanjem.

Optimizacija slika

Slike su najčešći uzrok lošeg LCP-a jer su obično najveći element na stranici. Koristite modere formate poput WebP ili AVIF koji pružaju istu kvalitet slike uz 25 do 50 posto manju veličinu datoteke u usporedbi sa JPEG-om. Podesite dimenzije slika na točnu veličinu koja se prikazuje umjesto da šaljete sliku od 4000 piksela za prikaz u 800 piksela. Responsive images sa srcset atributom omogućuju pregledniku da izabere optimalnu veličinu za svaki uređaj.

Preload hint za LCP sliku kaže pregledniku da počne sa preuzimanjem slike čim je moguće bez čekanja da parser dođe do img taga. Dodajte link rel preload as image href putanja-do-slike u head sekciju stranice. Za hero slike iznad fold-a koristite fetchpriority high atribut koji daje prioritet preuzimanju nad ostalim resursima. Izbjegavajte lazy loading za LCP sliku jer to odgađa njeno učitavanje.

Server response time

Time to First Byte direktno utječe na LCP jer sadržaj ne može početi sa učitavanjem dok server ne odgovori. TTFB ispod 200 milisekundi je cilj za optimalne performanse. Koristite CDN za distribuciju sadržaja sa servera koji je geografski najbliži posjetitelju. Server-side keširanje sa Redis-om ili Memcached-om eliminira potrebu za ponovnim generisanjem stranice za svaki zahtjev. Na BeoHosting-u naši serveri sa SSD diskovima i optimizovanom konfiguracijom pružaju nizak TTFB iz cijele Srbije.

Interaction to Next Paint (INP)

Što mjeri INP

INP je zamijenio First Input Delay u martu 2024 kao metrika za responsivnost. Dok je FID mjerio samo kašnjenje prvog klika, INP mjeri responsivnost svih interakcija tokom cjelokupne posjete stranici i uzima u obzir najgoru interakciju. Dobra ocjena je INP ispod 200 milisekundi. INP mjeri vrijeme od korisničke akcije poput klika, tap-a ili pritiska tastera do sljedećeg vizuelnog ažuriranja ekrana što uključuje procesiranje event handler-a, računanje layout-a i renderovanje.

Optimizacija JavaScript-a

Dugi JavaScript task-ovi blokiraju main thread i sprječavaju preglednik da odgovori na korisničke interakcije. Podijelite duge task-ove na manje dijelove koristeći tehnike poput yield-ovanja sa scheduler.yield ili setTimeout. Code splitting sa dinamičkim import-om učitava samo JavaScript koji je potreban za trenutnu stranicu umjesto cjelokupnog bundle-a. Tree shaking eliminira nekorišćen kod iz finalnog bundle-a smanjujući veličinu i vrijeme parsiranja.

Third-party skripte poput analytics-a, chat widgeta i advertising koda su čest uzrok lošeg INP-a jer se izvršavaju na main thread-u i blokiraju korisničke interakcije. Učitajte ih asinhrono sa async ili defer atributima i odložite njihovu inicijalizaciju dok korisnik ne interaguje sa stranicom. Web Workers omogućuju izvršavanje računski intenzivnih operacija van main thread-a oslobađajući ga za korisničke interakcije.

Debouncing i throttling

Event handler-i koji se izvršavaju na svaki pritisak tastera, pokret miša ili scroll događaj mogu značajno degradirati INP. Debouncing odgađa izvršavanje funkcije dok korisnik ne prestane sa akcijom na primjer 300 milisekundi nakon posljednjeg karaktera u search polju. Throttling ograničava učestalost izvršavanja na primjer jednom u 100 milisekundi za scroll handler. Obje tehnike smanjuju broj izvršavanja event handler-a i oslobađaju main thread za obradu korisničkih interakcija.

Cumulative Layout Shift (CLS)

Što mjeri CLS

CLS mjeri vizuelnu stabilnost stranice kvantifikujući koliko se elementi neočekivano pomiču tokom učitavanja. Dobra ocjena je CLS ispod 0.1. Layout shift se dešava kada vidljiv element promijeni svoju poziciju iz jednog renderovanog frejma u drugi bez korisničke akcije. Tipični uzroci su slike bez definisanih dimenzija, fontovi koji se učitavaju kasno, dinamički ubačen sadržaj iznad vidljivog dijela i reklame koje se učitavaju sa zakašnjenjem.

Dimenzije za slike i video

Uvijek definirajte width i height atribute na img i video elementima. Ovo omogućuje pregledniku da rezervira prostor prije nego što se resurs učita sprječavajući pomjeranje sadržaja ispod. CSS aspect-ratio properti je moderna alternativa koja automatski izračunava dimenzije na osnovu definisanog odnosa. Za responsive slike koristite CSS max-width 100 posto i height auto uz definirane HTML atribute za width i height koji osiguravaju točan aspect ratio.

Font loading strategija

Web fontovi koji se učitavaju kasno mogu izazvati FOIT ili FOUT efekte koji pomiču sadržaj. Font-display swap prikazuje fallback font odmah i zamjenjuje ga web fontom kada se učita ali ova zamjena može izazvati layout shift ako se fontovi značajno razlikuju u dimenzijama. Preload hint za kritične fontove ubrzava njihovo učitavanje. Size-ađust deskriptor u font-face deklaraciji usklađuje dimenzije fallback fonta sa web fontom minimizirajući shift pri zamijeni.

Dinamički sadržaj

Reklame, cookie baneri, notifikacije i dinamički ubačen sadržaj su česti uzroci CLS-a jer zauzimaju prostor koji pomiče ostatak stranice. Rezervišite prostor za reklame sa min-height CSS svojstvom čak i prije nego što se reklamni kod učita. Cookie baner postavite na vrh ili dno ekrana sa fixed pozicijom da ne pomiče sadržaj ispod. Za sadržaj koji se učitava asinhrono poput slajdera ili infinite scroll-a koristite skeleton placeholder-e koji zauzimaju isti prostor kao konačni sadržaj.

Alati za mjerenje

Laboratorijski podaci

Google Lighthouse u Chrome DevTools-u pruža laboratorijsko mjerenje Core Web Vitals na vašem računalu. PageSpeed Insights kombinira laboratorijske i terenske podatke i daje konkretne preporuke za optimizaciju. WebPageTest pruža detaljniji uvid sa waterfall dijagramima, filmstrip prikazom učitavanja i mogućnošću testiranja sa različitih lokacija i uređaja. Lighthouse CI omogućuje automatsko mjerenje performansi pri svakom deploy-u kao dio CI/CD pipeline-a.

Terenski podaci

Chrome User Experience Report pruža realne podatke o Core Web Vitals od stvarnih korisnika Chrome preglednika. Google Search Console prikazuje Core Web Vitals izvještaj za vaš sajt sa identifikacijom URL-ova koji trebaju poboljšanje. Web Vitals JavaScript biblioteka od Google-a omogućuje prikupljanje metrika od vaših posjetitelja i slanje u analytics sistem. Terenski podaci su važniji od laboratorijskih jer odražavaju stvarno iskustvo korisnika na različitim uređajima i mrežama.

Utjecaj hostinga na Core Web Vitals

Server performanse

Kvalitet hostinga direktno utječe na TTFB a samim tim i na LCP. Dijeljeni hosting sa preopterećenim serverima može rezultirati TTFB od preko sekunde što praktično onemogućava postizanje dobrog LCP-a. SSD diskovi, dovoljno RAM memorije i optimizirana server konfiguracija su minimum za dobre performanse. PHP verzija 8.2 ili novija sa OPcache-om značajno ubrzava izvršavanje PHP koda u usporedbi sa starijim verzijama.

Na BeoHosting-u naši optimizirani hosting paketi su podešeni za Core Web Vitals sa NVMe SSD diskovima, HTTP/2 i HTTP/3 podrškom, Brotli kompresijom i server-level keširanjem. LiteSpeed web server koji koristimo pruža superiorne performanse u usporedbi sa Apache-om posebno za WordPress sajtove sa LiteSpeed Cache pluginom. Naša infrastruktura u Srbiji osigurava nizak latency za domaće posjetitelje što direktno poboljšava TTFB i LCP metrike.

Zaključak

Optimizacija Core Web Vitals zahtijeva sistematičan pristup sa fokusom na slike i server za LCP, JavaScript optimizaciju za INP i vizuelnu stabilnost za CLS. Koristite alate za mjerenje da identificirate problematične stranice i pratite napredak nakon svake optimizacije. Kombinacija kvalitetnog hostinga, optimizovanog koda i pravilno konfigurisanog keširanja može značajno poboljšati sve tri metrike i osigurati bolje pozicije u Google pretraži.