Kako popraviti INP (Interaction to Next Paint) rezultat na web stranicama?

Kako popraviti INP rezultat na web stranicama? Kratak odgovor: Morate smanjiti opterećenje glavne programske niti koje odgađa sljedeće iscrtavanje ekrana nakon korisnikovog klika, dodira ili interakcije s tastaturom. Da biste to postigli, trebate razbiti duge JavaScript zadatke, ukloniti nepotrebne skripte, olakšati osluškivače događaja, optimizirati resurse koji blokiraju renderiranje, kontrolirati kodove trećih strana i mjeriti podatke stvarnih korisnika. Dobar INP rezultat je 200 ms ili manje; vrijednost između 200 i 500 ms zahtijeva poboljšanje, dok se sve iznad 500 ms smatra lošim.

INP, odnosno Interaction to Next Paint, jedan je od ključnih Core Web Vitals pokazatelja u SEO i studijama korisničkog iskustva za 2026. godinu. Google više ne gleda samo na brzinu otvaranja stranice, već i na to koliko fluidno korisnik može komunicirati sa stranicom nakon što se ona učita. Sporo otvaranje izbornika nakon klika na filter proizvoda, blokiranje gumba za dodavanje u košaricu, kašnjenje mobilnog izbornika ili zastajkivanje prilikom tipkanja u polju obrasca tipični su znakovi INP problema.

U ovom vodiču naučit ćete kako izmjeriti INP vrijednost, pronaći tehnička uska grla koja uzrokuju loš rezultat i primijeniti jasne korake optimizacije bez obzira jeste li developer, vlasnik stranice ili WordPress administrator. Također ćemo se praktičnim primjerima osvrnuti na neizravan utjecaj hosting infrastrukture, korištenja CDN-a i sigurne veze na performanse. Ako želite odabrati infrastrukturu orijentiranu na performanse, možete razmotriti Web hosting paketi i za projekte bazirane na WordPressu WordPress hosting opcije.

Šta je INP i zašto je važan?

INP mjeri ukupnu brzinu odziva korisničkih interakcija na stranici. Korisnik klikne na dugme, promijeni tab, otvori izbornik, upisuje tekst u polje obrasca ili dodirne element na mobilnom uređaju. Preglednik obrađuje tu interakciju, izvršava JavaScript, vrši proračune stilova i layouta te potom stvara novo vizualno stanje na ekranu. Vrijeme koje protekne od interakcije do tog vizualnog ažuriranja je ono što se ocjenjuje s aspekta INP-a.

Prethodnih godina fokus je bio na First Input Delay-u, odnosno FID-u; međutim, FID se fokusirao samo na kašnjenje prve interakcije. INP, s druge strane, sveobuhvatnije ocjenjuje interakcije tokom cijelog životnog ciklusa stranice. Zbog toga bolje reprezentira stvarno korisničko iskustvo na e-trgovini, blogovima, SaaS panelima, korporativnim stranicama i sistemima članstva.

Googleovi preporučeni pragovi su sljedeći:

INP nije važan samo za SEO, već i za stopu konverzije. Na primjer, na stranici kategorije gdje se filter dugme na mobilnom uređaju otvara 700 ms, korisnik može pomisliti da radnja ne funkcioniše i ponovo pritisnuti isto dugme ili napustiti stranicu. Nasuprot tome, interfejsi koji reagiraju u rasponu od 150-180 ms doživljavaju se kao pouzdaniji, brži i profesionalniji.

Kako izmjeriti INP rezultat?

Prije nego što započnete s INP optimizacijom, potrebno je izvršiti ispravno mjerenje. Jer dok vam laboratorijski alati pokazuju procijenjene probleme, podaci stvarnih korisnika odražavaju uvjete uređaja, veze i preglednika na terenu. Najzdraviji pristup je kombinirati obje vrste podataka.

1. Brza provjera pomoću PageSpeed Insights

