Shopify INP Too Slow? Fix Variant Pickers and Cart Drawers

Your Shopify store loads quickly, but tapping a size swatch or the Add to Cart button on a phone feels sticky. That delay has a name: Interaction to Next Paint, or INP. It is one of Google's three Core Web Vitals, and it is the one most Shopify speed work ignores, because it only shows up after the page has loaded. Here is how to read your INP, what usually causes a poor score on Shopify, and the fixes that work.

Thresholds and definitions are from web.dev and Shopify's theme performance documentation, checked on 5 November 2026.

What is INP and what counts as a good score?

INP measures how long a page takes to respond visibly after someone taps, clicks or presses a key. It looks at the interactions across a whole visit and reports the worst one, or close to the worst on pages with many interactions. A visit where every tap responds quickly except the variant picker gets judged on the variant picker.

The thresholds come from Google's INP documentation on web.dev, measured at the 75th percentile of real page loads, separately for mobile and desktop:

• Good: 200 milliseconds or less.
• Needs improvement: above 200 and up to 500 milliseconds.
• Poor: above 500 milliseconds.

The 75th percentile part matters. Your store passes only if three out of four real visits are under 200 milliseconds, and those visits include budget Android phones on patchy mobile data, not just the laptop you test on.

INP replaced First Input Delay as a Core Web Vital on 12 March 2024, according to the web.dev announcement. The older metric looked only at the first interaction. Shopify's documentation explains why the change matters for stores: Chrome usage data shows that 90 percent of user time happens after page load, which is exactly the part FID never measured.

Why does INP matter for a Shopify store?

Two reasons, one commercial and one about search.

The commercial one is simple. The slow interactions on a store are the ones closest to the sale. Shopify's own list of common slow interactions is variant selection, opening and closing the cart drawer, mega menu expansion, search input and applying filters on collection pages. A shopper who taps a size, sees nothing happen and taps again is having a worse experience exactly when they are deciding to buy.

The search reason is that LCP, CLS and INP together are the Core Web Vitals, which Shopify's performance documentation describes as a signal Google uses in ranking. Fixing INP will not rescue a page with weak content, but a poor score is a measurable mark against an otherwise good product page.

How do you check your store's INP?

INP is a field metric. It comes from real visitors, so the lab score you see in Lighthouse cannot give it to you. Shopify's documentation says it directly: "Lighthouse can't measure INP across a real page visit."

1. Start with PageSpeed Insights. Run your home page, a collection and your best-selling product through PageSpeed Insights. The section at the top shows real Chrome user data, including INP, for the URL and for the whole origin. If a page has too little traffic, you will only see origin-level data or none.
2. Check Shopify's web performance dashboard in your admin, which reports Core Web Vitals from your own visitors.
3. Look at mobile first. Desktop INP is usually fine. Mobile is where Shopify stores fail.
4. Reproduce it yourself. Install the Web Vitals Chrome extension, open a product page and click through variants, the cart drawer and the menu. The extension shows the worst interaction so far and which element caused it.
5. Slow your machine down. In Chrome DevTools, open the Performance panel settings and set CPU throttling to 4x slowdown. Your laptop is far faster than most of your customers' phones.

Lighthouse is still useful as a rough proxy. Shopify's guide notes that Total Blocking Time in a lab test correlates with INP, so a high TBT during load is a good hint that interactions will also be slow.

What are the three parts of a slow interaction?

Every interaction breaks down into three phases, and the fix depends on which one is largest. Shopify's guide to understanding INP describes them like this:

• Input delay. The wait between the tap and the browser starting your event handler. It grows when the main thread is already busy with other JavaScript, often an app or analytics script running a long task.
• Processing time. The time to run every handler attached to the interaction, from your theme, your apps and any framework code.
• Presentation delay. The time to recalculate styles, lay out the page and paint the result. Large DOM changes and expensive CSS make this phase long.

