What is Interaction to Next Paint (INP)?

What INP Measures

INP captures whether the page consistently responds quickly to interactions throughout the entire session — not just the first one. An interaction's INP contribution includes the time from user input until the browser paints the next frame in response. High INP means the page's JavaScript is blocking the main thread too much, making it feel sluggish and unresponsive.

What is a Good INP Score?

What Causes Poor INP Scores?

• ✗Long-running event handlers that do heavy synchronous work (e.g., filtering large arrays, DOM manipulation) inside click handlers
• ✗Third-party scripts that continue to run tasks on the main thread after page load
• ✗Expensive re-renders in React/Vue — components that update large trees on every interaction
• ✗Heavy layout and paint costs triggered by the interaction (forced reflows after DOM changes)
• ✗Large JavaScript bundles executing during or after interactions due to lazy loading
• ✗Excessive DOM size that makes style recalculation and layout expensive after each interaction

How to Fix INP

• ✓Break up long event handlers using scheduler.postTask() or setTimeout(fn, 0) to yield to the browser between tasks
• ✓Move expensive computation out of event handlers into async functions or Web Workers
• ✓Memoize expensive React components with React.memo() and useMemo() to prevent unnecessary re-renders
• ✓Defer loading of third-party scripts that fire after page load interactions
• ✓Use CSS contain: content on large sections to limit layout recalculation scope
• ✓Reduce DOM complexity — large tables, lists with hundreds of items, or deeply nested elements all increase INP cost

Frequently Asked Questions