A poor INP on Shopify means interactions lag: a shopper taps “Add to cart”, switches a variant, or opens the menu, and the page hesitates before it responds. The load finished, but the store still feels slow. The reason is almost always the same — the browser’s main thread is busy running JavaScript at the exact moment the shopper interacts, so it can’t paint the response until that work clears. Fixing INP is about reducing how much JavaScript runs on interaction and breaking the long tasks into smaller pieces the browser can squeeze a response between.
What INP is, and the thresholds
INP (Interaction to Next Paint) is a Core Web Vital that measures how quickly your store responds to taps, clicks and key presses. Across a whole visit it reports on your slowest interactions — not the average — so one janky tap can define the score. Google’s thresholds, on real mobile field data:
- 200 ms or less — good
- 200–500 ms — needs improvement
- above 500 ms — poor
INP became a Core Web Vital in March 2024, replacing First Input Delay (FID). FID only measured the delay before the browser started processing the very first interaction — an easy metric to pass. INP is much stricter: it covers every interaction and the full time until the next frame is painted, which is why plenty of stores that passed FID now show poor INP.
Why it matters
INP is the “feels laggy after it loads” vital. LCP tells you how fast the page appears; INP tells you how fast it reacts. A store can score a fast LCP and still frustrate shoppers if the menu stutters, the variant picker freezes for half a second, or the cart drawer takes a beat to open. That hurts two ways: it degrades the shopping experience on the exact actions that lead to a purchase, and — because INP is a Core Web Vital — it factors into Google’s page-experience signals. It sits alongside LCP and CLS in our Shopify Core Web Vitals overview.
The common causes on Shopify
Poor INP is a main-thread problem, and on Shopify the main thread is usually clogged by the same handful of culprits:
- Long JavaScript tasks. Any task over 50 ms blocks the browser from responding. Big bundles that parse and execute in one go create these.
- Too many app event handlers. Every app that attaches listeners to page elements adds work that fires on interaction. Ten apps each hooking “add to cart” turns one tap into ten scripts.
- Analytics and marketing tags. GA4, Google Ads, the Meta Pixel, TikTok, Klaviyo and tag managers all run JavaScript — and often fire more on clicks and form activity.
- Variant and cart scripts. Switching a variant or updating the cart can trigger heavy re-rendering, price recalculation, and network calls that run on the main thread.
- Heavy interactive widgets. Carousels, quick-view modals, mega-menus, live search, and sticky-cart bars do real work on every interaction, especially when several run at once.
How to diagnose it
Start with field data. INP is graded on real visitors, and lab tools can’t reproduce a real person’s interactions. Open the Core Web Vitals report in Google Search Console and the “field data” section of PageSpeed Insights for your key templates — product, collection, cart. That tells you whether INP is genuinely poor and on which pages.
Then reproduce it in the lab. Open the page in Chrome, launch DevTools → Performance, and record while you actually interact — tap add-to-cart, change a variant, open the menu. Look for long tasks (flagged with a red corner) that line up with your interaction, then expand the call tree to see which script owns them. That attribution — “this handler, from this app, ran for 340 ms” — is what turns guesswork into a fix list. Chrome’s INP debugging works the same way in DevTools.
How to fix each cause
| Cause | Fix |
|---|---|
| Long JavaScript tasks | Break work into smaller chunks; yield to the main thread (e.g. setTimeout/requestIdleCallback) so the browser can respond between pieces. |
| Too many app event handlers | Audit installed apps; remove or replace ones that add handlers on every page, especially unused ones. Fewer apps, fewer listeners. |
| Analytics / marketing tags | Cut duplicate and non-essential tags; load them deferred or after interaction; consolidate through one tag manager instead of many raw snippets. |
| Variant / cart scripts | Simplify variant and cart logic so a switch doesn’t re-render the whole page; avoid synchronous work and blocking network calls on the main thread. |
| Heavy interactive widgets | Simplify or lazy-init carousels, quick-view and live search; only load a widget’s code when it’s actually needed, not on every page. |
Two moves cover most stores. First, remove or defer non-essential JavaScript — if it doesn’t need to run before the shopper interacts, it shouldn’t. Second, break up the long tasks that remain so the browser always has a gap to paint a response. Because tags are such a frequent offender, it’s worth a dedicated pass — our Shopify third-party scripts audit walks through trimming them without breaking tracking.
How to verify
Change one thing at a time and re-measure. In DevTools, re-record the same interaction and confirm the long task shrank or split. But the real verdict is field data: INP improvements show up in Search Console and PageSpeed Insights over the following weeks as real visits accumulate. Lab wins that don’t move the field number aren’t wins. Give it time, and watch the slowest interactions, since INP reports on those, not the median.
Common mistakes
- Chasing the lab score only. A green lab INP with poor field data means you fixed the wrong interaction. Field data is the source of truth.
- Deleting tracking to win the number. Defer and consolidate tags; don’t blind yourself to conversions by ripping out analytics wholesale.
- Blaming the theme when it’s the apps. A lean theme can still feel laggy under ten apps’ worth of handlers. Audit what you’ve bolted on first.
- Optimizing INP while LCP is broken. If the page is also slow to appear, start there — see poor LCP on Shopify — then come back to responsiveness.
- One-and-done. Every new app or tag can reintroduce long tasks. Re-check after changes.
When to get help
If your INP is poor and you’ve trimmed the obvious tags but the store still stutters, the problem is usually buried in how apps and widgets interact — hard to untangle without profiling each long task and knowing which handler is safe to defer. That’s diagnostic work, and it’s exactly what we do. If the whole store feels sluggish and you’re not sure whether it’s INP, LCP or something else, start with why is my Shopify store so slow, then bring us the specifics. We can’t promise a magic number — anyone who guarantees one is guessing — but we can tell you precisely what’s costing you responsiveness and what to cut or defer first, through our speed up your store solution.
Store feels laggy after it loads? Send us your store URL — we’ll find the JavaScript hurting your INP, from apps to tags to widgets, and tell you what to cut or defer first. See how we speed up Shopify stores or get a free profit audit.