Interaction to Next Paint (INP): The Complete Guide
- mohammed jarekji
- 6 days ago
- 5 min read
Updated: 5 days ago
Why Responsiveness Became the New UX Battleground
Fast loading is no longer enough.
In 2025, users don’t just expect pages to appear quickly. They expect them to react instantly.
Whether it’s tapping “Add to Cart,” opening a menu, or submitting a form, any perceptible lag breaks trust and flow.
That’s why Google replaced First Input Delay (FID) with Interaction to Next Paint (INP), a metric that measures how responsive your site feels from the user’s perspective.
Speed loads attention. Responsiveness keeps it.
What Is Interaction to Next Paint (INP)?
INP measures the delay between when a user interacts with a page (via a click, tap, or keypress) and when the next frame is painted on the screen, i.e., when the site visually responds.
Unlike FID, which only tracked the time until input processing began, INP accounts for the full cycle: Input → Processing → Rendering → Paint.
INP’s goal is to quantify “responsiveness satisfaction”, the difference between a snappy experience and one that frustrates users into leaving.
Why Google Replaced FID with INP
FID was a start, but it had blind spots.
It only measured the initial delay of the first interaction, ignoring everything that came after.
This meant sites could score well on FID while still feeling sluggish in practice.
INP, on the other hand:
Measures every interaction, not just the first.
Includes full event handling and visual updates.
Captures the worst-case (99th percentile) for reliability.
This gives Google and developers a more holistic, real-world measure of perceived responsiveness.
How INP Works
Each time a user interacts:
The browser logs the timestamp of the input event.
It processes the logic triggered by that input (often JS-heavy).
The page visually updates (paint).
INP = total time between input and next paint.
The browser aggregates multiple interactions and reports the longest delay (excluding outliers) to the Chrome UX Report (CrUX).
That’s the INP score Google uses in Core Web Vitals.
Factors That Affect INP
Main thread blocking by long JavaScript tasks.
DOM reflows caused by layout recalculations.
Heavy third-party scripts (trackers, social embeds).
Unoptimized event listeners (scroll, mousemove, touchstart).
Re-renders in single-page apps caused by inefficient state changes.
Even small UI delays stack up. A few hundred milliseconds can feel like an eternity in UX time.
How to Measure INP
Field tools (real user data):
Chrome UX Report (CrUX)
Google Search Console → Core Web Vitals report
Lab tools (synthetic testing):
Lighthouse v11+ (in DevTools)
PageSpeed Insights (includes INP)
Web Vitals Extension
web-vitals.js for custom RUM monitoring
Example script:
import { onINP } from 'web-vitals';
onINP(console.log);
Combine both field and lab data. Synthetic tests diagnose issues, real data validates actual UX.
How to Improve INP - Step by Step
1. Break Up Long JavaScript Tasks
Long tasks (>50 ms) freeze the main thread.
Use DevTools → Performance tab to identify them.
Split heavy operations into microtasks:
setTimeout(doNextChunk, 0);
or
requestIdleCallback(processQueue);
2. Defer or Remove Non-Critical Scripts
Load analytics and third-party widgets after interaction readiness.
Replace heavy libraries:
Moment.js → Day.js
Lodash → native JS
Use async or defer attributes wherever possible.
3. Optimize Event Handlers
Inefficient handlers are a hidden killer of INP.
Keep handlers short.
Cache DOM lookups.
Use passive listeners for scroll and touch events:
window.addEventListener('scroll', handleScroll, { passive: true });
4. Minimize Layout Shifts During Interaction
Avoid DOM manipulation during user actions.
Pre-allocate space for expanding UI components.
Use CSS transforms instead of DOM insertion for animations.
5. Use Modern Framework Techniques
In React, use useTransition() for smooth async updates.
In Angular, explore zone-less rendering for event efficiency.
In Vue, batch DOM updates using nextTick().
Modern frameworks already provide performance hooks. Use them to keep reactivity lean.
Real-World Case Study - Cutting INP by 60% on an E-Commerce Page
A client’s product page suffered from laggy interactions, adding to cart or opening dropdowns felt sticky. Chrome UX Report showed an INP of 640 ms, mainly due to JS-bound cart logic and layout recalculations.
Findings
JS bundles blocking the main thread (1.2 MB compressed).
DOM reflow triggered on every “Add to Cart” click.
Event handlers performing redundant API calls.
Optimizations
Split JS bundle and deferred non-critical scripts.
Moved cart logic to a Web Worker to free main thread.
Throttled layout recalculations using requestAnimationFrame().
Cached API responses to reduce network calls.
Results (After 2 Weeks)
Reducing interaction latency didn’t just improve metrics, it boosted business outcomes.
INP and SEO - Beyond Speed
INP is now a Core Web Vital officially replacing FID as of March 2024.
A “Good” INP score means:
Higher ranking stability under Page Experience signals.
Better user retention and lower bounce rate.
Higher eligibility for AI Overview inclusion, since responsive pages tend to be surfaced more often in generated answers.
Responsiveness is now part of credibility, technically and algorithmically.
INP, UX, and EEAT - The Human Connection
Every millisecond of delay communicates something.
A responsive interface says competence. A laggy one says friction.
Fast reactions enhance perceived Trustworthiness and User Experience, two key EEAT pillars that affect both users and algorithms.
Speed, today, is part of your brand language.
Future of INP
Granular INP metrics: component-level responsiveness scoring.
View Transitions API for seamless navigation animations.
AI-driven UX modeling where search engines evaluate not only page load but how it feels to use.
The future belongs to sites that respond like they think.
Related Reads
FAQs
How does INP differ from FID in terms of real user experience?
FID (First Input Delay) only measured the time it took for the browser to start processing a user’s first input.
INP (Interaction to Next Paint), however, measures the total time from when the user interacts until the next visual change, across all interactions, not just the first.
This makes INP far more accurate for assessing true responsiveness throughout the session.
What’s a good INP target for mobile vs. desktop?
Google recommends the same threshold — ≤ 200 ms — for both mobile and desktop.However, real-world conditions differ:
Mobile devices often struggle due to weaker CPUs and slower network conditions.
Desktop scores are typically 20–30% faster under identical codebases.
To ensure consistency, always test both environments in PageSpeed Insights and Chrome UX Report (CrUX).
How do Single Page Applications (SPAs) affect INP scores?
SPAs rely heavily on JavaScript for rendering, which can block the main thread during user interactions.
Every route change or state update can trigger long tasks that inflate INP.
To optimize:
Use code-splitting and lazy load non-critical components.
Cache frequently accessed data.
Migrate blocking logic to Web Workers.
A well-optimized SPA can match or outperform traditional pages in INP when engineered correctly.
Can INP improvements directly impact conversions or rankings?
Yes, indirectly but powerfully.
Google’s Core Web Vitals influence Page Experience, which affects SEO rankings.
Beyond algorithms, lower INP reduces frustration and cognitive friction, leading to:
Higher conversion rates.
Longer dwell time.
Improved perceived trust.
Fast reactions translate into business results and algorithmic rewards.
How can developers monitor INP in real time?
Use web-vitals.js for real-user monitoring (RUM):
import { onINP } from 'web-vitals';
onINP(console.log);
You can send the results to analytics or performance dashboards to track trends over time.
Alternatively, tools like SpeedCurve, Calibre, and New Relic visualize INP distributions across devices, helping teams fix regressions before they impact users.
Comments