Kako izboljšati oceno Core Web Vitals

Kaj so Core Web Vitals

Core Web Vitals so nabor metrik, ki jih Google uporablja za merjenje uporabniške izkušnje na spletnih straneh. Od leta 2021 so te metrike dejavnik uvrstitve v Google iskanju, kar pomeni, da ima spletna stran z boljšimi Core Web Vitals prednost v rezultatih iskanja pred spletno stranjo s slabšimi ocenami. Google je s to potezo jasno sporočil, da uporabniška izkušnja ni samo stvar dizajna, ampak merljiv tehnični parameter, ki vpliva na vidnost v iskanju.

Tri glavne metrike so Largest Contentful Paint, ki meri hitrost nalaganja, Interaction to Next Paint, ki meri odzivnost na uporabniške akcije, in Cumulative Layout Shift, ki meri vizualno stabilnost strani. Vsaka metrika ima določene prage za dobro oceno, potrebno izboljšanje in slabo oceno. Cilj je, da ima 75 odstotkov obiskov strani dobre ocene za vse tri metrike. Razumevanje vsake metrike in tehnik za njeno optimizacijo je ključ za doseganje visokih ocen.

Largest Contentful Paint (LCP)

Kaj meri LCP

LCP meri čas, potreben, da se največji vidni element na strani naloži v viewportu. Ta element je običajno hero slika, velik naslov ali video poster. Dobra ocena je LCP pod 2,5 sekunde, med 2,5 in 4 sekundami zahteva izboljšanje, nad 4 sekundami pa je slaba ocena. LCP je najpomembnejša metrika za zaznavanje hitrosti, saj uporabniki menijo, da je stran naložena, ko vidijo glavno vsebino, ne glede na to, ali so se vsi elementi končali z nalaganjem.

Optimizacija slik

Slike so najpogostejši vzrok slabega LCP, saj so običajno največji element na strani. Uporabljajte moderne formate, kot sta WebP ali AVIF, ki zagotavljajo enako kakovost slike z 25 do 50 odstotkov manjšo velikostjo datoteke v primerjavi z JPEG. Dimenzije slik nastavite na natančno velikost, ki se prikazuje, namesto pošiljanja slike velikosti 4000 pikslov za prikaz pri 800 pikslih. Odzivne slike z atributom srcset omogočajo brskalniku, da izbere optimalno velikost za vsako napravo.

Preload hint za LCP sliko brskalniku pove, naj začne s prenosom slike, ko je to mogoče, brez čakanja, da parser pride do oznake img. Dodajte link rel preload as image href pot-do-slike v sekcijo head strani. Za hero slike nad fold uporabljajte atribut fetchpriority high, ki daje prednost prenosu pred drugimi viri. Izogibajte se lazy loadingu za LCP sliko, saj odloži njeno nalaganje.

Odzivni čas strežnika

Time to First Byte neposredno vpliva na LCP, saj se vsebina ne more začeti nalagati, dokler strežnik ne odgovori. TTFB pod 200 milisekundami je cilj za optimalne zmogljivosti. Uporabljajte CDN za distribucijo vsebine s strežnika, ki je geografsko najbližji obiskovalcu. Predpomnjenje na strežniku z Redisom ali Memcachedom odpravi potrebo po ponovnem generiranju strani za vsako zahtevo. Pri BeoHostingu naši strežniki s SSD diski in optimizirano konfiguracijo zagotavljajo nizek TTFB iz cele Slovenije.

Interaction to Next Paint (INP)

Kaj meri INP

INP je marca 2024 nadomestil First Input Delay kot metriko za odzivnost. Medtem ko je FID meril samo zakasnitev prvega klika, INP meri odzivnost vseh interakcij med celotnim obiskom strani in upošteva najslabšo interakcijo. Dobra ocena je INP pod 200 milisekundami. INP meri čas od uporabniške akcije, kot so klik, tap ali pritisk tipke, do naslednjega vizualnega posodabljanja zaslona, kar vključuje procesiranje event handlerjev, izračun layouta in renderiranje.

Optimizacija JavaScripta

Dolgi JavaScript opravki blokirajo main thread in preprečujejo brskalniku, da bi se odzival na uporabniške interakcije. Dolge opravke razdelite na manjše dele z uporabo tehnik, kot je yieldanje s scheduler.yield ali setTimeout. Code splitting z dinamičnim importom naloži samo JavaScript, ki je potreben za trenutno stran, namesto celotnega bundla. Tree shaking odpravi neuporabljeno kodo iz končnega bundla in zmanjša velikost in čas razčlenjevanja.

Skripte tretjih oseb, kot so analitika, chat widgeti in oglaševalska koda, so pogost vzrok slabega INP, saj se izvajajo na main thread in blokirajo uporabniške interakcije. Naložite jih asinhrono z atributi async ali defer in odložite njihovo inicializacijo, dokler uporabnik ne interagira s stranjo. Web Workers omogočajo izvajanje računsko intenzivnih operacij izven main threada in ga osvobodijo za uporabniške interakcije.

Debouncing in throttling

Event handlerji, ki se izvajajo ob vsakem pritisku tipke, premiku miške ali dogodku drsenja, lahko bistveno degradirajo INP. Debouncing odloži izvajanje funkcije, dokler uporabnik ne preneha z akcijo, na primer 300 milisekund po zadnjem znaku v iskalnem polju. Throttling omeji pogostost izvajanja, na primer enkrat na 100 milisekund za scroll handler. Obe tehniki zmanjšata število izvajanj event handlerjev in osvobodita main thread za obdelavo uporabniških interakcij.