PageSpeed Insights prikazuje stvarnu korisničku INP vrijednost ako su dostupni podaci iz Chrome User Experience Reporta. Odvojeno analizirajte mobilne i desktop rezultate. Posebno dajte prioritet mobilnim podacima; jer se na telefonima sa slabijim procesorom glavna nit lakše zaguši. Ako je INP vrijednost stranice iznad 200 ms, zabilježite segmente s prilikama i dijagnostikom ispod.

2. Pratite izvještaj Core Web Vitals u Search Consoleu

Izvještaj Core Web Vitals u Google Search Consoleu navodi probleme prema grupama URL-ova. Ovdje možete vidjeti da li su problematični slični predlošci, a ne samo pojedinačna stranica. Na primjer, ako sve stranice s detaljima proizvoda imaju loš INP, problem je najvjerovatnije u temi, skripti košarice, dodatku za komentare ili kodu varijacije proizvoda.

3. Koristite Chrome DevTools Performance panel

Chrome DevTools Performance panel prikazuje koje se JavaScript funkcije izvršavaju u trenutku klika i koji zadaci stvaraju duge zadatke preko 50 ms. Snimite klik na izbornik i analizirajte ljubičaste, žute i zelene blokove na glavnoj niti. Dugi radovi skripti, ponavljajući proračuni stilova i intenzivni layout zadaci su kritični signali za INP.

4. Postavite praćenje stvarnih korisnika

Na projektima s visokim prometom, korištenje RUM-a, odnosno Real User Monitoringa, vrlo je vrijedno. Pomoću Web Vitals biblioteke možete prikupljati INP podatke i analizirati ih na osnovu URL-a, tipa uređaja, preglednika, zemlje i cilja interakcije. Na primjer, podaci mogu pokazati da samo na Android uređajima klik na mobilni izbornik traje 620 ms. Ova informacija vam omogućava preciznu korekciju umjesto općenite optimizacije.

Najčešći uzroci lošeg INP rezultata

Većina INP problema ne proizlazi iz odgovora servera, već iz toga što preglednik obavlja previše posla u trenutku korisničke interakcije. Ipak, infrastruktura, isporuka datoteka, keširanje i ovisnosti o trećim stranama mogu neizravno povećati to opterećenje.

Teški JavaScript fajlovi

Na modernim web stranicama, tema, slider, live chat, reklame, analitika, A/B testiranje, mape i komponente društvenih medija učitavaju veliki broj JavaScript datoteka. Datoteke se ne samo preuzimaju; preglednik ih parsira, kompajlira i izvršava. Ako ovaj proces okupira glavnu nit, odgovor na korisnikov klik će kasniti.

Dugi zadaci

Poslovi glavne niti koji traju duže od 50 ms smatraju se dugim zadacima (long tasks). Jedan zadatak koji traje 300 ms može odgoditi korisnikov klik. Na primjer, skripta koja prilikom klika na dugme za filtriranje ponovo izračunava svih 1000 proizvoda na strani klijenta može lako podići INP vrijednost iznad 500 ms.

Složen DOM i skupi layout poslovi

Previše HTML čvorova, ugniježđene komponente, česte promjene stilova i greška poznata kao layout thrashing (ponavljano mjerenje i pisanje) kvare INP. Posebno mega izbornici, stranice s listingom proizvoda i duge jednostranične aplikacije nose ovaj rizik.

Skripte trećih strana

Reklamne mreže, pikseli za praćenje, alati za toplotne mape, kodovi za live podršku i embedi društvenih medija izvršavaju kodove koji su izvan vaše kontrole. Ako ovi kodovi koriste glavnu nit u trenutku interakcije, čak i vaš čisto napisan interfejs može sporo reagirati.

WordPress dodaci i prenapuhana tema

Na WordPress stranicama svaki dodatak može dodati vlastite CSS i JS datoteke. Ako se skripta dodatka za kontakt formu učitava na cijeloj stranici iako je potrebna samo na stranici kontakta, stvara se nepotrebno opterećenje. Slično tome, vizualni editori, slideri i pop-up dodaci mogu negativno utjecati na mobilni INP rezultat.

