Interaction to Next Paint (INP): A Practical Guide for UX-Focused Teams

What is Interaction to Next Paint (INP)?

Your website loads in two seconds. Your Lighthouse score sits comfortably in the green. Yet users still complain that buttons feel stuck, forms lag, and menus take forever to open. The problem is likely an Interaction to Next Paint issue that affects both your search rankings and your conversion rates.

This guide explains what INP measures, how it works, and how designers and developers can improve it. We will cover the technical details in plain language and connect them to the business outcomes that matter for B2B and eCommerce brands.

Interaction to Next Paint is a Core Web Vitals metric from Google that measures how long it takes, in milliseconds, for a web page to visually respond after a user interacts with it. When a user clicks a button, taps a link, or presses a key, INP tracks the time from that user input until the browser paints the next frame showing the result.

INP uses real user interaction timing via the Event Timing API. You can find the full technical specification in Google’s Interaction to Next Paint guide.

The INP metric captures the entire lifecycle of an interaction. This includes input delay (the wait before handling begins), processing duration (JavaScript execution), and presentation delay (the time until the next paint appears on screen). Understanding these phases helps teams identify where slow interactions originate.

Lower INP values mean a page feels snappy and reliably responsive. Higher values create poor responsiveness, making interfaces feel stuck or broken. When a user initiates an action, and nothing happens for 400 milliseconds, frustration builds quickly. A good INP score is considered to be less than 200 milliseconds, while scores above 500 milliseconds are deemed poor and can negatively affect SEO rankings.

Improving INP can lead to better user experiences, which in turn can reduce bounce rates and increase user satisfaction, positively influencing SEO performance.

Parachute Design Group Inc., as a performance-focused web design agency, treats INP as a core UX and conversion metric. We consider it during planning, design, and development rather than treating it as an afterthought.

Core Web Vitals Context: INP and Modern SEO

INP is one of Google’s three Core Web Vitals, alongside Largest Contentful Paint (LCP) and Cumulative Layout Shift (CLS). Together, these core web vitals metrics define how Google evaluates user experience on your site. You can review all three in the Core Web Vitals overview on web.dev.

Google announced on March 12, 2024, in the Chrome Developers blog that INP replaced First Input Delay (FID) as a stable core web vital metric and ranking signal. This shift reflects a new metric approach that better captures real-world page responsiveness.

Here is what each metric measures:

