How to Optimise INP: Interaction to Next Paint Guide
What INP Measures
Interaction to Next Paint (INP) measures how quickly a page responds visually after a user interaction, such as a tap, click, or key press. It replaced First Input Delay because users do not care whether only the first interaction is fast. They care whether the whole page stays responsive.
For SEO teams, INP matters because poor responsiveness creates a weak page experience. A page can load quickly and still feel broken if JavaScript blocks the main thread when the user tries to interact. For the broader framework, start with our Core Web Vitals pillar guide.
The Main Causes of Poor INP
Most INP problems come from main-thread congestion. The browser is trying to process JavaScript, style calculations, layout work, rendering, and user input at the same time. If a large task blocks the queue, the interaction waits.
| Cause | What Happens | Typical Fix |
|---|---|---|
| Long JavaScript tasks | Input waits behind heavy script execution | Split tasks and reduce JS |
| Heavy hydration | Page looks ready but is not interactive | Use partial hydration or islands |
| Large DOM | Style and layout calculations slow down | Reduce DOM size and nested components |
| Third-party scripts | Ads, widgets, tags block interaction | Audit, defer, sandbox, or remove |
| Expensive event handlers | Clicks trigger too much synchronous work | Move work off-thread or delay non-critical actions |
The fix is not simply 'make the page faster'. The fix is to make interactions lighter, shorter, and easier for the browser to paint after.
How to Fix INP Step by Step
Start with the interactions users actually perform: menu taps, form fields, filters, accordions, add-to-cart buttons, search inputs, and navigation controls. Then work backwards from the slowest interaction.
INP Optimisation Checklist
- Identify slow interactions in field data or Chrome DevTools.
- Break long tasks into smaller chunks.
- Remove unused JavaScript from the interaction path.
- Defer non-critical analytics and marketing scripts.
- Keep event handlers small and focused.
- Use instant visual feedback for taps and clicks.
- Avoid expensive layout reads/writes inside handlers.
- Reduce hydration scope on JavaScript-heavy pages.
- Test on mid-range mobile devices, not only desktop.
If your site uses a JavaScript framework, also read our JavaScript SEO rendering pipeline guide. Rendering choices often decide whether INP is easy or painful to fix.
Where SPAs Usually Go Wrong
Single Page Applications often struggle with INP because they send too much JavaScript and hydrate too much interface at once. The page may visually appear loaded, but the main thread is still busy attaching event handlers and rebuilding state.
The practical approach is clear:
- Split JavaScript by route and component.
- Hydrate only interactive components.
- Avoid shipping admin/dashboard code to public pages.
- Replace large client-side widgets with server-rendered HTML where possible.
- Keep third-party tags out of the critical interaction path.
For a deeper SPA-specific workflow, see our SPA SEO best practice guide.
How to Measure INP Properly
Do not rely on a single Lighthouse run to judge INP. INP is best understood with field data because real users interact with pages in different ways, on different devices, under different network and CPU conditions.
Use this workflow:
- Search Console Core Web Vitals report for affected URL groups.
- PageSpeed Insights for CrUX field data and lab diagnostics.
- Chrome DevTools Performance panel for specific interaction traces.
- Real user monitoring if the site has enough traffic and commercial importance.
Related Reading
External References
Frequently Asked Questions
What is INP?
What causes poor INP?
How do you improve INP?