Kako popraviti INP rezultat? Plan primjene korak po korak

Praktičan odgovor na pitanje kako popraviti INP rezultat je pristup: izmjeri, izoliraj, smanji, podijeli i ponovo izmjeri. Sljedeći koraci su pripremljeni prema redoslijedu prioriteta koji tehnički timovi primjenjuju na stvarnim projektima.

1. Pronađite najproblematičniju interakciju

Prvo odredite koja interakcija proizvodi loš INP. Da li je to mobilni izbornik, dugme za dodavanje u košaricu, panel filtera, polje za pretragu ili slanje obrasca? Dok snimate u DevTools Performance panelu, ponovite tu radnju nekoliko puta. U snimku, u odjeljku Event Timing ili Interaction, provjerite cilj klika i trajanje.

Konkretan primjer: Na jednom e-commerce sajtu, dugme filtera kategorije proizvodilo je INP od 740 ms. Analiza je pokazala da se prilikom klika sve kartice proizvoda ponovo renderiraju i da se 1800 DOM čvorova istovremeno ažurira. Kada je panel filtera izdvojen u zasebnu komponentu, a ažuriranje liste odgođeno, INP je pao na nivo od 190 ms.

2. Smanjite veličinu JavaScript paketa

Uklanjanje nekorištenog koda jedan je od najefikasnijih koraka za INP. Koristite bundle analyzer da vidite koje biblioteke povećavaju datoteku. Umjesto cijele biblioteke, uvezite samo potrebni modul. Na primjer, umjesto velike biblioteke za datume, mogu se koristiti lakše alternative ili nativni Intl API.

• Isključite nekorištene funkcije teme.
• Ne učitavajte skripte slidera, galerije i animacija tamo gdje nisu potrebne.
• Koristite moderne build alate koji podržavaju tree shaking.
• Ne šaljite kodove admin panela na stranu posjetitelja.
• Stare polyfill datoteke servirajte samo preglednicima kojima su zaista potrebne.

3. Razbijte duge zadatke na manje dijelove

Da bi preglednik mogao odgovoriti na korisničke interakcije, glavna nit se mora redovno prazniti. Umjesto da velike proračune obavljate odjednom, podijelite ih na dijelove. setTimeout, scheduler.postTask, requestIdleCallback ili mogućnosti zakazivanja u framework-ovima mogu se koristiti u tu svrhu. Cilj je stvoriti manje poslove od 20-40 ms umjesto jednog posla od 300 ms.

Na primjer, ako trebate filtrirati i ponovo iscrtati tabelu sa 5000 redova, prvo ažurirajte prvih 50 redova koje korisnik vidi, a ostatak obradite virtualizacijom ili pozadinskim zadacima. Na taj način se rezultat korisnikovog klika brzo pojavljuje, a preostali posao ne blokira iskustvo.

4. Pojednostavite osluškivače događaja

Izvršavanje teških funkcija na svaki click, input, scroll i keydown događaj kvari INP. Posebno je pogrešno slati API zahtjeve pri svakom pritisku tipke u poljima za unos ili ponovo izračunavati cijelu listu. Koristite tehnike debounce i throttle da smanjite učestalost operacija.

• Primijenite debounce od 300 ms na polje za pretragu.
• Preferirajte passive listener za scroll događaje.
• Koristite event delegation umjesto dodavanja listenera na stotine pojedinačnih elemenata.
• Nakon klika prvo pružite vizualnu povratnu informaciju, a težak posao pokrenite nakon toga.

5. Odmah pružite vizualnu povratnu informaciju korisniku

Budući da je INP povezan sa sljedećim iscrtavanjem (paint), važno je stvoriti barem malu vizualnu promjenu odmah nakon korisničke interakcije. Prelazak dugmeta u aktivno stanje, indikator učitavanja, skeleton polje ili prvi kadar otvaranja panela daju korisniku osjećaj da sistem radi. Umjesto da čekate odgovor API-ja i odjednom promijenite cijeli interfejs, dizajnirajte brzu povratnu informaciju i postupno ažuriranje.

