Interaction to Next Paint (INP)

INP is stricter than the FID it replaced. Where FID only measured the delay on the very first interaction, INP tracks every click, tap, and key press across the entire session — then reports the worst-performing one.

What is Interaction to Next Paint?

INP measures the elapsed time between a user performing an action — clicking a button, tapping a link, pressing a key — and the browser displaying the corresponding visual update. This end-to-end measurement covers three phases:

1. Input delay. The time between when the user acts and when the browser starts processing the event. Main thread busyness is the primary cause of long input delays.
2. Processing time. The duration spent executing the event handler. Complex JavaScript functions, synchronous API calls, and inefficient DOM operations extend this phase.
3. Presentation delay. The time from when handler execution completes to when the browser paints the next frame. Heavy CSS, large DOM trees, and expensive paint operations affect this.

Google's final INP score reports the 98th percentile interaction — effectively the worst interaction on the page during a user session, capped to remove outliers.

Why INP matters for SEO and user experience

INP is a direct Google ranking signal — one of three Core Web Vitals alongside Largest Contentful Paint and Cumulative Layout Shift. Beyond rankings, poor INP destroys the user experience on interactive pages:

1. Bounce rate. Pages with INP over 500ms see 32% higher bounce rates. Users associate slow interactions with broken pages and leave.
2. Conversion loss. A 100ms increase in interaction latency reduces conversion rates by up to 7%. Checkout flows with delayed button feedback lose sales at measurable rates.
3. Form abandonment. Users are 2x more likely to abandon forms when there is a noticeable lag between typing and the page responding.
4. Mobile amplification. Mobile devices have less CPU power. INP problems that are borderline on desktop often push mobile users into the "poor" range, which matters more under Google's mobile-first indexing.

How INP is measured

INP tracking happens in two environments: lab tools and field data.

Lab tools simulate interactions and give you per-interaction breakdowns. Field data from Search Console shows real-user INP at the 75th percentile — the threshold Google uses for the Core Web Vitals assessment.

INP scoring thresholds

• Good: under 200ms. The interaction feels instant. Users don't notice any lag.
• Needs improvement: 200-500ms. Some users notice occasional lag, especially on mobile.
• Poor: over 500ms. The page feels sluggish. Users lose confidence and are likely to bounce or abandon tasks.

Google recommends targeting under 200ms for at least 75% of page loads, measured at the 75th percentile of real-user sessions. In practice, targeting under 150ms gives a safety buffer for the percentile calculation.

Real INP examples — good and poor

Poor INP: E-commerce filter page

An e-commerce product page with 14 third-party analytics and marketing scripts experienced 420ms INP when users opened a category dropdown. Every script was fighting for the main thread. The fix: deferring non-critical scripts and breaking up long event handlers reduced INP to 140ms — from poor to good.

Good INP: Restaurant reservation form

A restaurant booking form that validates input on each keypress and shows confirmation on submit completed the full interaction cycle in 120ms. Lean JavaScript, no blocking third-party scripts, minimal DOM — the recipe for consistently good INP.

Mixed INP: Real estate search

A property site's blog section scored under 100ms INP. The complex property search with filtering, map integration, and price sliders scored 350ms — "needs improvement" for the same domain. INP is page-specific, not site-wide.

INP vs First Input Delay — what changed

FID was Google's previous responsiveness metric. INP replaced it because FID was too easy to game and missed most of what users actually experienced.

5 ways to improve INP

1. Break up long JavaScript tasks. Any task running over 50ms blocks the main thread. Use requestIdleCallback, setTimeout, or scheduler.yield() to split long tasks into smaller chunks that yield between steps.
2. Optimize event handlers. Event handlers that run expensive operations synchronously directly add to processing time. Move heavy work off the critical path — fetch data after the visual update, not before.
3. Defer third-party scripts. Analytics, chat, and ad scripts loaded on page load compete for the main thread with user interactions. Defer them until after the page is fully interactive.
4. Reduce DOM size. Pages with 3,000+ DOM elements face re-rendering delays because every interaction triggers style recalculations across a large tree. The Chrome team recommends keeping total DOM nodes under 1,500.
5. Use CSS content-visibility. content-visibility: auto on off-screen sections skips rendering those sections until they scroll into view, freeing rendering budget for visible interactive elements.

Common INP mistakes to avoid

• Synchronous operations in event handlers. Fetching data or running DOM queries synchronously before painting the visual response directly extends processing time.
• Third-party script bloat. Every tag manager script, chat widget, and analytics pixel is a main thread competitor. Audit third-party load order quarterly.
• Large DOM trees. Over 3,000 DOM nodes cause cascading style recalculation delays on every interaction.
• No mobile testing. INP often passes on desktop and fails on mid-range Android devices. Test on real hardware, not just desktop Chrome DevTools with device emulation.
• Measuring only at launch. New third-party scripts, feature releases, and A/B test code accumulate over time and degrade INP gradually. Set up continuous monitoring in Search Console.

Frequently asked questions

Related glossary terms

Sources

Akshay VR

Marketing Head · theStacc · ex-Sr Marketing Specialist, ARKA 360 · Malappuram, Kerala

Akshay leads editorial and content operations at theStacc. He writes about technical SEO, Core Web Vitals, and the intersection of page performance and organic search — the invisible levers that move rankings without touching a single keyword.

LinkedIn Author page More terms by Akshay