Core Web Vitals · Interaction to Next Paint

Shopify INP Optimization: How to Pass the 200ms Threshold

INP measures how fast your store responds when a shopper taps add-to-cart — and it is the Core Web Vital Shopify stores fail most often, because it is almost entirely a JavaScript problem. This guide explains what INP is, why Shopify stores fail it, how to diagnose it, and the fixes that actually move it, ordered by impact.

What is INP on a Shopify store?

Interaction to Next Paint (INP) measures how quickly your store visibly reacts when a shopper interacts with it: the gap between tapping Add to cart and the page painting any response — a spinner, a cart drawer sliding open, a button changing state. It covers taps, clicks, and key presses across the whole visit, and your score reflects close to the slowest of them. When that gap stretches, the store feels frozen: shoppers tap again, add duplicates, or assume the button is broken and leave.

Responsiveness is revenue. Akamai research found that cutting store load time by one second can increase conversions by up to 7%, and Deloitte/eBay research puts every 100ms of load time at roughly 1.1% of conversion. INP is the vital that captures the part of speed shoppers feel most directly — the moment they act.

Why did INP replace FID?

INP replaced First Input Delay (FID) as a Core Web Vital in March 2024 because FID measured too little: only the delay before the browser started handling the first interaction. A store could pass FID comfortably and still feel sluggish on every add-to-cart after the first tap. INP instead measures nearly every interaction across the visit — input delay, processing time, and the time to paint the next frame.

That change made JavaScript the main battleground. Under FID, heavy scripts mostly got a pass once the page had loaded. Under INP, every script competing for the browser's main thread — app embeds, trackers, theme bundles — shows up in your score every time a shopper clicks.

What INP score do you need to pass?

You need 200ms or less, measured at the 75th percentile of your real Chrome visitors. Google's Core Web Vitals thresholds are LCP ≤ 2.5s, INP ≤ 200ms, and CLS ≤ 0.10, all evaluated from CrUX field data over a rolling 28-day window — real shoppers on real devices, not a lab simulation. Our Shopify Core Web Vitals guide covers all three metrics in depth.

This is where many merchants get misled: the "Online store speed" score in Shopify admin is a Lighthouse-based lab test, not real-user field data — and Google uses CrUX field data for ranking. A lab run with no real interactions can look fine while your field INP fails. See why your Shopify speed score doesn't match reality.

Why do Shopify stores fail INP?

Shopify stores fail INP mainly because too much JavaScript competes for the browser's single main thread — and most of it comes from third-party apps rather than the theme itself.

Third-party app scripts on the main thread

A typical store runs reviews, chat, upsells, popups, loyalty, and analytics apps at once. Each injects JavaScript that executes on the main thread — the same thread that must respond when a shopper taps. If a tap lands while an app script is running, the browser finishes that work first, and the wait lands in your INP.

Theme JavaScript bundles

Large theme bundles must be parsed, compiled, and executed. Sliders, mega menus, and quick-view features often ship as one monolithic file that runs on every page, whether that page needs them or not.

Event handlers doing heavy work

The click handler itself can be the problem: an add-to-cart handler that synchronously updates the cart, fires several tracking events, and rebuilds the cart drawer DOM before painting any feedback pushes the "next paint" hundreds of milliseconds out.

How do you diagnose INP on Shopify?

Start with the field data section at the top of PageSpeed Insights — it reports your real-user INP from CrUX, the exact number Google evaluates. Then use Chrome DevTools to find the long tasks behind it.

In the Performance panel, record while clicking your own buy buttons: any task over 50ms blocks the main thread, and the flame chart shows which script owns it — usually an app embed you can name and act on.

How do you improve INP on Shopify?

Improve INP by taking JavaScript off the main thread, starting with what costs the most: app scripts first, widgets second, then your theme's own code.

1. Remove or defer app scripts. Uninstall apps you no longer use, and check for leftover script tags they leave behind. Defer everything not needed for the first interaction — trackers, popups, personalization — so it loads after the page is responsive. This is usually the single biggest INP win on Shopify.
2. Load chat and review widgets on interaction. Replace them with a lightweight placeholder and load the real widget on first scroll or click. The shopper sees no difference; the main thread stays clear during the critical first seconds.
3. Break up long tasks. Split scripts that run longer than 50ms into smaller chunks that yield back to the main thread, so a tap can be handled between chunks instead of waiting for one giant task to finish.
4. Avoid synchronous work in click handlers. Paint feedback immediately — button state, spinner — then run cart updates, analytics, and DOM rebuilds afterwards.

Notice what's absent: image work. Compression moves LCP far more than INP — that's covered in our Shopify image optimization guide — and these fixes are one layer of a broader Shopify speed optimization workflow.

What can't you fix?

Checkout scripts — along with TTFB and hosting — are controlled by Shopify and cannot be changed by merchants or apps. If checkout responsiveness drags, no theme edit or app will alter it. That is not bad news: it means your entire INP opportunity sits on the pages you do control — home, collection, and product pages, where shoppers decide to buy.

How do you catch INP regressions?

With continuous real-user monitoring — because INP regressions rarely announce themselves. The most common trigger is simply installing a new app: one script tag added today shows up as a failing p75 weeks later, once the 28-day CrUX window rolls through. A one-time optimization decays app by app.

Full disclosure: this is why we built AI Speed, our own app — from Arctic Grey, a Shopify Platinum Partner, and the first AI speed optimization app for Shopify. It applies safe automatic fixes (deferring and delaying scripts, lazy-loading, preconnect), monitors real-user Core Web Vitals including INP, traces any regression to the change that caused it, and auto-reverts when real-user metrics dip. Every change is speed-only — it never alters your store's look, layout, content, or functionality — with preview and diff before publish, timestamped backups, and 1-click revert. Comparing options first? See our rundown of the best Shopify speed optimization apps.