Metric	What It Measures
LCP	Load speed (time to largest contentful element)
CLS	Visual stability (unexpected layout shifts)
INP	Interaction responsiveness (input to visual feedback

Google evaluates INP using the 75th percentile of field data from the Chrome User Experience Report (CrUX). You can learn more about this data source in the CrUX documentation on developers.google.com.

For organic visibility and lead generation, faster interactions create lower bounce rates and more completed journeys. When your search page results load but interactions feel sluggish, users leave before converting. Strong INP supports both SEO performance and revenue outcomes.

How INP Is Measured

INP measures interaction latency in milliseconds as the time between a user interaction and the next paint that reflects that interaction. The browser observes all the interactions during a page session and calculates the INP value based on the slowest ones.

Each interaction consists of three phases:

1. Input delay: The wait before the browser starts handling the event, often caused by other tasks blocking the main thread
2. Processing time: The duration of event handlers and event callbacks executing
3. Presentation delay: The time from processing completion until the next frame renders on screen

For a page session with many user interactions, the browser uses the worst interaction or the 98th percentile of all observed interactions as the INP value. This approach ensures the metric reflects problematic interactions rather than just average performance. The Interaction to Next Paint documentation on web.dev explains this calculation in detail.

Which interactions count? INP tracks clicks, taps on a touchscreen device, and keyboard interactions. Scrolling and passive hovers do not qualify.

Google categorizes INP scores using these thresholds:

Rating	INP Score
Good	≤200 ms
Needs Improvement	200–500 ms
Poor	>500 ms

Consider a user tapping “Add to cart” on your eCommerce site. The input delay occurs while the main thread finishes other work. Processing time covers the JavaScript that updates the cart. Presentation delay is the time it takes for the mini-cart to appear. If any phase takes too long, your INP suffers.

INP vs First Input Delay (FID)

INP is the official successor to First Input Delay, designed to better represent real-world responsiveness across multiple interactions throughout a user session.

First Input Delay measured only the delay before the browser started handling the first user interaction. It ignored all processing time and rendering work after that initial moment. You can find the archived FID documentation on web.dev.

The key differences between these metrics:

Aspect	FID	INP
Interactions measured	First interaction only	All qualifying interactions
Phases included	Input delay only	Input, processing, and paint
Session coverage	Initial page load	Entire lifecycle

A site could achieve a high FID score yet still feel sluggish in later interactions. Users who experienced a fast first-click response but slow interactions with menus, filters, or forms would still perceive the site as unresponsive.

From a design and engineering perspective, INP requires continuous performance discipline. You cannot optimize only the initial page load and expect good INP values. Every interaction throughout the session matters.

Teams that previously focused on FID should audit their existing performance budgets. Your monitoring setup needs to prioritize INP instead, tracking individual user interactions across entire sessions rather than just the first interaction.

What Is a Good INP Score for Your Site?

INP thresholds come directly from Google’s Core Web Vitals guidance. These benchmarks apply to all websites regardless of industry or complexity.

The official targets are:

• Good: ≤200 ms at the 75th percentile
• Needs Improvement: Between 200 and 500 ms
• Poor: Greater than 500 ms

These values come from the Core Web Vitals thresholds on web.dev. Google evaluates them at the 75th percentile for page load times, calculated separately for mobile and desktop devices.

Most B2B and eCommerce brands should prioritize mobile INP first. Mobile devices have less powerful processors, and mobile performance tends to lag behind desktop devices. Many conversions also originate from mobile sessions.

Marketing leaders should treat “Needs Improvement” INP as an active risk. Slow interactions hurt lead generation and paid acquisition performance. If your page’s INP sits at 350 ms, users feel the delay on every click. That creates friction, reducing form completions and purchase conversions.

At Parachute Design, we set INP targets during discovery. These targets are incorporated into technical specifications and QA criteria for new WordPress and WooCommerce builds as part of our broader work as a Canadian web design agency. Good INP values are a requirement, not a bonus.

How to Measure INP in Practice

Teams should combine field data and lab testing for a realistic view of INP performance. Field data shows what real users experience. Lab testing helps diagnose specific issues.

Field measurement tools:

PageSpeed Insights provides real-world data from the Chrome User Experience Report (CrUX). PageSpeed Insightsshows INP at the 75th percentile for a URL or origin, based on real user data from CrUX. This is your primary source for understanding how actual visitors experience your site.

Google Search Console’s Core Web Vitals report groups URLs with poor INP scores. This helps you prioritize which templates and user flows need attention based on contextual data about your traffic.

Real User Monitoring (RUM) provides per-session INP data by running JavaScript on your site. Many RUM tools adopt the Web Vitals JavaScript library to collect accurate metrics. This web vitals library lets you track individual user interactions and attribute INP to specific elements.

Lab testing tools:

Chrome DevTools Performance panel lets you record interactions and inspect flame charts, the Interaction lane, and long tasks. The Local Metrics view (introduced around Chrome 127) shows live INP during testing. You can find documentation in the DevTools Performance guide on developer.chrome.com.

For custom monitoring, developers can instrument INP using the Web Vitals JavaScript library and send events to Google Analytics 4 or another dashboard. This provides ongoing INP field data specific to your audience and device capabilities.

How INP Affects SEO and GEO/Lead Generation

INP affects search performance both as a Core Web Vitals signal and through its impact on user behaviour. Since March 2024, INP has contributed to the page experience signals that influence Google rankings. The Search Central documentation on page experience explains how these signals factor into search results.

Slow INP correlates with higher bounce rates and lower conversion rates. When interactions feel stuck, users leave before completing their goals.

The INP case study on web.dev describes how RedBus achieved a 7% sales lift after implementing responsiveness improvements tied to INP optimization. That kind of revenue impact makes INP a priority for any eCommerce operation.

For B2B lead generation sites, poor INP scores reduce form completions, meeting bookings, and contact requests. Agencies that specialize in B2B web design services often focus on optimizing these critical interactions to protect lead volume. A prospect filling out a multi-step form who experiences interaction delays on each field will abandon before submitting. User satisfaction drops with every slow response.

For GEO or location-based campaigns, slow interactions on mobile hurt physical visits and call volume. When a user taps “Get directions” or “Call now” and the button does not respond quickly, they move on to a competitor who provides initial visual feedback faster.

Parachute Design treats INP improvements as part of conversion rate optimization. As a web development company in Canada, we connect performance work to measurable business outcomes rather than treating it as a technical checkbox separate from revenue goals.

Common Causes of Poor INP

Most poor INP issues come from heavy work on the main thread or complex rendering during interactions. Understanding the root causes helps teams target their optimization efforts.

Technical causes:

• Long tasks (JavaScript execution exceeding 50 ms) from large frameworks or poorly optimized plugins
• Heavy analytics tags, chat widgets, and ad scripts that execute on user input
• Multiple event handlers are attached to the document that fire on every interaction
• Layout thrashing from repeated reads and writes to layout properties
• Third-party scripts that block the main thread during interactions

Design-related causes:

• Complex components like mega menus with hundreds of DOM elements
• Carousels and filters that trigger large DOM updates on each interaction
• WYSIWYG editors and rich text inputs that process multiple events per keystroke
• Media-heavy interfaces with large hero videos or animated backgrounds compete for CPU and GPU time

On WordPress and WooCommerce, careless plugin stacking often introduces many global event handlers. Each plugin adds its own event listener that runs on interactions. During redesigns, audit your plugin list and remove anything that degrades interactivity.

Price filters, product sorters, and “add to cart” flows are common culprits in eCommerce. These interactions occur frequently and often involve complex JavaScript that leads to poor INP scores.

How Designers and Developers Can Improve INP

INP is a shared responsibility between UX designers, front-end developers, and back-end engineers. Optimizing INP requires coordination across roles throughout the project lifecycle.

Parachute Design incorporates INP considerations at every stage of our responsive web design services:

• Discovery: User journey mapping identifies high-value interactions that need fast response times
• Wireframing: Simplify interaction patterns to reduce complexity before visual design begins
• Design: Prioritize critical feedback states and avoid blocking animations
• Development: Set performance budgets for JavaScript size, third-party scripts, and component complexity
• QA: Test interactions on real devices with throttled networks, reviewing INP data alongside visual checks
• Maintenance: Ongoing monitoring and plugin review prevent INP regressions over time

Web developers should profile components in DevTools before considering them complete. Partnering with an experienced web development team in Toronto can help ensure designers collaborate to keep visual feedback states achievable within the target INP budget.

Clients should involve their design and development partners when planning new marketing scripts, widgets, or personalization tools. INP impact should be assessed before deployment rather than discovered after page loads slow down.

Optimizing INP: Reducing Input Delay

Input delay occurs when the browser is too busy to handle an interaction immediately. Long tasks on the main thread block event processing.

Recommendations:

• Split large JavaScript bundles and load non-essential scripts after initial user interactions via code-splitting and async loading. The Performance patterns for JavaScript on web.dev document these techniques.
• Defer non-critical third-party scripts like marketing tags and heatmaps. Load them after the first paint or through a tag manager with strict execution rules.
• Move heavy calculations off the main thread using Web Workers in complex applications that require sustained computation.
• Watch for long tasks in Chrome DevTools. Break tasks exceeding 50 ms into separate tasks that yield back to the main thread between frames.
• On WordPress, replace bloated themes and unnecessary plugins with custom, lean components that respect performance budgets.

Built-in browser controls like lazy loading can also reduce main thread congestion during the initial page load, freeing resources for faster interaction handling.

Optimizing INP: Streamlining Event Processing

Processing duration covers the work that runs inside event handlers after an interaction begins. Efficient handlers improve INP directly.

Recommendations:

• Keep event handlers focused on essential logic. Defer secondary work like analytics calls and complex data fetching with requestIdleCallback, setTimeout, or queued microtasks.
• Debounce or throttle handlers for high-frequency events. For search inputs, use 150–300 ms debounce windows to avoid running handlers on every keystroke.
• Remove global document-level listeners where possible. Scope handlers to specific elements so unnecessary code does not run on every interaction.
• Profile event handlers in DevTools to identify functions that dominate processing time. Look at the flame chart to identify the specific callbacks that are consuming milliseconds.
• In WooCommerce builds, profile price filters, sort controls, and “add to cart” flows. These are critical interactions that often involve complex DOM updates.

When your handlers run multiple event handlers for a single interaction, look for opportunities to consolidate or eliminate redundant work.

Optimizing INP: Reducing Presentation Delay

Presentation delay is the gap between finished processing and the next painted frame. DOM complexity and rendering work determine how long this phase takes.

Recommendations:

• Simplify the DOM structure. Avoid deeply nested containers within components that respond to user input, such as accordions, menus, and forms.
• Prioritize visible content updates first, then handle less important UI changes in later frames. Users need initial visual feedback quickly, even if secondary updates follow.
• Use modern CSS strategies, such as content-visibility, for below-the-fold sections. The content-visibility guide on web.dev explains this approach.
• Prefer CSS transitions over JavaScript-driven animations for interactive components. CSS animations run on the compositor thread, avoiding main thread congestion.
• Design states that are visually rich yet light enough to render within the target INP budget. Designers should review rendering costs with developers during component creation.

Remember that INP only measures the time to the next paint, not the completion of all visual updates. Show spinners or skeleton states before heavy work begins to provide fast visual feedback while processing continues.

Workflow: Finding and Fixing Specific INP Issues

A repeatable workflow helps teams diagnose and improve INP on production sites. Here is the process Parachute Design follows:

Step 1: Identify problem areas. Use Google Search Console and PageSpeed Insights to find page types and device categories with poor INP. Focus on templates that serve significant traffic.

Step 2: Understand user behaviour. Use field RUM data or analytics to see which elements users interact with most on problematic pages. Common targets include main navigation, search boxes, filters, and CTAs.

Step 3: Reproduce and record. Reproduce slow interactions locally using Chrome DevTools with CPU throttling enabled. Record the interaction using the Performance panel. Review the Interaction lane and identify long tasks.

Step 4: Refactor and validate. Refactor JavaScript and the DOM structure around the offending interaction. Retest in the lab to confirm improvement. After deployment, monitor fresh field data to validate real-world gains.

Senior developers at Parachute Design review both UX flows and performance traces during this process. Durable INP gains require understanding both what users do and why the code responds slowly.

How Parachute Design Bakes INP into Every Project

Parachute Design is a Toronto-based web design company that focuses on performance and Core Web Vitals from the first workshop onward. We integrate INP considerations throughout our process rather than bolting them on at the end.

Discovery and UX strategy: We map critical user journeys, identify high-value interactions, and set INP performance budgets. These budgets guide decisions throughout the project.

Design: Our designers create interface patterns that avoid unnecessary complexity. We limit blocking animations and ensure clear visual feedback on every interaction. Components are designed to render quickly.

Development: We build custom WordPress and WooCommerce themes instead of relying on generic multipurpose templates. This approach controls JavaScript weight and DOM structure for better INP outcomes, supported by our role as an award-winning Toronto web design company.

QA: Our checklists include INP-focused testing on real mobile and desktop devices under various network conditions. We test both marketing pages and transactional flows.

Maintenance: Long-term retainers include periodic Core Web Vitals reviews. As content, plugins, and integrations evolve, we ensure INP remains strong. New marketing tools get a performance review before deployment.

This approach means our clients launch with good INP values and maintain them as their sites grow.