6. Smanjite troškove renderiranja i layouta

Ne samo JavaScript, već i CSS i layout utječu na INP. Promjena veličine, pozicije i stila velikog broja elemenata nakon klika je skupa. U CSS animacijama, korištenje transform i opacity umjesto width, height, top i left obično je performantnije. Koristite virtualizaciju za velike liste; ne držite stotine kartica koje nisu vidljive na ekranu u DOM-u.

Izbjegavajte grešku layout thrashinga. To znači da u petlji ne čitate širinu elementa, zatim pišete stil, pa ponovo čitate. Grupirajte operacije čitanja i pisanja. Čak i ovo jednostavno uređenje može uštedjeti desetine milisekundi na složenim stranicama.

7. Kontrolirajte kodove trećih strana

Za svaku eksternu skriptu postavite pitanje: Da li ovaj kod direktno doprinosi konverziji? Ako je doprinos mali, uklonite ga, odgodite ili učitavajte samo na potrebnim stranicama. Imati kod live podrške na stranici plaćanja može biti logično; ali možda nije potrebno da se izvršava pri prvom učitavanju na svim blog objavama. Skripte za reklame i analitiku učitavajte, ako je moguće, sa defer ili async kako biste spriječili da blokiraju kritične interakcije.

8. Prebacite teške proračune koristeći Web Worker

Ako poslovi poput filtriranja proizvoda, obrade velikog JSON-a, enkripcije, transformacije podataka ili složenih proračuna blokiraju glavnu nit, koristite Web Worker. Worker obavlja ove poslove u pozadini; glavna nit nastavlja odgovarati na korisničke interakcije. Ne mora se svaki posao prebaciti u Workera, ali može donijeti ozbiljnu korist za operacije koje troše CPU duže od 100 ms.

9. Optimizirajte troškove frameworka i hidratacije

U strukturama poput Reacta, Vuea, Angulara, Next.js ili Nuxta, trošak hidratacije nakon prvog učitavanja može utjecati na INP. Umjesto da cijelu stranicu činite interaktivnom, razmotrite pristupe poput arhitekture ostrva, djelomične hidratacije ili server components. Sadržaje koji ne zahtijevaju interakciju ostavite statičnima. Učitavanje dijelova poput modala, polja za komentare ili komponente preporuka tek kada korisniku zatrebaju daje bolje rezultate.

10. Smanjite opterećenje dodataka na WordPress stranicama

Ako koristite WordPress, napravite inventar dodataka za INP optimizaciju. Uklonite više dodataka koji rade isti posao. Provjerite da li dodaci za forme, galerije, slidere i pop-up prozore učitavaju datoteke na svim stranicama. Pomoću dodataka za performanse koji imaju opciju isključivanja resursa (asset unload) možete na nivou stranice isključiti nepotrebne CSS i JS datoteke.

Primjer iz prakse: Na jednoj korporativnoj WordPress stranici, INP vrijednost početne stranice na mobilnom uređaju bila je 560 ms. Uklonjen je dodatak za slider, a hero oblast je ponovo izgrađena laganim HTML/CSS-om, pop-up skripta je odgođena za 5 sekundi, a JS datoteka kontakt forme se učitavala samo na stranici kontakta. Kao rezultat, mobilni INP je pao na 210 ms, a nakon naknadnih manjih podešavanja na 175 ms.

Kako hosting i infrastruktura utječu na INP rezultat?

INP je prvenstveno metrika odziva na strani klijenta; to znači da je opterećenje glavne niti u pregledniku presudno. Međutim, hosting infrastruktura nije potpuno nevažna. Brz odgovor servera, ispravno keširanje, moderna PHP verzija, HTTP/2 ili HTTP/3 podrška, CDN i kompresija; osiguravaju bržu i uredniju isporuku datoteka. To pomaže da glavna nit radi kontroliranije, posebno tokom prvog učitavanja.