To see which phase dominates, open the Performance panel in DevTools, press record, tap the slow element, and stop. Shopify's rule of thumb is clear. If input delay is the biggest part, other JavaScript is blocking the thread, so cut third-party scripts. If processing time dominates, the handler itself does too much. If presentation delay is largest, the page update is triggering expensive layout work.

Which Shopify features usually cause poor INP?

These come up again and again in Shopify's own performance documentation.

• Too many app scripts. Shopify calls removing unused apps, pixels and third-party scripts the highest-impact fix for responsiveness. Every script competes for the same main thread, even when it is not involved in the tap.
• Variant pickers that update everything at once. Changing a variant often updates price, availability, images and the button label together. Each DOM write can trigger style recalculation and layout.
• Cart drawers animated with layout properties. Animating width, height or top forces layout on every frame. Shopify recommends transform instead.
• Hidden components built up front. Shopify's documentation notes that filter panels, cart drawers and dialogs can add thousands of DOM nodes even while closed.
• Duplicate desktop and mobile menus, which double the DOM size of the header.
• Many separate stylesheets. Each extra stylesheet link adds to the style recalculation cost of every interaction.
• Analytics listeners on clicks. Scripts that run synchronous code inside a click handler add their time to every tap.

How do you fix poor INP on a Shopify theme?

Work in this order, because the early steps are cheaper and often enough on their own.

1. Remove scripts that are not earning their place. Audit installed apps, uninstall the ones you no longer use, then check that their code really left the theme. Our Shopify app stack audit checklist covers the review side.
2. Load the rest later. Add defer to non-critical scripts, and load heavy features such as chat or reviews only on the pages and at the moment they are needed.
3. Give feedback first, do the heavy work second. Update the button or swatch state immediately, let the browser paint, then run slower work such as fetching recommendations.
4. Batch DOM updates in variant pickers. Read what you need, then write all changes together, and use requestAnimationFrame for visual updates.
5. Animate with transform and opacity for drawers, menus and modals.
6. Build hidden components on first open rather than on page load, as Shopify's lazy DOM rendering guidance suggests.
7. Make tap targets at least 48 by 48 pixels on mobile, which Shopify recommends to reduce mis-taps and repeated taps.

Step three is the one theme developers miss most often. A small pattern makes it concrete:

function yieldToMain() {
  return new Promise(resolve => setTimeout(resolve, 0));
}

addToCartButton.addEventListener('click', async () => {
  showLoadingState();        // visible response straight away
  await yieldToMain();       // let the browser paint it
  await addItemAndRefresh(); // slower work after the paint
});

The total work is the same, but the shopper sees a response inside the first frame, and INP measures the time to that next paint, not the time for everything to finish.

Can a speed app fix INP for you?

Usually not, and some make it worse. An app that adds its own script to speed up your store still adds main-thread work. Shopify's performance guides also warn about apps that cheat Lighthouse and PageSpeed tests, for example by changing what the test sees rather than what customers get. Since INP comes from real visitors, a trick that improves a lab score does nothing for the field number Google uses.

What does help is the unglamorous work above: fewer scripts, lighter handlers and cheaper DOM updates. If your INP problem is part of a wider speed issue on a large store, our post on Shopify performance issues on Plus stores covers the server and Liquid side too.

How long does it take to see an improvement?

Your own testing shows the change immediately. The field data in PageSpeed Insights comes from the Chrome User Experience Report, which reflects real visits over a trailing 28-day window, so expect the public number to move gradually over the following four weeks. Do not undo a fix because the score has not changed after a few days.

Measure the same pages before and after, on mobile, and write the numbers down. If you are weighing outside help, our guide to Shopify speed optimisation services explains what that work usually includes.

Want to know why your store feels slow to tap? Email hello@exactwhy.com with the subject "INP check" and your store URL. We will profile the variant picker, cart drawer and menu on a throttled mobile setting and send you the slowest interactions with the cause of each, free. If the fixes need theme work, we quote that after the review, and ongoing performance monitoring is available on a monthly retainer. You can also write to us through our contact page.