Kako poboljšati Core Web Vitals ocenu

Šta su Core Web Vitals

Core Web Vitals su set metrika koje Google koristi za merenje 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 ocenama. Google je ovim potezom jasno stavio do znanja da korisničko iskustvo nije samo stvar dizajna već merljiv tehnički parametar koji utiče na vidljivost u pretraži.

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

Largest Contentful Paint (LCP)

Šta meri LCP

LCP meri vreme 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 ocena je LCP ispod 2.5 sekunde, između 2.5 i 4 sekunde zahteva poboljšanje, a iznad 4 sekunde je loša ocena. 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 fajla u poređenju sa JPEG-om. Podesite dimenzije slika na tačnu veličinu koja se prikazuje umesto da šaljete sliku od 4000 piksela za prikaz u 800 piksela. Responsive images sa srcset atributom omogućavaju pregledaču da izabere optimalnu veličinu za svaki uređaj.

Preload hint za LCP sliku kaže pregledaču 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. Izbegavajte lazy loading za LCP sliku jer to odlaže njeno učitavanje.

Server response time

Time to First Byte direktno utič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 posetiocu. Server-side keširanje sa Redis-om ili Memcached-om eliminiše potrebu za ponovnim generisanjem stranice za svaki zahtev. Na BeoHosting-u naši serveri sa SSD diskovima i optimizovanom konfiguracijom pružaju nizak TTFB iz cele Srbije.

Interaction to Next Paint (INP)

Šta meri INP

INP je zamenio First Input Delay u martu 2024 kao metrika za responsivnost. Dok je FID merio samo kašnjenje prvog klika, INP meri responsivnost svih interakcija tokom celokupne posete stranici i uzima u obzir najgoru interakciju. Dobra ocena je INP ispod 200 milisekundi. INP meri vreme od korisničke akcije poput klika, tap-a ili pritiska tastera do sledeć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 sprečavaju pregledač da odgovori na korisničke interakcije. Podelite duge task-ove na manje delove 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 umesto celokupnog bundle-a. Tree shaking eliminiše nekorišćen kod iz finalnog bundle-a smanjujući veličinu i vreme 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ćavaju 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 odlaže izvršavanje funkcije dok korisnik ne prestane sa akcijom na primer 300 milisekundi nakon poslednjeg karaktera u search polju. Throttling ograničava učestalost izvršavanja na primer jednom u 100 milisekundi za scroll handler. Obe tehnike smanjuju broj izvršavanja event handler-a i oslobađaju main thread za obradu korisničkih interakcija.

Cumulative Layout Shift (CLS)

Šta meri CLS

CLS meri vizuelnu stabilnost stranice kvantifikujući koliko se elementi neočekivano pomeraju tokom učitavanja. Dobra ocena je CLS ispod 0.1. Layout shift se dešava kada vidljiv element promeni 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 dela i reklame koje se učitavaju sa zakašnjenjem.

Dimenzije za slike i video

Uvek definišite width i height atribute na img i video elementima. Ovo omogućava pregledaču da rezerviše prostor pre nego što se resurs učita sprečavajući pomeranje 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 definisane HTML atribute za width i height koji obezbeđuju tačan aspect ratio.

Font loading strategija

Web fontovi koji se učitavaju kasno mogu izazvati FOIT ili FOUT efekte koji pomeraju sadržaj. Font-display swap prikazuje fallback font odmah i zamenjuje ga web fontom kada se učita ali ova zamena 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 zameni.

Dinamički sadržaj

Reklame, cookie baneri, notifikacije i dinamički ubačen sadržaj su česti uzroci CLS-a jer zauzimaju prostor koji pomera ostatak stranice. Rezervišite prostor za reklame sa min-height CSS svojstvom čak i pre nego što se reklamni kod učita. Cookie baner postavite na vrh ili dno ekrana sa fixed pozicijom da ne pomera 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 merenje

Laboratorijski podaci

Google Lighthouse u Chrome DevTools-u pruža laboratorijsko merenje Core Web Vitals na vašem računaru. PageSpeed Insights kombinuje 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ćava automatsko merenje performansi pri svakom deploy-u kao deo CI/CD pipeline-a.

Terenski podaci

Chrome User Experience Report pruža realne podatke o Core Web Vitals od stvarnih korisnika Chrome pregledača. Google Search Console prikazuje Core Web Vitals izveštaj za vaš sajt sa identifikacijom URL-ova koji trebaju poboljšanje. Web Vitals JavaScript biblioteka od Google-a omogućava prikupljanje metrika od vaših posetilaca 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.

Uticaj hostinga na Core Web Vitals

Server performanse

Kvalitet hostinga direktno utiče na TTFB a samim tim i na LCP. Deljeni 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 optimizovana server konfiguracija su minimum za dobre performanse. PHP verzija 8.2 ili novija sa OPcache-om značajno ubrzava izvršavanje PHP koda u poređenju sa starijim verzijama.

Na BeoHosting-u naši optimizovani 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 poređenju sa Apache-om posebno za WordPress sajtove sa LiteSpeed Cache pluginom. Naša infrastruktura u Srbiji obezbeđuje nizak latency za domaće posetioce što direktno poboljšava TTFB i LCP metrike.

Zaključak

Optimizacija Core Web Vitals zahteva sistematičan pristup sa fokusom na slike i server za LCP, JavaScript optimizaciju za INP i vizuelnu stabilnost za CLS. Koristite alate za merenje da identifikujete 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 obezbediti bolje pozicije u Google pretraži.