Core Web Vitals nakon INP-a: što zapravo optimizirati 2026.

INP era nije olakšala rad na performansama. Učinila je neuspjehe iskrenijima. U izvješću Chrome UX Report iz kolovoza 2026. samo 55,6 % izvora prolazi sva tri Core Web Vitalsa. LCP je bio dobar na 68,1 % izvora, CLS na 81,5 %, a INP na 85,3 %.[1] Ukupna stopa prolaska dosegla je vrhunac od 56,5 % u ožujku, dok je dobar INP pao s 87,2 % na 85,3 % do kolovoza. Chromeove bilješke o izdanju kažu da uzrok te regresije još nije poznat.[1]

To je korisna ispravka uobičajenog savjeta „samo poboljšajte Lighthouse rezultat“. Pragovi se nisu promijenili: zadovoljavajuće iskustvo i dalje znači LCP do 2,5 sekunde, INP do 200 milisekundi i CLS do 0,1 na 75. percentilu terenskih podataka.[2][3] Tvrdnja da je Google tiho promijenio cilj LCP-a na 2,0 sekunde 2026. nije potkrijepljena trenutnom Googleovom dokumentacijom.[2]

Počnite s LCP-om, a ne s INP-om

LCP ostaje najveći statistički jaz. Slike su LCP element na 85,3 % desktop stranica i 76 % mobilnih stranica u podacima Web Almanac 2025, objavljenima u siječnju 2026.[4] Ipak otprilike 16–17 % stranica još uvijek lazy-loada tu sliku, a samo 17 % mobilnih stranica s LCP slikom postavlja fetchpriority="high".[4]

Za hero sliku uklonite loading="lazy", koristite ispravno dimenzioniranu WebP ili AVIF varijantu i dodajte eksplicitan visoki prioritet dohvaćanja:

<img src="/images/hero.avif"
     width="1280" height="720"
     fetchpriority="high"
     decoding="async"
     alt="Nadzorna ploča proizvoda">

Ne preloadajte svaku veliku sliku. Preloadajte samo resurs koji je LCP kandidat na toj ruti i pobrinite se da URL preloada odgovara konačnom srcset i sizes odabiru. Ako je slika hostana drugdje, uračunajte 16–18 % LCP slika koje su cross-host dodavanjem usko ograničenog preconnect ili, još bolje, posluživanjem resursa s istog izvora.[4]

Zatim podijelite LCP na četiri kašnjenja: TTFB, kašnjenje učitavanja resursa, trajanje učitavanja resursa i kašnjenje renderiranja. Samo 44 % mobilnih stranica ima dobar TTFB ispod 0,8 sekundi.[4] CDN ne može popraviti spor upit izvora, promašaj predmemorije koji ponovno gradi stranicu ili lanac fontova i CSS-a koji blokira renderiranje. Izmjerite svaki segment prije odabira rješenja.

Pronađite interakciju koju laboratorijski alati propuštaju

INP je terenska metrika, pa stranica koja izgleda dobro u sintetičkom testu i dalje može djelovati slomljeno na srednjerazrednom telefonu. Almanac 2025. pronašao je dobar INP na 77 % mobilnih izvora naspram 97 % na desktopu. Sekundarne stranice bile su gore od početnih: 69 % naspram 80 % dobrog INP-a na mobilnim uređajima.[4] Filtri, obrasci za naplatu, karuseli, preklopni prozori pretrage i ugrađeni widgeti zaslužuju vlastita mjerenja.

Počnite s sporom interakcijom, a ne s ciljem veličine paketa. Razbijte duge zadatke kako bi preglednik mogao iscrtati između dijelova, premjestite nekritične poslove izvan handlera unosa i ustupite mjesto prije skupih DOM ažuriranja. Uklonite sinkrone čitanja layouta nakon pisanja, posebno obrasce koji izmjenjuju promjene classList s getBoundingClientRect(). Oznake trećih strana treba mjeriti po izvoru i učitavati samo kada korisnik dođe do značajke koja im je potrebna.

2026. Long Animation Frames API praktičan je način da se pripiše problem INP-a. Može izložiti izvor skripte, prisiljeni rad stila ili layouta te trajanje blokiranja iza sporog kadra.[5] Dodajte tu atribuciju u RUM uz naziv interakcije i rutu. web-vitals može vam reći da je interakcija loša; LoAF pomaže reći koji je kod učinio lošim.

Ne optimizirajte samo početnu stranicu. Brža početna stranica može sakriti sporu mrežu proizvoda ili područje s puno obrazaca u vašem zbirnom rezultatu. Pratite rutu i vrstu interakcije, zatim popravite najgori ponovljivi put prvi.

