What INP actually measures (and why most "fixes" don't work)
Interaction to Next Paint measures the longest delay between a user input (click, tap, key press) and the next frame the browser paints, across the entire page lifetime. The threshold is 200ms for "Good" and 500ms for "Needs Improvement." It's a 75th-percentile metric, so a single bad interaction tanks the score for a whole URL group.
Most online INP advice treats it like LCP — bigger CDN, more caching, smaller images. None of that helps INP directly. INP is a JavaScript main-thread metric. The fixes are: less JS, smarter JS, and offloading work that doesn't need to block painting. Caching the HTML (which LiteSpeed does aggressively) doesn't change main-thread work at all; if anything, it surfaces JS-heavy interactions sooner.
We pulled 3,400 INP measurements from CrUX-aligned RUM data across 22 Hostinger-hosted client sites in Q1 2026. Median INP before our optimization pass: 340ms. Median after: 148ms. The 21 tactics below are ordered by typical impact in that dataset.
The 21 tactics, ranked
1. Defer or remove third-party scripts (Impact: High · Difficulty: Low)
The single biggest INP win on Hostinger sites is killing third-party tag soup. Google Tag Manager, Hotjar, Intercom, Facebook Pixel, multiple chat widgets — each one ships JS that runs on user interaction. We routinely cut 120-180ms off INP just by auditing the tag stack. Use async + defer aggressively, and load consent-gated tools only after interaction.
<!-- Bad -->
<script src="https://www.googletagmanager.com/gtm.js?id=GTM-XXXX"></script>
<!-- Better: load on first user interaction -->
<script>
addEventListener('click', () => {
if (!window.__gtmLoaded) {
window.__gtmLoaded = true;
const s = document.createElement('script');
s.src = 'https://www.googletagmanager.com/gtm.js?id=GTM-XXXX';
document.head.appendChild(s);
}
}, { once: true, passive: true });
</script>
2. Enable LiteSpeed Cache "Combine CSS/JS" with care (High · Low)
Hostinger's LiteSpeed plugin can combine and minify JS, but its aggressive Combine mode often breaks WordPress themes. Use Minify + Defer instead, and skip Combine unless you've QA'd the result on every template.
3. Replace heavy WordPress page builders (High · High)
Elementor and Divi ship >200KB of JS minimum, before any widgets. We've migrated 6 client sites from Elementor to a hand-coded theme; INP dropped 180ms on average. Hard sell to clients in love with their builder, but the data is unambiguous.
4. Use requestIdleCallback for non-critical work (High · Medium)
Anything that doesn't need to happen during the interaction frame — analytics, hover prefetches, lazy-load triggers — should run in idle time:
requestIdleCallback(() => {
// analytics, prefetch, late hydration
}, { timeout: 2000 });
5. Break up long tasks with scheduler.yield() (High · Medium)
Modern Chromium supports scheduler.yield(), which yields the main thread cleanly mid-task. For any handler >50ms, insert yields:
async function processItems(items) {
for (let i = 0; i < items.length; i++) {
process(items[i]);
if (i % 50 === 0 && 'scheduler' in window && 'yield' in scheduler) {
await scheduler.yield();
}
}
}
6. Audit click handlers for synchronous DOM thrash (High · Medium)
jQuery-era sites still ship handlers that read layout, write style, read layout — forcing reflow loops. Use the Chrome DevTools Performance panel; any handler with red-bordered "Forced reflow" warnings is INP poison.
7. Replace alert()/confirm() in handlers (Medium · Low)
Native dialogs block the main thread synchronously. Replace with custom modals built with <dialog> element.
8. Use CSS content-visibility: auto on long pages (Medium · Low)
For pages with many off-screen sections, this skips layout work until they're near the viewport. We've seen 40-60ms INP improvements on long blog posts and product listings.
9. Lazy-hydrate React/Vue islands (Medium · High)
If you're on Astro or a similar islands framework, use client:visible or client:idle instead of client:load for below-fold widgets. Most "interactive" sections don't need to be hydrated before the user scrolls to them.
10. Move event listeners to delegation (Medium · Low)
Attaching 200 click listeners to 200 list items is slower than one delegated listener on the parent. Single delegated listener: ~3ms attach. 200 listeners: ~80ms attach plus per-item event-loop overhead.
11. Avoid document.write() entirely (Medium · Low)
Yes, in 2026 we still find it on legacy sites. It blocks the parser and tanks INP on first interaction.
12. Use passive: true on touch and wheel listeners (Medium · Low)
Without it, the browser can't start scrolling until your handler returns. { passive: true } tells the browser the handler won't preventDefault, freeing the compositor.
addEventListener('touchstart', handler, { passive: true });
addEventListener('wheel', handler, { passive: true });
13. Compress and code-split critical JS bundles (Medium · Medium)
If you control the bundler, set the chunk size ceiling to 50KB minified-gzipped. LiteSpeed serves brotli well; lean into that.
14. Replace heavy carousels (Medium · Medium)
Slick, Owl Carousel, and Swiper-with-everything-loaded each cost 30-80ms of interaction overhead. Use Swiper with only the modules you need, or CSS scroll-snap for simple cases.
15. Configure LiteSpeed object cache properly (Medium · Low)
On Hostinger Business and Cloud plans, enable Memcached or Redis for the WordPress object cache. Cuts PHP execution time, which indirectly helps INP because slow back-ends often mean handlers wait on AJAX.
16. Avoid synchronous localStorage reads in handlers (Low · Low)
Each localStorage access is synchronous and can take 1-5ms on cold cache. In a handler that fires 10 times during typing, that adds up. Use IndexedDB with a memory cache for hot data.
17. Self-host fonts with font-display: swap (Low · Low)
Mostly an LCP win, but blocked font loads can stall the main thread on first paint, which makes early interactions feel laggy.
18. Preconnect to known third-party origins (Low · Low)
<link rel="preconnect" href="https://www.googletagmanager.com">
<link rel="preconnect" href="https://fonts.googleapis.com">
19. Reduce CSS specificity wars (Low · Medium)
Deeply nested selectors slow down style recalc on interaction. We've seen 15-30ms wins from flattening WordPress theme CSS that had body.page .container .main .post .entry-content p-level selectors.
20. Disable WP-Cron for high-traffic sites (Low · Low)
WP-Cron runs on every front-end request by default. On a high-traffic site, that means cron tasks fire during user interactions. Disable in wp-config.php:
define('DISABLE_WP_CRON', true);
Then schedule a real cron via Hostinger's cPanel: */5 * * * * curl -s https://yoursite.com/wp-cron.php?doing_wp_cron
21. Audit the admin bar (Low · Low)
For logged-in users, WordPress injects a heavyweight admin bar. We see this catch site owners off-guard — they test their own site logged in, see bad INP, and panic. The admin bar adds 30-60ms of interaction overhead. Test as an anonymous visitor.
The order we apply these in production
For a typical client engagement, we sequence the work like this:
- Week 1: Tactics 1, 2, 7, 11, 12, 18, 21 — all "high-impact, low-difficulty" or pure cleanup.
- Week 2: Tactics 4, 5, 6, 8, 10 — main-thread surgery.
- Week 3-4: Tactics 3, 9, 13, 14 — bigger refactors, gated by client appetite.
- Ongoing: Tactics 15-20 as catch-up cleanup.
By end of week 2 we usually see median INP at 180-220ms across the site. Week 3-4 work pulls the 75th percentile under 200ms consistently — which is what CrUX measures and what Search Console reports.
Hostinger-specific configuration we always change
Default Hostinger LiteSpeed settings are fine but conservative. We always override:
| Setting | Default | Our value | Why |
|---|---|---|---|
| Cache TTL (public) | 1 day | 7 days | HTML doesn't change that often |
| Combine CSS | On | Off | Breaks too many themes |
| Combine JS | On | Off | Breaks event timing |
| Lazy-load images | On | On (native attr) | Use loading="lazy" instead of JS shim |
| HTTP/3 QUIC | Off | On | Free latency win on mobile |
| Brotli compression | On | On | Already correct |
| Object cache | None | Memcached | Cuts DB query time on PHP |
"INP is the metric where shared hosting still works. You don't need a $400/month VPS — you need to ship less JavaScript and run it smarter."
Measuring INP correctly
Field data over lab data, every time. PageSpeed Insights' "Origin Summary" pulls from CrUX (real Chrome users) and is what Google actually uses. The lab "Performance" score is misleading for INP because lab tools simulate one interaction; real users do dozens. We instrument every client site with a small web-vitals.js snippet that ships INP, LCP, and CLS measurements to a Cloudflare Worker, and we cross-check against CrUX weekly.
<script type="module">
import {onINP} from 'https://unpkg.com/web-vitals@4?module';
onINP(({value, rating, attribution}) => {
navigator.sendBeacon('/inp-log', JSON.stringify({
value, rating, target: attribution.interactionTarget, type: attribution.interactionType
}));
});
</script>
This is the same instrumentation we feed into our 10K-query nightly scraper for client benchmarking. The interactionTarget field tells you which element is the culprit — invaluable when an INP regression hits and you need to localize it fast.
What we don't recommend
- Switching from Hostinger to Cloudways/Kinsta to "fix" INP. The hosting move costs $50-150/month extra for ~5ms of TTFB improvement. INP barely moves. Fix the JS first.
- Aggressive caching plugins on top of LiteSpeed. Stacking WP Rocket on LiteSpeed double-processes the same assets and often makes things worse. Use one or the other.
- Loading critical JS as
type="module"without a fallback. Older Android browsers in Thailand still see modulepreload differently. Always ship anomodulefallback for~3%of TH traffic.
Related reading
INP is one of the technical SEO surfaces we measure on every audit. The others — schema graph quality, crawl patterns from server logs, AI citation eligibility, and programmatic-quality controls — round out the engineering side. For Bangkok SMBs on Hostinger specifically, our technical SEO services bundle CWV optimization with the schema and content work that drives ranking. Bluewich handles the deeper engineering refactors when a client needs to leave a page builder; SitPlay handles the editorial side; Bangkok Digital handles CRO testing once the speed work lands.
cwv inp litespeed hostinger performance javascript