Interaction to Next Paint (INP) measures how long it takes your page to respond to user interactions clicks, taps, and key presses. It captures the delay from when a user interacts until the next frame is painted showing the result.
INP replaced First Input Delay (FID) as a Core Web Vital in March 2024 because it measures responsiveness across the entire page lifecycle, not just the first interaction.
Why INP matters for e-commerce
Slow interactions frustrate shoppers and directly impact your bottom line:
Add to cart buttons that don't respond immediately make customers wonder if their click registered
Size and color selectors that lag feel broken
Checkout forms that are sluggish increase abandonment
Navigation menus that delay opening make browsing tedious
Poor responsiveness impacts:
Conversion rates
Cart abandonment
Customer satisfaction
Search rankings (INP is a Core Web Vital)
INP thresholds
Rating | Score | What it means |
Good | ≤ 200ms | Interactions feel instant |
Needs Improvement | 200ms – 500ms | Noticeable delay after interactions |
Poor | > 500ms | Interactions feel broken or stuck |
200 milliseconds is the threshold for "instant" because research shows users perceive delays above this as lag.
Understanding the INP detail page
The INP detail page helps you identify exactly what's causing slow interactions.
P75 score card
Shows your 75th percentile INP, meaning 75% of interactions respond this fast or faster. This is the score Google uses for search ranking signals. The card also displays a distribution bar showing what percentage of interactions fall into Good, Needs Improvement, and Poor categories.
INP distribution
A histogram showing how interaction times are distributed. Spikes in the "Poor" range (above 500ms) indicate problem interactions that need attention. Unlike LCP which varies smoothly, INP often shows distinct clusters—fast interactions and slow ones.
INP timeline
A line chart showing your P75 INP score over time. The chart displays two lines:
Current period: Your INP scores for the selected date range
Previous period: The equivalent prior period for comparison
Sudden increases often correlate with:
New app installations
Theme updates
Adding third-party scripts (chat widgets, analytics, etc.)
INP rating over time
A stacked area chart showing the daily percentage of interactions rated Good, Needs Improvement, or Poor. This helps you see trends in your overall responsiveness.
INP by country
A world map showing INP performance by geographic region. Unlike LCP which is affected by network latency, INP is primarily about JavaScript execution—so regional variation usually indicates different device capabilities rather than network issues. Regions with more mobile or older devices may show worse INP.
INP scripts table
This is your most powerful debugging tool. It shows which JavaScript files are causing slow interactions:
Column | What it shows |
Script URL | The JavaScript file responsible for the slow interaction |
Interaction type and target | What element was interacted with (e.g., "click on .add-to-cart-button") |
Input delay | Time the browser waited before starting to process the interaction (main thread was busy) |
Processing time | Time spent running your JavaScript event handlers |
Presentation delay | Time to render the result after JavaScript finished |
Use this breakdown to understand where the problem lies:
High input delay: The main thread was blocked by other JavaScript when the user tried to interact. Look for long-running scripts that execute during page load or in response to scroll/resize events.
High processing time: The event handler itself is doing too much work. The JavaScript running in response to the click/tap is too complex.
High presentation delay: The browser is struggling to render the result. Often caused by expensive CSS, complex DOM updates, or forced reflows.
Top pages with INP score
Pages with the most interactions and their INP scores. Focus optimization efforts here for maximum impact.
Poorest INP score pages
Pages with the worst INP scores. These often indicate specific problematic scripts or interactions.
Common INP issues and how to fix them
Long-running JavaScript
If a single JavaScript task takes too long, it blocks the main thread and delays all interactions.
Break up large tasks: Instead of processing everything at once, split work into smaller chunks using
setTimeoutorrequestIdleCallbackDefer non-critical work: Don't run analytics, tracking, or background sync code during user interactions
Use web workers: Move heavy computation (like search filtering or data processing) off the main thread
Third-party scripts
Apps and third-party scripts are often the biggest culprits for poor INP on Shopify stores.
Audit your installed apps: Each app may inject JavaScript that runs on every page. Remove apps you're not actively using.
Defer non-essential scripts: Chat widgets, social proof popups, and analytics can often load after the page is interactive
Consider lighter alternatives: Some apps have lighter competitors that do the same job with less JavaScript
Note: InstaIndex scripts are designed with performance in mind. Our RUM monitoring script is ~13kB (~5kB gzipped) and our 404 monitor is under 1KB (and only loads on 404 pages). All scripts are defer-loaded so they don't block the main thread or impact your store's responsiveness.
Heavy event handlers
Event handlers that do too much work cause high processing time.
Debounce and throttle: For scroll, resize, and input handlers, limit how often they run
Use passive event listeners: For scroll and touch events, mark listeners as
passiveso they don't block scrollingVirtualize long lists: For product grids or search results, render only visible items
Layout thrashing
Reading and writing to the DOM repeatedly forces the browser to recalculate layout multiple times.
Batch DOM operations: Read all values first, then write all values
Use CSS transforms: Animate with
transformandopacityinstead of properties that trigger layout (likewidth,height,top,left)Cache layout values: If you need an element's dimensions, read once and store it
Slow add-to-cart interactions
The "Add to Cart" button is one of the most important interactions on your store.
Implement optimistic UI: Show the cart updating immediately while the actual request happens in the background
Pre-fetch cart data: Load cart information before the user clicks
Use lightweight cart drawers: Avoid full page reloads for cart updates
Quick wins for better INP
Check your INP scripts table to identify which scripts are causing slow interactions
Remove unused apps from your store—each one adds JavaScript overhead
Defer chat widgets and social proof to load after the page is interactive
Test on real mobile devices or throttle your CPU in DevTools—INP issues are often more severe on slower devices
Focus on your most important interactions first: add to cart, checkout buttons, navigation
Related articles