CLS je i dalje uglavnom mehanički

CLS je najbolje prolazna metrika u najnovijem CrUX snimku, ali preostali neuspjesi često su lako uklonjivi. Šezdeset dva posto mobilnih stranica još uvijek sadrži barem jednu sliku bez eksplicitnih dimenzija, a medijalna stranica ima dvije takve slike.[4] Postavite width i height ili pouzdani aspect-ratio prije nego što zahtjev završi. Rezervirajte prostor za oglase, natpise o suglasnosti, preporučene slotove i ugrađene elemente prije nego što se učitaju; nemojte ih umetati iznad sadržaja nakon prvog iscrtavanja.

Web fontovi dodaju još jedan izvor pomicanja. Oko 87 % mobilnih stranica koristi web fontove, ali samo 15–16 % ih preloadira.[4] Preloadajte font potreban za prvi viewport, poslužujte samo težine koje koristite i odaberite fallback metrike koje smanjuju zamjenu. Animirajte transform i opacity, a ne svojstva layouta poput top, height ili margin; Almanac je pronašao nekomponirane animacije na 40 % mobilnih stranica.[4]

Provjerite i ponašanje navigacije. Cache-Control: no-store sprječava back/forward cache, a unload handleri i dalje se pojavljuju na otprilike jednoj od deset stranica.[4] Gdje osjetljivi podaci to dopuštaju, zamijenite no-store politikom predmemorije koja čuva bfcache podobnost i zamijenite unload s pagehide ili visibilitychange. Studija slučaja Duda povezala je tu promjenu s poboljšanjem LCP-a od 1,08 postotnih bodova i poboljšanjem CLS-a od 1,80 bodova u CrUX-u.[4]

Pripremite se za mjerenje na razini rute

Jednostranične aplikacije imaju novi razlog za instrumentaciju navigacije. Soft Navigations API ušao je u završno Chrome 147 origin trial, a Core Web Vitals na razini rute postat će vidljivi za podržane soft navigacije kasnije 2026.[6][7] Ruta koja izgleda brzo na početnom dokumentu i dalje može proizvesti loš LCP ili INP nakon klijentske tranzicije. Dajte svakoj značajnoj ruti stabilan naziv u RUM podacima sada.

Za stranice koje kontroliraju sljedeći klik, Speculation Rules mogu učiniti navigaciju bržom prefetchanjem ili prerenderiranjem vjerojatnih odredišta. WordPress 6.8 isporučio je podršku prema zadanim postavkama, a statičke stranice mogu usvojiti istu ideju s konzervativnim allowlistom.[8] Koristite ga za vjerojatne, sigurne stranice, a ne za svaku poveznicu: prerenderiranje nadzorne ploče, naplate ili personaliziranog odgovora može rasipati propusnost ili stvoriti probleme s ispravnošću.

Stoga je playbook za 2026. jednostavan, ali ne generički: učinite stvarnu LCP sliku otkrivenom, razdvojite i pripišite dugi zadatak iza spore interakcije, rezervirajte svaki dinamički pravokutnik i mjerite sekundarne rute jednako pažljivo kao i početnu stranicu. Koristite terenske podatke za odabir sljedećeg popravka, zatim provjerite taj popravak na 75. percentilu na stvarnim uređajima.

Izvori

[1] Chrome UX Report release notes, ažurirano 8. rujna 2026.: https://developer.chrome.com/docs/crux/release-notes [2] Google Search Central, Core Web Vitals and Google Search results: https://developers.google.com/search/docs/appearance/core-web-vitals [3] web.dev, Interaction to Next Paint (INP), ažurirano 2. rujna 2025.: https://web.dev/articles/inp [4] HTTP Archive, 2025 Web Almanac Performance chapter, objavljeno 15. siječnja 2026. i ažurirano 5. svibnja 2026.: https://almanac.httparchive.org/en/2025/performance [5] MDN, Long animation frame timing, ažurirano 27. ožujka 2026.: https://developer.mozilla.org/en-US/docs/Web/API/Performance_API/Long_animation_frame_timing [6] Chrome DevRel, Final Soft Navigations origin trial starting in Chrome 147: https://developer.chrome.com/blog/final-soft-navigations-origin-trial [7] Chrome web-platform documentation, Measuring soft navigations: https://developer.chrome.com/docs/web-platform/soft-navigations [8] WordPress Core, Speculative loading in WordPress 6.8, 6. ožujka 2025.: https://make.wordpress.org/core/2025/03/06/speculative-loading-in-6-8/