Skip to main content

Fix Guides

How to Fix Poor Interaction to Next Paint (INP)

Make taps, clicks and typing feel instant.

Quick fix

To fix poor INP, reduce main-thread JavaScript work: defer non-critical scripts, remove unused third parties, break up long tasks (over 50ms), optimise event handlers, and use web workers for heavy computation. Target INP ≤ 200ms. Profile with Chrome DevTools Performance panel.

INP measures how quickly the page responds to user input throughout the visit. Poor INP feels laggy — buttons slow to react, scrolling stutters. The culprit is almost always too much JavaScript on the main thread.

Check your website

See how your site handles how to fix poor interaction to next paint (inp) — free, no account needed.

Business impact

Unresponsive UI frustrates users and kills conversions on forms, menus, and checkout. INP is a Core Web Vital — fixing it improves both experience and page experience signals.

Why this happens

INP replaced FID as the responsiveness metric. Poor INP from: large JS bundles; long tasks blocking the main thread; heavy third-party scripts (chat, analytics); inefficient React re-renders; and synchronous work in click handlers. Use Performance profiler → Interactions to find slow handlers.

How to confirm the issue

Manually: PageSpeed Insights INP field data; DevTools Performance → interact with the page while recording.

With Plexa Trust: PageSpeed and third-party script findings; re-scan after JS diet.

Step-by-step fix

  1. Profile interactions in Chrome DevTools to find slow handlers.

  2. Remove or defer non-essential third-party scripts.

  3. Code-split and lazy-load JavaScript below the fold.

  4. Break tasks longer than 50ms using setTimeout or scheduler.yield().

  5. Optimise React/Vue re-renders (memo, virtual lists for long lists).

  6. Load chat widgets after user interaction or idle time.

  7. Re-test INP in PageSpeed.

Platform-specific fixes

WordPress

  1. Audit plugins — each may add JS. Remove unused plugins.

  2. Defer JavaScript in caching plugin settings.

  3. Delay chat/analytics scripts until scroll or click.

React / Next.js

  1. Analyse bundle with @next/bundle-analyzer.

  2. Dynamic import heavy components.

  3. Avoid large synchronous state updates on input events.

Tag managers

  1. Reduce GTM tags firing on every page.

  2. Load non-critical tags on custom events, not page load.

How to verify the fix

  • Measure real interactions on mobile devices.

  • Third-party script audit is often the fastest INP win.

  • Prefer yielding the main thread over blocking handlers.

Common mistakes

  • Adding more analytics while INP is already poor.

  • Running heavy computation synchronously in onclick handlers.

  • Ignoring mobile — INP is often worse on low-end devices.

Frequently asked questions

What is a good INP score?

200 milliseconds or less at the 75th percentile.

How is INP different from FID?

INP considers all interactions during the visit, not only the first. It is stricter and more representative.

Do third-party scripts affect INP?

Very much. Chat widgets, analytics, and ads are common INP killers.

What is a long task?

JavaScript running on the main thread for more than 50ms, blocking input response.

Can CSS affect INP?

Less directly than JS, but expensive selectors and layout thrashing can contribute.

Should I use a web worker?

For genuinely heavy computation, yes — it keeps the main thread free for input.

Does defer help INP?

Yes, by reducing main-thread work during initial load and freeing it for interactions sooner.

How do I confirm it worked?

INP improves in PageSpeed field data and interactions feel snappier on real devices.

Think you've fixed it?

Run a free scan to verify the issue is resolved. Upgrade to Pro on Plexa Trust for the full audit, monitoring alerts, and score history.

Verify with a free scan

Upgrade to Pro for monitoring