INP u praksi: Kako sam spustio INP ispod 200 ms na WordPress-u (step-by-step)
TL;DR:
Cilj je INP ≤ 200 ms na mobilnom.
Stack: LiteSpeed Enterprise + LSCache + CloudLinux + Redis + Cloudflare (DNS/CDN).
Taktika: kritični CSS, minimizacija JS, defer trećih skripti, WebP/AVIF, pravilno keširanje i no-cache za dinamične rute (Woo cart/checkout/admin).
Rezultat: real-user CWV u zelenom u 7–14 dana (CrUX), PSI mobilni “zeleno” odmah posle deploy-a kod većine sajtova.
Zašto INP i zašto baš ovim redosledom
- INP meri reaktivnost nakon interakcije (klik, tap, tipkanje).
- Najviše ga ubijaju: blokirajući JS, preteški builderi, treće skripte (chat, analytics, tag manager), ogroman DOM i loš TTFB.
- Rešenje: smanji blokadu (JS/CSS), ubrzaj server i mrežu, rastereti DOM, pa onda poliraj sitnice.
Pre-flight: merenje pre/posle (obavezno)
- Snimi PageSpeed Insights (mobilni) PRE.
- U Search Console → Core Web Vitals zabeleži statuse URL-ova.
- U Chrome DevTools pokreni Performance i Coverage (vidi unused CSS/JS).
- Instaliraj Web Vitals ekstenziju (lokalna merenja tokom rada).
Korak 1 — Server i keš osnova (TTFB boost)
- LiteSpeed + LSCache plugin (WordPress).
- CloudLinux (izolacija naloga) + PHP 8.2/8.3 sa OPcache.
LSCache → Cache:
- Uključi Cache za public.
- Isključi keš za prijavljene i role koje uređuju.
- WooCommerce: u Excludes dodaj rute:
/cart/,/checkout/,/my-account/,?add-to-cart=,wc-ajax=*. - Object Cache: Redis (Enable), TTL 3600–7200, Flush on update = off (osim kad radiš veće izmene).
- ESI: uključi samo ako personalizovane blokove moraš da renderuješ bez keša.
Cloudflare (DNS + CDN):
- Ako si na LiteSpeedu, ne koristi APO (duplo keširanje komplikuje invalidaciju).
- Bypass pravila:
*/wp-admin/*,*preview=true*,*/cart/*,*/checkout/*. - Cache Everything koristi samo za čiste blogove bez dinamike.
- Brotli on, HTTP/3 on, Early Hints on, Always Online off.
- Firewall: Bot Fight Basic on.
Korak 2 — Kritični CSS i CSS/JS optimizacija
LSCache → Page Optimization:
- CSS Minify: ON • CSS Combine: OFF
- Generate Critical CSS: ON (po URL-u za različite templejte)
- JS Minify: ON • JS Combine: OFF
- Load JS Deferred: ON • Delay JS: ON za treće skripte
- HTML Minify: ON
Defer/Delay lista (primer): gtag, analytics.js, googletagmanager.com, facebook.net, fbevents.js, chat widgeti (tawk, intercom, crisp), mape i slideri koji nisu above-the-fold.
Fontovi: hostuj lokalno, preload WOFF2 ključnih fontova; izbegni @import u CSS-u; koristi font-display: swap.
Korak 3 — Slike i video: WebP/AVIF, lazy i dimenzije
- LSCache → Image Optimization: WebP/AVIF generacija i replace.
- Lazy-load za sve ispod prelama (osim hero slike).
- Uvek postavi width/height atribute ili
aspect-ratio. - Srcset za responsive varijante.
- Video: poster slika, preload metadata, defer trećih playera.
Korak 4 — WooCommerce specifično (ako ga imaš)
- Cart/Checkout/My Account: no-cache (već dodato).
- Isključi “Recently viewed” widgete iz keša ili renderuj preko ESI.
- JS za live shipping/tax kalkulacije — guraj u Delay kad god je izvodljivo (posle prvog inputa).
- Izbegni “teške” mega-menije i gigantske DOM-ove na PLP/PDP.
Korak 5 — Čišćenje DOM-a i trećih skripti
- Builder bloat: smanji broj sekcija, koristi native CSS grid umesto višeslojnih containera.
- Ukloni globalne slider skripte sa stranica gde nisu potrebne.
- Zameni iframes (mapa, YouTube) sa lite embeds (thumbnail + play).
- Ukloni nepotrebne pluginove (testiraj sa Query Monitor).
- Tag Manager: svedi na nužni minimum. Svaki tag = latency.
Korak 6 — Merenje posle deploy-a i fino štelovanje
- Proveri PSI (mobilni).
- Gledaj Longest INP u DevTools → Performance (interakcije: open menu, add to cart).
- U GSC → CWV sačekaj 7–14 dana da se RUM podaci stabilizuju.
- Ako je INP “na ivici”, proširi Delay JS listu, optimizuj font preload i proveri “heavy” event listenere.
Pre/Posle (primer iz prakse)
- Pre: TTFB ~800 ms, LCP 3.7 s, INP 310 ms, CLS 0.14.
- Posle: TTFB 220 ms (EU), LCP 1.9 s, INP 160 ms, CLS 0.03.
- Promena urađena za 48 h, završno poliranje narednih 5 dana.
Česta pitanja (mini-FAQ)
Da li Cloudflare APO pomaže uz LiteSpeed?
Ako koristiš LiteSpeed + LSCache, drži APO OFF (dupli keš ume da pravi konfuziju). APO koristi ako si na Nginx/Apache bez LS-a.
Može li “zelena” odmah?
Na PSI često da.
U GSC (RUM) CWV signali se stabilizuju kroz 1–2 nedelje realnog saobraćaja.
Šta ako imam težak builder + 10 reklama?
Radi “Hard mode” sprint: agresivniji Delay JS, zamena embedova, pruning widgeta, ručno skraćivanje kritičnog CSS-a.
Uvek postoji tačka gde biznis kompromisi diktiraju rezultat.
Checklist (sačuvaj i štikliraj)
- [ ] LiteSpeed + LSCache + CloudLinux + PHP 8.2/8.3 + OPcache
- [ ] Redis object cache (stalno aktivan)
- [ ] Woo no-cache rute (cart/checkout/account/admin)
- [ ] Critical CSS ON, Minify CSS/JS ON, Defer JS ON, Delay trećih skripti ON
- [ ] WebP/AVIF, lazy-load, srcset, dimenzije slika
- [ ] Fontovi lokalno + preload WOFF2
- [ ] Cloudflare: DNS/CDN, Brotli, HTTP/3, Early Hints, cache/bypass pravila
- [ ] PSI pre/posle + GSC CWV praćenje 7–14 dana
CTA: Hoćeš da ti sredim INP ispod 200 ms?
Besplatna dijagnostika i plan optimizacije za tvoj WP sajt.
Migracija + Green Boost u 48 h.
Kontakt: Kontakt forma • Viber/WhatsApp dugmad u footeru.

