Interaction to Next Paint

What Is Interaction to Next Paint?

Interaction to Next Paint, or INP, is a Core Web Vitals metric that measures how long a page takes to show visual feedback after a click, tap, or keypress. It indicates whether a site feels responsive during a visit. Google replaced First Input Delay with INP in March 2024, as documented by web.dev.

How INP Is Calculated

INP evaluates qualifying clicks, taps, and keyboard actions during a page visit.

1. Input delay is the time before the browser starts handling an interaction.
2. Processing time is work performed by interaction code, such as updating a filter.
3. Presentation delay is the time until the browser renders the visual change.
4. INP reports the slowest meaningful interactions while discounting rare outliers.

INP Score Thresholds and What They Mean

Google assesses Core Web Vitals using real-user field data at the 75th percentile.

Interaction to Next Paint vs. First Input Delay

FID measured a narrow part of the first interaction. INP provides a broader picture.

A page could have acceptable FID but still respond slowly when users open a menu, apply a filter, or submit a form later.

Why INP Matters for User Experience and SEO

People judge an interface by what happens after they act.

• Slow buttons, filters, menus, and checkout controls can appear broken.
• Fast feedback reassures users that their action was received.
• INP is a Core Web Vital and a Google page-experience signal, but it does not determine rankings by itself.

How to Diagnose a Slow Interaction

Use field data to find the problem, then test its cause.

1. Check PageSpeed Insights or Search Console for affected pages.
2. Reproduce the interaction locally.
3. Record a browser performance trace.
4. Identify whether waiting, JavaScript work, or rendering causes the delay.
5. Apply a focused fix and retest on realistic devices.

Common Ways to Improve INP

The right fix depends on the measured bottleneck.

• Break large JavaScript tasks into smaller pieces.
• Reduce work in click, input, and change handlers.
• Defer nonessential third-party scripts.
• Avoid unnecessary layout calculations and rendering updates.
• Show immediate feedback, such as a pressed state or loading indicator.

Practical Limits of INP

INP is useful, but it is not a complete quality measure.

• It cannot measure interactions users never attempt.
• A fast paint can appear before a network request finishes.
• It does not replace accessibility, functional, or backend performance testing.

Interaction to Next Paint in Modern App Development

INP matters for apps with forms, dashboards, search, filters, and AI-assisted workflows. Teams using an AI web app builder should test real interactions after shipping, especially where data changes or loading states appear. Emergent helps teams build full-stack applications, while its app design and development guidance supports interface decisions. Build responsive web apps with Emergent.