Kako sam spustio INP ispod 200 ms na WordPress-u (step-by-step)



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)


  1. Snimi PageSpeed Insights (mobilni) PRE.
  2. U Search Console → Core Web Vitals zabeleži statuse URL-ova.
  3. U Chrome DevTools pokreni Performance i Coverage (vidi unused CSS/JS).
  4. 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.

Скочи на траку са алаткама