To fix Interaction to Next Paint (INP), reduce how long the browser's main thread is busy after a user taps, clicks, or presses a key. INP must hit ≤ 200 milliseconds at the 75th percentile for a "Good" Core Web Vitals rating. INP replaced First Input Delay (FID) in March 2024 because FID only measured the first interaction — INP captures the worst interaction latency across the full page visit.
Users experience bad INP as lag: menu button tapped, nothing happens for half a second, then the menu opens. Checkout buttons that freeze. Accordions that stutter. On WordPress sites, the usual suspects are JavaScript bloat from page builders, ever-present chat widgets, and analytics tags competing for the main thread.
INP vs lab metrics
PageSpeed Insights lab data shows Total Blocking Time (TBT) as an INP proxy. High TBT suggests INP problems but doesn't guarantee field INP failure — and vice versa.
| Data source | What it tells you |
|---|---|
| Search Console INP (field) | Real user interaction latency — trust this |
| PSI field INP | Same CrUX source, URL-level |
| Lighthouse TBT | Lab proxy — use for diagnosis |
| DevTools Performance trace | Find specific long tasks and scripts |
Always confirm field INP before spending weeks on lab-only TBT warnings.
Step 1: Find slow interactions
Test these on mobile with CPU throttling (DevTools → Performance → 4× slowdown):
| Interaction | Common on |
|---|---|
| Hamburger menu open | All mobile sites |
| Add to cart | WooCommerce |
| Tab/accordion toggle | Landing pages, FAQs |
| Search open/submit | Header search |
| Form submit | Contact, checkout |
| Filter/sort products | Category pages |
Use the Web Vitals extension or Performance panel → "Interactions" track to see delay between input and next paint.
Step 2: Reduce JavaScript payload
Less JS means less parse, compile, and execution before the thread is free to respond.
| Action | Impact |
|---|---|
| Remove unused plugins (WordPress) | High — each plugin can add frontend JS |
| Dequeue jQuery on pages that don't need it | Medium |
| Disable page builder assets on pages not built with builder | High |
| Replace heavy slider/carousel with static hero or CSS | High |
| Code-split in headless/React apps | High |
| Remove duplicate analytics libraries | Medium |
Check Network tab → JS transfer total on key pages. There's no universal threshold, but WordPress homepages transferring 1MB+ of JS usually have INP problems on mid-range phones.
Step 3: Defer non-critical third-party scripts
Third-party scripts are a leading INP cause because you don't control their main-thread behavior.
| Script type | Strategy |
|---|---|
| Google Tag Manager | Delay container until user interaction or scroll; audit tags inside GTM |
| Meta Pixel / LinkedIn Insight | Load after consent + delay |
| Hotjar / Clarity | Delay until after load or first interaction |
| Intercom / Drift / Tidio chat | Delay widget init; load on contact pages only |
| A/B testing (Optimizely, VWO) | Evaluate whether test is worth INP cost |
Full audit process: third-party scripts slowing your website.
Step 4: Break up long tasks
Main-thread tasks over 50ms block interaction responses.
| Technique | Application |
|---|---|
| `requestIdleCallback` for non-urgent work | Analytics batching, non-critical DOM updates |
| Split large loops | Product filtering on large catalogs |
| Web Workers | Heavy computation off main thread |
| Debounce scroll/resize handlers | Themes with scroll-triggered animations |
| Lazy hydrate below-fold components | React/headless sites |
In DevTools Performance, long tasks show as red triangles. Click through to find the offending script URL.
Step 5: Optimize event handlers
| Anti-pattern | Fix |
|---|---|
| Sync AJAX on every cart hover | Debounce; fetch on click only |
| Full DOM requery on menu toggle | Cache selectors |
| Third-party menu widget | Replace with lightweight native nav |
| WooCommerce cart fragments polling every few seconds | Increase interval; disable on non-shop pages |
| document.write from legacy scripts | Remove or replace script |
Step 6: WordPress-specific INP fixes
| Source | Fix |
|---|---|
| Elementor frontend JS | Elementor experiments; per-page asset loading plugins |
| WooCommerce blocks vs classic | Test both; blocks add React overhead |
| Contact Form 7 + reCAPTCHA | Load reCAPTCHA only on form pages |
| Wordfence live traffic script (logged-in) | Doesn't affect anonymous CrUX |
| Admin bar for logged-in users | Test logged-out for field data |
Caching plugins with "delay JavaScript execution" help INP but can break checkout, forms, and menus. Test every critical interaction after enabling.
INP fix priority order
- Confirm field INP failure (not lab-only TBT)
- Delay or remove non-essential third-party scripts
- Cut page-level JS from plugins and page builders
- Fix long tasks identified in Performance trace
- Optimize specific slow interactions (menu, cart, filters)
Validation
| Test | Pass criteria |
|---|---|
| PSI lab TBT reduced | Directionally helpful |
| Manual interaction on throttled mobile feels instant | Subjective but important |
| Field INP in Search Console → Good | Confirms over 28 days |
INP is the slowest Core Web Vital to improve in field data because it depends on real interaction patterns across devices.
When INP requires architectural change
Sites running heavy client-side rendering, multiple A/B platforms, and chat on every page sometimes can't hit Good INP without removing tools. That's a business tradeoff conversation, not a caching plugin fix. A website performance audit documents the tradeoffs with numbers from your actual stack.
Frequently asked questions
Does deferring all JavaScript fix INP?
It can improve INP but breaks functionality if critical scripts are deferred too aggressively. Delay non-critical scripts; keep interaction-dependent scripts accessible before first tap.
Why is INP bad on mobile but fine on desktop?
Mobile CPUs execute the same JavaScript slower. Desktop lab tests hide mobile INP problems.
Did INP replace FID completely?
Yes for Core Web Vitals assessment. FID is deprecated in CrUX reporting.
Can caching plugins fix INP?
Caching helps repeat visits by reducing load-time work. Interaction responsiveness still depends on runtime JS unless you delay or remove it.
Does React hurt INP?
React itself isn't the problem — hydration cost and main-thread work from large component trees are. Code splitting and partial hydration help.
Book a free 15-minute site audit
Menu lagging, cart freezing, or INP in the red bucket? Book a free 15-minute audit. I'll identify whether third-party scripts, page builder JS, or WooCommerce is the bottleneck — and whether you need a full website performance audit.
August 5, 2026
How to Read a PageSpeed Insights Report
August 5, 2026
