What Is INP (Interaction to Next Paint) and How Do You Fix It?

Short answer: INP is a Core Web Vital that measures the delay between a user's interaction and the next visual update on the page. A good INP is 200 milliseconds or less. Above 500 milliseconds is poor. It replaced First Input Delay as a Core Web Vital in March 2024.

Table of Contents

1. What INP Measures
2. INP Thresholds
3. INP vs FID
4. What a Poor INP Feels Like
5. Common Causes
6. How to Find Slow Interactions
7. How to Improve INP
8. Key Takeaways

What INP Measures

When someone clicks, taps, or presses a key, three things happen before they see a result:

1. Input delay. The browser is busy with other work and cannot start handling the interaction.
2. Processing time. Your event handlers run.
3. Presentation delay. The browser calculates layout and paints the next frame.

INP is the total of all three. It observes interactions throughout the whole visit and reports a value close to the slowest one, ignoring rare outliers on pages with many interactions.

Scrolling and hovering do not count. Clicks, taps, and key presses do.

INP Thresholds

Google assesses a page at the 75th percentile of visits, which means three quarters of visits should meet the threshold. Mobile and desktop are assessed separately.

INP vs FID

First Input Delay measured only the first interaction and only the input delay part. A page could score well on FID and still feel sluggish every time a menu opened.

INP covers every interaction during the visit and the full time until the screen updates, which matches how responsiveness actually feels.

What a Poor INP Feels Like

• You tap a button and nothing appears to happen, so you tap again.
• Typing in a search box lags behind your fingers.
• A menu opens a beat late.
• A filter takes a moment and the page then jumps.

The second tap is the important part. Slow responses cause double submissions and rage clicks, and visitors conclude the site is broken.

Common Causes

1. Long JavaScript tasks. Any task that holds the main thread for more than about 50 milliseconds delays input.
2. Heavy event handlers. Doing all the work synchronously inside the click handler.
3. Large re-renders. A small state change that causes a big part of the interface to redraw.
4. Big DOM trees. Thousands of elements make every layout calculation slower.
5. Third-party scripts. Chat, ads, A/B testing, and tag managers competing for the main thread.
6. Hydration. In server-rendered apps, the page looks ready before it can respond.
7. Slow devices. A mid-range phone has a fraction of a laptop's processing power.

How to Find Slow Interactions

Lab tools cannot produce a true INP, because INP depends on what real people do. You need field data.

1. Start with real-user data. Find the pages with the worst INP, by device.
2. Reproduce on a slow profile. In your browser's performance panel, throttle the CPU and interact with the page.
3. Look at the interaction's breakdown. Is it input delay, processing, or presentation?
4. Watch sessions on the slow page. Repeated taps on one element usually mark the slow interaction.

DeepSync captures real-user LCP, CLS, and INP from actual visits, plus your slowest pages and resources, on Pro and above (performance docs). Because sessions are recorded too, you can go from a slow page to the recordings where people tapped twice.

How to Improve INP

• Give feedback immediately. Show a pressed state or spinner first, then do the work.
• Break up long tasks. Yield to the browser between chunks of work.
• Defer non-urgent work until after the next paint.
• Reduce what re-renders. Update only the part of the interface that changed.
• Shrink the DOM. Virtualise long lists.
• Audit third-party scripts and remove or delay what you can.
• Debounce input handlers for search and filters.
• Avoid layout thrashing, which is reading and writing layout properties repeatedly in a loop.

Key Takeaways

• INP measures how quickly the page responds to clicks, taps, and keys.
• Good is 200 ms or less; poor is above 500 ms.
• It needs real-user data, split by device.
• Fix long tasks, heavy handlers, large re-renders, and third-party scripts.

Conclusion

INP is the Core Web Vital that most closely tracks whether a site feels broken. Find the slow interaction, give instant feedback, and move the heavy work out of the way.

See DeepSync plans.