Cumulative Layout Shift (CLS)

Kaj meri CLS

CLS meri vizualno stabilnost strani in kvantificira, koliko se elementi nepričakovano premikajo med nalaganjem. Dobra ocena je CLS pod 0,1. Layout shift se zgodi, ko viden element spremeni svojo pozicijo iz enega renderiranega frejma v drugega brez uporabniške akcije. Tipični vzroki so slike brez določenih dimenzij, fonti, ki se nalagajo kasno, dinamično vstavljena vsebina nad vidnim delom in oglasi, ki se nalagajo z zakasnitvijo.

Dimenzije za slike in video

Vedno določite atributa width in height na elementih img in video. To omogoča brskalniku, da rezervira prostor pred nalaganjem vira in tako prepreči premikanje vsebine spodaj. CSS lastnost aspect-ratio je moderna alternativa, ki samodejno izračuna dimenzije na podlagi določenega razmerja. Za odzivne slike uporabite CSS max-width 100 odstotkov in height auto skupaj z določenimi HTML atributi za width in height, ki zagotavljajo natančno razmerje stranic.

Strategija nalaganja fontov

Spletni fonti, ki se nalagajo kasno, lahko povzročijo FOIT ali FOUT učinke, ki premikajo vsebino. Font-display swap takoj prikaže fallback font in ga zamenja s spletnim fontom, ko se naloži, vendar lahko ta zamenjava povzroči layout shift, če se fonti bistveno razlikujejo v dimenzijah. Preload hint za kritične fonte pospeši njihovo nalaganje. Deskriptor size-adjust v deklaraciji font-face uskladi dimenzije fallback fonta s spletnim fontom in zmanjša shift pri zamenjavi.

Dinamična vsebina

Oglasi, banerji za piškotke, obvestila in dinamično vstavljena vsebina so pogosti vzroki CLS, saj zasedajo prostor, ki premika preostanek strani. Rezervirajte prostor za oglase z lastnostjo CSS min-height, tudi preden se naloži oglaševalska koda. Baner za piškotke postavite na vrh ali dno zaslona z fiksno pozicijo, da ne premika vsebine spodaj. Za vsebino, ki se nalaga asinhrono, kot so drsniki ali infinite scroll, uporabljajte skeleton placeholder, ki zasede enak prostor kot končna vsebina.

Orodja za merjenje

Laboratorijski podatki

Google Lighthouse v Chrome DevTools zagotavlja laboratorijsko merjenje Core Web Vitals na vašem računalniku. PageSpeed Insights združuje laboratorijske in terenske podatke ter daje konkretna priporočila za optimizacijo. WebPageTest zagotavlja podrobnejši vpogled z waterfall diagrami, filmstrip prikazom nalaganja in možnostjo testiranja z različnih lokacij in naprav. Lighthouse CI omogoča samodejno merjenje zmogljivosti ob vsakem deployu kot del CI/CD pipelina.

Terenski podatki

Chrome User Experience Report zagotavlja realne podatke o Core Web Vitals dejanskih uporabnikov brskalnika Chrome. Google Search Console prikazuje poročilo Core Web Vitals za vašo spletno stran z identifikacijo URL-jev, ki potrebujejo izboljšanje. Web Vitals JavaScript knjižnica podjetja Google omogoča zbiranje metrik od vaših obiskovalcev in pošiljanje v analitični sistem. Terenski podatki so pomembnejši od laboratorijskih, saj odražajo dejansko izkušnjo uporabnikov na različnih napravah in omrežjih.

Vpliv gostovanja na Core Web Vitals

Zmogljivost strežnika

Kakovost gostovanja neposredno vpliva na TTFB in s tem na LCP. Deljeno gostovanje s preobremenjenimi strežniki lahko privede do TTFB nad sekundo, kar praktično onemogoča doseganje dobrega LCP. SSD diski, dovolj RAM pomnilnika in optimizirana strežniška konfiguracija so minimum za dobre zmogljivosti. PHP različica 8.2 ali novejša z OPcacheom bistveno pospeši izvajanje PHP kode v primerjavi s starejšimi različicami.

Pri BeoHostingu naši optimizirani hosting paketi so nastavljeni za Core Web Vitals z NVMe SSD diski, podporo HTTP/2 in HTTP/3, kompresijo Brotli in predpomnjenjem na ravni strežnika. LiteSpeed spletni strežnik, ki ga uporabljamo, zagotavlja superiorno zmogljivost v primerjavi z Apachejem, zlasti za WordPress spletne strani z vtičnikom LiteSpeed Cache. Naša infrastruktura v Sloveniji zagotavlja nizko latenco za domače obiskovalce, kar neposredno izboljša metrike TTFB in LCP.

Zaključek

Optimizacija Core Web Vitals zahteva sistematičen pristop s poudarkom na slikah in strežniku za LCP, optimizaciji JavaScripta za INP in vizualni stabilnosti za CLS. Uporabljajte orodja za merjenje, da identificirate problematične strani in spremljate napredek po vsaki optimizaciji. Kombinacija kakovostnega gostovanja, optimizirane kode in pravilno konfiguriranega predpomnjenja lahko bistveno izboljša vse tri metrike in zagotovi boljše pozicije v Google iskanju.