Kako da smanjiš Input Delay/INP bez plaćenih plugina: skripte, fontovi, header, ankere i interakcije. Sve je provereno na hostingu sa LiteSpeed + QUIC.cloud.
1) Skripte: Defer + Delay (sa izuzecima)
- Kadence → Performance: Load JS deferred ✔︎
- LiteSpeed → Page Opt.: JS Defer ON, Delay JS ON
- Izuzeci (primeri): validatori formi, captcha, kritični UI
Dodaj klasama/selektorima npr..ml-form-embed*, form[action*="ml"]
2) Sticky header i ankere
- Umanji tranzicije/blur na sticky-u; koristi “transform” umesto “box-shadow” gde može.
- Za skrol do sekcija:
scroll-margin-top: 110px;na odredištima (već imaš).
3) Fontovi: lokalni WOFF2 + swap
- Uploaduj WOFF2 lokalno ili koristi sistemski font stack.
- CSS:
font-display: swap; - Preload max 2 varijante (npr. Regular/Bold) ako su zaista LCP tekst.
4) Hero & slike (LCP bez trzaja)
- LCP sliku koristi kao
<img loading="eager" fetchpriority="high" decoding="async" width="" height=""> - Dimenzije eksplicitne; WebP uključeno; izbegni nepotreban preload.
5) Kadence Blocks: izbegni “teške” module
- Na Home koristi Post Grid (server-side), ne galerije sa animacijama.
- Akordeoni/FAQ – ok, ali proveri UCSS da ništa ne „odseče“.
6) CSS isporuka
- QUIC.cloud: Critical CSS ON (per-URL), UCSS ON (vizuelna provera).
- Posle većih izmena: “Regenerate Critical/UCSS”.
7) Third-party embedovi
- YouTube: “lazy iframe” + placeholder slika (sprečava CLS).
- Analytics/pikseli – učitaj posle interakcije ili kroz Consent Mode.
8) Interaction budget & čišćenje
- Ciljaj <200 ms za glavne interakcije.
- Ukloni nepotrebne skripte (share widgeti, teške animacije).
9) Test & QA
- PSI Mobile pokreni 3× (median), RUM: prati 75. percentil u GA4/GSC.
- Vizuelno prođi menije/modale/forme posle UCSS.
10) Mini-FAQ
Delay JS mi „ruši“ formu?
Dodaj selektor forme u Exclude from Delay (LiteSpeed). Primer: form[action*="ml"].
Sticky header „prekriva“ ankere?
Na odredišta dodaj scroll-margin-top (npr. 110px).
Zaključak + CTA
Uz ova podešavanja INP pada bez žrtvovanja UX-a. Radi postepeno i meri.
