2026-03-11 · Uredništvo Baduno · 7 blog.readMin · Blog & Znanje
Razumijevanje Core Web Vitals: tri vrijednosti koje su bitne
LCP, INP, CLS – iza kratica kriju se tri jednostavna pitanja: Koliko brzo vidim nešto? Koliko brzo stranica reagira? Poskakuje li pri učitavanju?
LCP: prvi dojam
Largest Contentful Paint mjeri kada je najveći vidljivi element učitan – obično hero slika. Ciljna vrijednost: ispod 2,5 sekunde. Najveća poluga: veličina slike, format slike (WebP/AVIF) i prioritizacija glavne slike.
INP: reaktivnost
Interaction to Next Paint mjeri koliko brzo stranica reagira na klikove i unose. Tromi stranice gotovo uvijek imaju previše JavaScripta – svaka ušteđena skripta je dobiveno vrijeme reagiranja.
CLS: stabilnost
Cumulative Layout Shift mjeri poskakuju li sadržaji pri učitavanju. Glavni uzroci: slike bez dimenzija, reklame koje se naknadno učitavaju i web fontovi. Rješenje je obično jednostavno – width i height atributi, rezervirana područja.
Zašto je to važno
Google koristi vrijednosti kao signal za rangiranje, ali važnije: korisnici ih osjećaju. Svaka sekunda vremena učitavanja košta mjerljive konverzije. Statičke, vitke stranice – poput ove – postižu ciljne vrijednosti strukturno, a ne doradom.
Mjerenje Core Web Vitala: alati i izvori podataka
Za pouzdano mjerenje Core Web Vitala dostupno je nekoliko alata. PageSpeed Insights pruža i terenske podatke iz izvješća Chrome User Experience (CrUX) i laboratorijske podatke iz Lighthousea. CrUX izvješće odražava stvarna korisnička iskustva i trebalo bi poslužiti kao primarni izvor. Lighthouse, s druge strane, simulira prosječnu vezu i prikladan je za ciljane savjete za optimizaciju. Za kontinuirano praćenje preporučuje se integracija s alatima poput Search Console ili rješenjima trećih strana koja prikazuju povijesne trendove. Važno: ne oslanjajte se samo na laboratorijske vrijednosti – one mogu odstupati od stvarnosti. Kombinirajte obje perspektive i testirajte na različitim uređajima i mrežama.
Česte pogreške pri optimizaciji
Mnoge web stranice podbace zbog izbjegljivih pogrešaka. Klasik: slike bez navedenih visine i širine, što uzrokuje CLS. Također, odgođeno učitavanje vidljivog sadržaja (Lazy Loading) za hero sliku pogoršava LCP. Još jedna zamka su neoptimizirani fontovi – fontovi s `font-display: swap` sprječavaju nevidljivi tekst, ali mogu uzrokovati pomake u rasporedu ako je zamjenski font drukčije širine. Kod responzivnosti (INP) čest su uzrok dugotrajni zadaci na glavnoj niti zbog skripti trećih strana, alata za analitiku ili resursa koji se ne učitavaju asinkrono. Također, previše CSS i JS datoteka bez objedinjavanja opterećuje put iscrtavanja. Izbjegnite ove pogreške tako što ćete svaku promjenu provjeriti na njezin utjecaj na tri metrike i raditi s proračunom za vrijeme učitavanja i izvođenje skripti.
Međuodnos LCP, INP i CLS
Tri Core Web Vitala nisu neovisna jedan o drugome. Optimizacije za jednu metriku mogu utjecati na drugu. Primjer: ušteda na JavaScriptu poboljšava ne samo INP, već i smanjuje vrijeme učitavanja glavnog sadržaja (LCP) jer se stablo iscrtavanja brže gradi. Istovremeno, manje dinamičkog sadržaja smanjuje rizik od pomaka rasporeda (CLS). Drugi primjer: korištenje `font-display: optional` sprječava nevidljivost teksta, ali može dovesti do toga da se font nikada ne učita – što narušava čitljivost, ali poboljšava CLS vrijednosti. Ovdje je potrebno pronaći kompromise: dajte prioritet metrici koja ima najveći utjecaj na vaše korisnike. Obično je LCP najkritičniji za percepciju, slijedi INP za interaktivne stranice i CLS za sadržajno bogate rasporede.
LCP, INP, CLS – iza kratica kriju se tri jednostavna pitanja: Koliko brzo vidim nešto? Koliko brzo stranica reagira? Poskakuje li pri učitavanju?
Mobilni i desktop: Različiti izazovi
Isti pragovi za LCP (2,5 s), INP (200 ms) i CLS (0,1) vrijede za mobilne i desktop uređaje. Ipak, pristupi optimizaciji se razlikuju. Mobilni uređaji imaju slabije procesore i sporije veze, stoga nepotreban JavaScript ima posebno negativan učinak. Također, propusnost mreže je manja – velike slike više opterećuju LCP. Osim toga, veličina zaslona je manja, što pomake rasporeda zbog naknadno učitavanih elemenata čini manje tolerabilnima. Na desktopu, s druge strane, pretjeran broj skripti može narušiti responzivnost jer se blokira glavna nit. Stoga uvijek prvo testirajte na mobilnim uređajima s 3G vezom. Koristite način usporavanja u Lighthouseu ili simulirajte stvarne uvjete. Mobilno optimizirana stranica u pravilu je dobra i za desktop – obrnuto ne vrijedi.
Optimizacija poslužitelja i mreže: Nevidljiva poluga
Core Web Vitals ne počinju tek u pregledniku, već već na poslužitelju. Time to First Byte (TTFB) pokazuje koliko je vremena poslužitelju potrebno da odgovori na zahtjev. Visok TTFB odgađa sve ostalo – LCP pati jer prvi sadržaj stiže kasnije. Stoga optimizirajte svoju poslužiteljsku infrastrukturu: koristite mreže za isporuku sadržaja (CDN) kako biste sadržaj geografski približili korisnicima. Statički elementi poput slika, CSS-a i JavaScripta mogu se izvrsno isporučivati putem CDN-a, dok se dinamički sadržaj može ubrzati inteligentnim predmemoriranjem ili rubnim računalstvom. Još jedna poluga je odabir pružatelja hostinga: dijeljeni hosting s mnogo susjeda može podići TTFB. Odlučite se za namjenske poslužitelje ili cloud rješenja s brzom vezom. Također, poslužiteljsko rendiranje (SSR) u usporedbi sa statičkom generacijom stranica (SSG) ima učinak: SSR dinamički stvara HTML, što povećava TTFB, dok SSG isporučuje unaprijed izračunate HTML datoteke i izuzetno je brz. Za mnoge web stranice hibridni model ima smisla: statički sadržaji putem SSG-a, dinamički dijelovi putem API poziva. Redovito mjerite TTFB alatima poput WebPageTesta i težite vrijednostima ispod 200 milisekundi. Imajte na umu: svaka milisekunda latencije poslužitelja dodaje se ukupnom vremenu učitavanja – a korisnici su nestrpljivi.
Proračuni performansi: Aktivno upravljanje Core Web Vitals
Umjesto reaktivnog optimiziranja, trebali biste integrirati proračune performansi u svoj razvojni proces. Proračun performansi postavlja obvezujuće gornje granice za metrike poput LCP, INP ili CLS – slično financijskom proračunu koji se ne smije prekoračiti. Definirajte za svaku važnu stranicu ciljne vrijednosti koje su 10 do 20 posto niže od službenih pragova kako biste imali zalihu za oscilacije. Pratite ove proračune automatizirano u svojoj CI cjevovodu: svaka se build provjerava, a ako se proračun prekorači, build ne uspijeva. Na taj način sprječavate da nove značajke pogoršaju korisničko iskustvo. Podršku za alate pružaju Lighthouse CI, Sitespeed.io ili vlastiti skriptovi koji procjenjuju Core Web Vitals iz Lighthouse ili stvarnih korisničkih podataka. Vodite računa o uključivanju i laboratorijskih i terenskih podataka. Proračun za LCP mogao bi, na primjer, iznositi 2,0 sekunde u laboratoriju i 2,3 sekunde na terenu (75. percentil). Za INP su realni 150 ms u laboratoriju i 180 ms na terenu. CLS bi trebao ostati ispod 0,05. Komunicirajte ove proračune u timu i učinite ih sastavnim dijelom definicije gotovog (Definition of Done). Tako osiguravate da performanse nisu naknadni dodatak, već da se o njima razmišlja od samog početka.
Optimizacija na strani poslužitelja: TTFB i proračun renderiranja
Core Web Vitals se ne mogu poboljšati samo optimizacijom frontenda. Često podcijenjen čimbenik je vrijeme odgovora poslužitelja (Time to First Byte, TTFB). Spor poslužitelj odgađa početak cijelog procesa učitavanja. Težite TTFB-u ispod 800 milisekundi. Koristite mehanizme predmemoriranja poput Redis ili Varnish, optimizirajte upite baze podataka i oslonite se na brzu infrastrukturu hostinga. I odabir mreže za isporuku sadržaja (CDN) igra ulogu: CDN smanjuje geografsku udaljenost do korisnika i brže isporučuje statične resurse. Osim toga, trebali biste definirati proračun renderiranja – fiksno ograničenje maksimalnog vremena izvođenja skripti tijekom izgradnje stranice. Podijelite proračun na LCP, INP i CLS. Na primjer, LCP može zauzimati najviše 1,8 sekundi vremena poslužitelja i 0,7 sekundi vremena klijenta. Pratite usklađenost alatima poput Lighthouse ili WebPageTest. Korištenjem poslužiteljskog renderiranja (SSR) ili statičke generacije smanjujete opterećenje klijenta. Međutim, imajte na umu da SSR može povećati TTFB – testirajte različite pristupe. Uravnotežena kombinacija performansi poslužitelja i CDN-a osigurava stabilne Core Web Vitalse.
Praćenje i kontinuirani nadzor u radu
Jednokratne optimizacije nisu dovoljne – Core Web Vitalse treba trajno nadzirati. Integrirajte praćenje stvarnih korisnika (RUM) za prikupljanje stvarnih podataka o korisnicima. Alati poput Google Analytics s izvješćem o Web Vitals ili open-source rješenja poput Grafane s CrUX API-jem omogućuju povijesne usporedbe. Postavite granične vrijednosti i konfigurirajte upozorenja kada vrijednosti premaše ciljne metrike (LCP > 2,5 s, INP > 200 ms, CLS > 0,1). Obratite pozornost na trendove: ako se metrika pogoršava tijekom tjedana, može biti potrebno refaktoriranje. Osobito kod redovitih ažuriranja sadržaja (blog, trgovina, vijesti) važno je kontinuirano praćenje. Također, vanjske promjene – poput uključivanja novih skripti trećih strana – mogu pogoršati vrijednosti. Prije svakog izdanja provedite Lighthouse test i dokumentirajte rezultate. Dodatno se preporučuje sintetičko praćenje s više lokacija pod kontroliranim uvjetima. Tako rano prepoznajete probleme prije nego što utječu na korisnike. Imajte na umu: Core Web Vitals su kontinuirani proces, a ne jednokratni projekt. Samo sustavnim nadzorom vaše će stranice dugoročno ostati performantne i konkurentne u rezultatima pretraživanja.
blog.faqT
Kako mogu poboljšati Core Web Vitals u svom CMS-u poput WordPressa?
U WordPressu pomažu optimizirana tema, predmemorijski dodatak i kompresija slika. Izbjegavajte prekomjerne dodatke, osobito one koji učitavaju JavaScript. Koristite dodatak za performanse koji onemogućuje lijeno učitavanje slika (za vidljivi sadržaj) i izdvaja kritični CSS. Testirajte rezultate pomoću PageSpeed Insights.
Jesu li Core Web Vitals izravni signal za rangiranje od Googlea?
Da, Core Web Vitals su od lipnja 2021. dio Page Experience signala u rangiranju. Međutim, oni su samo jedan od mnogih čimbenika. Dobro korisničko iskustvo brzim vremenima učitavanja i stabilnim izgledom ima mjerljiv utjecaj na konverzije i stope napuštanja – neovisno o rangiranju.
