Shopify INP: How to Fix Slow Interactions

What Shopify INP Measures and Why It Matters

Shopify INP is the Interaction to Next Paint score for a Shopify storefront. It replaced First Input Delay as a Core Web Vital in March 2024, and it is a much stricter test. First Input Delay only looked at the delay before the very first interaction. INP looks at every tap, click, and key press during a visit, then reports one of the slowest of them, so a single sluggish add-to-cart button can define the whole page.

For each interaction, INP measures the time from the shopper's input until the browser paints the next frame that shows a response. That time has three parts. Input delay is how long the interaction waits because the main thread is busy. Processing time is how long your event handlers take to run. Presentation delay is how long the browser needs to calculate layout and paint the result. A slow score can come from any of the three, and the fix is different for each. The official explanation lives in Google's guide to Interaction to Next Paint.

The thresholds are simple. At the 75th percentile of page loads, 200 milliseconds or less is good, anything from 200 to 500 milliseconds needs improvement, and anything above 500 milliseconds is poor. The 75th percentile matters because it means a quarter of your visits can be slower than the number you see. For a store with a lot of mobile traffic, those slower visits are usually the shoppers on mid-range Android phones.

Why should a merchant care? Because ecommerce pages are interaction heavy. Shoppers open menus, pick sizes and colors, swipe galleries, apply filters, open cart drawers, and enter discount codes. Each one is a moment where the store either feels instant or feels broken. When a tap does nothing for half a second, shoppers tap again, abandon, or lose trust. Speed work that only targets load time misses this part of the experience entirely. If you want the broader context, our guide to Interaction to Next Paint covers the metric in general terms, and this article focuses on what is specific to Shopify.

INP also feeds into search. It is one of the three Core Web Vitals alongside Largest Contentful Paint and Cumulative Layout Shift, and Google uses field data for these signals. A poor INP will not erase strong content, but it is a measurable weakness that competitors with faster stores do not have.

How to Diagnose Shopify INP with Field Data

The first rule of fixing Shopify INP is to start with real user data, not a lab score. Lighthouse loads a page once and never clicks anything, so it cannot report INP at all. Our explainer on lab data versus field data shows why those numbers often disagree. For INP, field data is the source of truth.

Begin with the Core Web Vitals report in Google Search Console, which groups URLs by status and device. It tells you whether mobile or desktop is the problem and which page templates are affected. Next, check PageSpeed Insights for a specific URL. The top section shows Chrome User Experience Report data for that page or, if traffic is low, for the whole origin. Google documents how that dataset works in the Chrome UX Report documentation.

Field data tells you that you have a problem but not where. To find the slow interactions, use the Performance panel in Chrome DevTools with CPU throttling set to 4x or 6x slowdown to simulate a mid-range phone. Record a session in which you do what shoppers do: open the menu, choose a variant, add to cart, and open the cart drawer. DevTools labels each interaction and shows how long input delay, processing, and presentation took. Look for long tasks, which appear with a red marker, and expand them to see which script owns the time.

For ongoing visibility, add real user monitoring that records the INP attribution data from Google's open source web-vitals library. Attribution tells you which element was interacted with, which event type was slow, and which phase took the longest. Sending that to your analytics platform lets you rank the slowest interactions by how often they happen, which is how you decide what to fix first. A slow interaction that affects one percent of visits is a different priority than one that affects every product page view.

Segment by template when you review the data. Product pages, collection pages, and the cart each have different interaction patterns, and each loads a different set of apps. If you work through the product template first, our checklist for Shopify product page speed pairs well with the fixes below.

The Usual Suspects Behind a Poor Shopify INP

Across Shopify stores, poor INP tends to trace back to a short list of causes. Knowing them helps you test the right things first.

Long tasks on the main thread

The browser handles input, scripts, layout, and painting on a single main thread. Any task that runs longer than 50 milliseconds is classified as a long task, and while it runs the browser cannot respond to a tap. If a shopper taps during a long task, the interaction waits in line, and that wait becomes input delay.

Heavy event handlers

Some interactions do far too much work inside the handler. A variant picker that re-renders the entire product form, recalculates every price, and fires several analytics events before updating the screen has a long processing time. The shopper sees nothing change until all of that finishes.

Third-party app scripts

Review widgets, popups, loyalty programs, upsell tools, chat widgets, and A/B testing scripts each add JavaScript that competes for the same main thread. Individually they look harmless. Together they create a crowded thread and long tasks at the worst moments. Our breakdown of how third-party apps hurt Shopify page speed goes deeper on this.

Large DOM and expensive layout

Presentation delay grows with page complexity. A collection page with thousands of DOM nodes, deeply nested sections, and heavy CSS makes every visual update more expensive. Filters and sorting that rewrite large parts of the page are especially costly.

Unused JavaScript

Themes and apps often ship far more code than a page uses. That code still has to be downloaded, parsed, and compiled, and parsing competes with user input. Our guide on how to remove unused JavaScript explains how to find and cut it.

Fixes: Break Up Long Tasks and Yield to the Browser

Once you know which interactions are slow, the core technique is to keep the main thread free so the browser can paint a response quickly. Google's guide to optimizing INP describes the approach, and it comes down to a few practical moves.

Do the visible work first