Na nekvalitetnoj infrastrukturi, visok TTFB, resursi koji kasno pristižu, nedosljedno ponašanje keša i veliko opterećenje servera kvare korisničko iskustvo. Ako WordPress stranica bez keša pri svakom zahtjevu izvodi teške PHP i baze podataka operacije, stranici treba više vremena da postane spremna za interakciju. Stoga, INP rad ne treba potpuno odvajati od LCP i TTFB optimizacija.

• Koristite keširanje na strani servera.
• Preferirajte PHP 8.x i ažurne verzije baza podataka.
• Servirajte statičke datoteke putem CDN-a.
• Omogućite Brotli ili Gzip kompresiju.
• Održavajte SSL/TLS konfiguraciju ažurnom; za sigurnu vezu pogledajte SSL certifikat stranicu.
• Ako pokrećete novi projekat ili brend stranicu, koristite Provjera domene alat za odabir pravog naziva domene.

Tabela prioriteta za INP optimizaciju

Sljedeća tabela sažima koje poboljšanje treba napraviti i kada na tipičnoj web stranici. Rezultati se mogu razlikovati na svakom projektu; zato nakon promjena ponovo izmjerite pomoću PageSpeed Insightsa, Search Consolea i podataka stvarnih korisnika.

Tehnička kontrolna lista za developere

INP poboljšanje treba pretvoriti u kontrolnu listu koja se može pratiti unutar tima. U suprotnom, jednokratni radovi na brzini mogu se pokvariti nakon nekoliko mjeseci s novim dodacima, kampanjskim kodovima i izmjenama dizajna.

• Za svaki kritični predložak, cilj mobilnog INP-a treba postaviti ispod 200 ms.
• U procesima pull requesta treba kontrolirati povećanje veličine bundle-a.
• Prije dodavanja nove skripte treće strane, treba testirati utjecaj na performanse.
• Najmanje interakcije mobilnog izbornika, pretrage, obrasca i kupovine treba izmjeriti DevTools Performance snimkom.
• Duge zadatke treba pokušati svesti ispod 50 ms; ako nije moguće, treba ih razbiti.
• U animacijama preferirati transform i opacity.
• Za velike liste koristiti paginaciju, beskonačni scroll ili virtualizaciju.
• RUM podatke treba izvještavati mjesečno i pratiti upozorenja Search Consolea.

Česte greške u INP optimizaciji

Samo instalirati dodatak za keš

Keš je važan, ali nije jedino rješenje za loš INP. Keš može osigurati bržu isporuku stranice; međutim, ne ispravlja automatski težak JavaScript kod koji se izvršava na klik korisnika. Stoga, keš treba razmatrati zajedno s optimizacijom koda.

Gledati laboratorijski rezultat i zaboraviti stvarnog korisnika

Lighthouse testovi su korisni, ali sami po sebi nisu dovoljni. Stvarni korisnici dolaze s različitim uređajima, mrežama i preglednicima. Posebno Android uređaji niže klase otkrivaju INP probleme koji nisu vidljivi u desktop testovima.

Nasumično odgađanje svih skripti

Tehnike defer i delay moraju se pažljivo primjenjivati. Pogrešna konfiguracija može pokvariti izbornik, košaricu, obrazac ili tok plaćanja. Skripte kritičnih interakcija treba sačuvati, a nepotrebne kodove i kodove trećih strana kontrolirano odgoditi.

Fokusiranje na vizualne performanse i zanemarivanje interakcije

Sažimanje slika je vrlo vrijedno za LCP; međutim, ne rješava uvijek INP problem. Ako je problem u kodu koji se izvršava nakon klika, sama optimizacija slika neće biti dovoljna. Core Web Vitals treba posmatrati holistički.

SEO strategija fokusirana na INP za 2026. godinu

U SEO pristupu za 2026. godinu, tehničke performanse, kvalitet sadržaja i pouzdana infrastruktura ocjenjuju se zajedno. Googleovi AI pregledi i napredna iskustva pretrage teže istaknuti stranice koje korisniku pružaju najbrži i najzadovoljavajući odgovor. Stoga, INP optimizacija nije samo posao developera, već zajednička odgovornost SEO, UX, sadržaja i infrastrukturnih timova.

