How to Improve Interaction to Next Paint (INP)

Interaction to Next Paint (INP) measures how responsive your page feels. When someone clicks, taps, or presses a key, how long before the screen shows something happen in response? INP replaced First Input Delay as a Core Web Vital in March 2024. A good INP is 200 milliseconds or less, and over 500 milliseconds is considered poor.

What INP actually measures

INP looks at the interactions during a visit and reports a value close to the slowest one. Each interaction has three parts:

1. Input delay: the wait before the browser can begin handling the event, often because it is busy with other work
2. Processing time: how long your event handlers take to run
3. Presentation delay: the time to update and paint the next frame

Slow responses usually mean the browser's main thread is tied up with JavaScript.

Find the culprits

• Use real-user data in Search Console to see whether INP is a problem
• Use Chrome's developer tools to record interactions and look for long tasks
• Test on a mid-range phone, not just a fast computer, since slower devices expose problems
• Try the interactions that matter: menus, forms, filters, add-to-basket buttons

How to improve it

Ship less JavaScript. Every script adds work. Remove plugins and libraries you don't use, and avoid shipping a large framework for a simple site. See minify CSS and JavaScript.

Break up long tasks. Tasks that take longer than about 50 milliseconds can block the browser. Split heavy work into smaller chunks that allow the browser to respond in between.

Keep event handlers light. Do the minimum needed to give visual feedback, and move heavy work later or off the main thread.

Delay non-essential work. Analytics, chat widgets, and other add-ons should load after the page is usable. See third-party scripts and website speed.

Reduce the size of the page structure. A very large number of page elements makes updates slower. Simplify layouts and avoid rendering huge lists all at once.

Avoid layout-thrashing and costly styles. Heavy, repeated recalculation of layout slows rendering. Animate with transform and opacity where possible. See animation and motion.

Show instant feedback. Even if work takes time, update the interface quickly, for example by changing a button state right away.

Common offenders on small-business sites

• Large page-builder bundles with many unused widgets
• Sliders, popups, and animation libraries
• Cookie banners and chat tools that run heavy scripts
• Tag manager containers loaded with many tags
• Complex mega-menus built with large scripts

Don't forget accessibility

Responsive pages help everyone, including keyboard and assistive technology users. See keyboard navigation and focus.

How it relates to other metrics

INP sits alongside LCP and CLS. See Core Web Vitals explained, how to improve LCP, and how to fix layout shift.

Recheck after changes

Field data updates over time, so give it a few weeks to reflect improvements.

The bottom line

Responsiveness depends on keeping the main thread free. Ship less JavaScript, split long tasks, and delay add-ons. Target 200 milliseconds or less.