When a shopper taps add to cart, the first job is to show that something happened: update the button state, open the drawer, or show a spinner. Everything else, such as analytics events, recommendation refreshes, and secondary UI updates, can wait. Structure handlers so the visual feedback runs first and the rest is deferred.

Yield to the main thread

Long tasks can be split into smaller pieces by yielding control back to the browser between steps. Modern browsers offer scheduler.yield for this, and a setTimeout with a zero delay works as a fallback. After each yield, the browser has a chance to process pending input and paint. A task that used to block for 300 milliseconds becomes several short tasks, and taps no longer wait for the whole thing.

Defer non-critical scripts

Load scripts that are not needed for the first interaction after the page is interactive. Use the defer attribute for scripts that must run in order, load widgets only when they scroll into view, and delay chat and popup tools until the shopper shows intent or a short idle period passes. The goal is to avoid competing for the main thread while the shopper first tries to use the page.

Reduce the work per interaction

Audit your event handlers for work that does not need to happen. Avoid forced layout reads inside loops, debounce handlers tied to scrolling and typing, and update only the parts of the page that changed. On collection pages, consider limiting how many products render before the shopper scrolls, which also shrinks the DOM.

Taming Apps and Third-Party Scripts

For most Shopify stores, third-party code is the largest controllable factor in INP. The challenge is that every script has a business owner who wants it. The way through is to treat scripts as a budget and review them with data.

Start with an inventory. List every app that injects scripts into the storefront, every tag in your tag manager, and every script added directly to the theme. For each, record who owns it, what it does, and whether it is still used. Remove anything unused. Uninstalling an app does not always remove its code from the theme, so check theme files for leftover snippets and script tags.

Next, measure the cost. In DevTools, the Performance panel and the Bottom-Up view show how much main thread time each script consumes. Rank the scripts by cost and compare them to the value they deliver. A reviews widget that drives conversion on product pages may deserve its cost, but a rarely used popup that blocks the thread on every page probably does not.

Then change how scripts load. Move scripts to load later, load them only on templates that need them, and replace heavy widgets with lighter alternatives when they exist. Consider whether features such as simple badges or announcement bars can be built with plain theme code instead of an app. Shopify's own performance best practices for themes recommend keeping JavaScript lean and loading only what each page needs.

Edge delivery can help here too. Nostra's edge platform serves optimized storefront pages from the network edge and manages how scripts and assets are delivered, which reduces the work the shopper's device has to do before it can respond. It also filters automated traffic, so your field metrics and analytics reflect real shoppers instead of bots. You can learn more at Nostra.

Monitoring Shopify INP Over Time

INP is not a one-time fix. Themes get updated, apps change their code, and marketing adds new tags. A store that passes today can fail in a month without anyone noticing. Build monitoring into your routine so regressions surface quickly.

Set up a dashboard that tracks INP at the 75th percentile by device and template, using your own real user data as well as the Chrome UX Report. Real user data updates within days, while CrUX data lags because it uses a rolling 28-day window. Use both: your own data for fast feedback, and CrUX to confirm what Google sees.

Set alerts. If mobile INP on product pages crosses 200 milliseconds, someone should be notified. Tie alerts to releases so you can connect a regression to a specific change, such as an app install, a theme update, or a new campaign tag.

Finally, schedule a quarterly script audit, especially before peak season. The weeks before a major sale are the worst time to discover that a new app has pushed your mobile INP into the poor range. A short audit in advance protects both your search visibility and your conversion rate when traffic is highest.

Frequently Asked Questions About Shopify INP

What is a good INP score for a Shopify store?

Google treats an INP of 200 milliseconds or less at the 75th percentile as good, 200 to 500 milliseconds as needing improvement, and anything above 500 milliseconds as poor. Aim for under 200 ms on mobile, since mobile devices have slower processors and usually produce the worst numbers.

Why is my Shopify INP poor when my Lighthouse score is high?

Lighthouse is a lab test that loads the page once and does not click anything, so it cannot measure INP. INP comes from real visitors interacting with real devices. Your field data can be poor even when a lab run looks fine, especially on low-end phones with many apps installed.

Which Shopify apps hurt INP the most?

Any app that runs JavaScript on every interaction can hurt, but the usual offenders are review widgets, popups, upsell and cart drawers, loyalty tools, chat widgets, and tag manager containers loaded with many tags. Test by disabling one app at a time on a staging theme and comparing results.

Does fixing INP improve conversion rate?

A faster response to taps removes friction at the moments that matter most, such as opening a variant picker, adding to cart, or applying a filter. Google does not publish a fixed conversion lift for INP, so measure your own funnel before and after each change rather than expecting a specific number.

How long does it take for INP improvements to show in Search Console?

The Chrome User Experience Report uses a rolling 28-day window, so changes appear gradually. Expect to wait several weeks for the full effect, and use your own real user monitoring to confirm changes within days.

Make Your Store Respond Instantly

A fast-loading store that responds slowly to taps still loses shoppers. Fixing Shopify INP means measuring real interactions, breaking up long tasks, and keeping third-party scripts on a strict budget. If you want a faster storefront without a long engineering backlog, talk to the Nostra team about edge delivery, script management, and bot filtering built for ecommerce brands.