Na blog objavi, izbornik sadržaja, filter kategorije ili obrazac za komentare moraju raditi brzo; na e-commerce stranici, odabir veličine, promjena varijacije i dodavanje u košaricu moraju trenutno reagirati. Na korporativnim stranicama, obrazac za ponudu, mobilni izbornik i kontakt dugmad ne smiju kasniti. Ako korisnik osjeti da je stranica brza, ostaje duže, pregledava više stranica i povećava se vjerovatnoća konverzije.

Na Hostragons strani, odabirom hostinga orijentiranog na performanse, ažurnih serverskih tehnologija i sigurne infrastrukture, možete stvoriti čvrstu osnovu za svoje tehničke SEO radove. Upravljanje domenom, hostingom i sigurnosnom konfiguracijom s jednog mjesta smanjuje operativno opterećenje; to omogućava vašem timu da se više fokusira na korisničko iskustvo i kvalitet sadržaja. Za povezana rješenja možete pogledati Korporativni Hosting, VPS server i SSL certifikat stranice.

Zaključak

Suština popravljanja INP rezultata je ne opterećivati preglednik nepotrebnim poslom u trenutku korisničke interakcije. Prvo pronađite najsporije interakcije koristeći stvarne podatke; zatim smanjite JavaScript opterećenje, razbijte duge zadatke, pojednostavnite osluškivače događaja, smanjite troškove renderiranja i stavite kodove trećih strana pod kontrolu. Hosting, keš, CDN i ažurne sigurnosne konfiguracije također pružaju snažnu osnovu koja podržava ovaj proces.

Ako želite svoju web stranicu učiniti bržom, pouzdanijom i prilagođenijom korisnicima, počnite s malim mjerenjem: Provjerite mobilnu INP vrijednost svoje najkritičnije stranice i primijenite prva tri koraka iz ovog vodiča. Da biste napravili performantan početak na infrastrukturnoj strani, možete istražiti Hostragons rješenja i mirno, komparativno procijeniti hosting plan koji odgovara vašim potrebama.

Često postavljana pitanja

Koliki treba biti INP rezultat?

Dobar INP rezultat je 200 ms ili manje. Vrijednost između 200 i 500 ms ukazuje na područje koje treba poboljšati, dok vrijednost iznad 500 ms ukazuje na loše korisničko iskustvo. Posebno treba dati prioritet mobilnim korisničkim podacima.

Koja je razlika između INP i FID-a?

FID mjeri samo kašnjenje prve korisničke interakcije, dok INP ocjenjuje kvalitet odziva interakcija koje se dešavaju tokom životnog ciklusa stranice. Zbog toga INP sveobuhvatnije odražava stvarno korisničko iskustvo.

Zašto je INP loš na WordPress stranicama?

Obično je loš zbog previše dodataka, teške teme, nepotrebnog CSS/JS-a koji se učitava na svim stranicama, slidera, pop-up skripti i kodova trećih strana. Čišćenje dodataka, isključivanje datoteka na nivou stranice i korištenje lagane teme donose značajno poboljšanje.

Da li će promjena hostinga popraviti INP rezultat?

Sam hosting neće popraviti težak JavaScript ili duge zadatke; međutim, brz server, dobar keš, CDN, ažuran PHP i stabilna isporuka resursa podržavaju INP optimizaciju. Dakle, njegov utjecaj je neizravan, ali posebno važan na WordPress stranicama.

Koliko brzo INP optimizacija daje rezultate?

Nakon što se izvrše ispravke koda i dodataka, rezultat se može odmah vidjeti u laboratorijskim testovima. U Search Consoleu i stvarnim korisničkim podacima Chromea, odraz promjene obično može potrajati nekoliko sedmica; jer je potrebno prikupiti dovoljno korisničkih podataka.