How Do You Improve INP on an Ecommerce Site?

Interaction to Next Paint, or INP, measures how quickly a page responds when a shopper taps, clicks or types. On an online store, a poor INP is the add-to-cart button that seems to do nothing, the size selector that lags, or the filter that freezes the page for a moment. Knowing how to improve INP on an ecommerce site starts with finding which of those interactions are slow for real shoppers.

To improve INP on an ecommerce site, measure it from real shoppers, find the specific interactions that are slow, then shorten the JavaScript work behind them: break up long tasks, defer or remove third-party scripts, and cut rendering work in event handlers. Google rates INP good at 200 milliseconds or less.

What is INP, and what is a good INP score?

Interaction to Next Paint (INP) is a Core Web Vital that measures the time from a user interaction, such as a tap, click or key press, to the next frame the browser paints in response. It looks at interactions across the whole visit and reports one of the slowest, so a single sluggish add-to-cart click can define a page's score.

INP became an official Core Web Vital in March 2024, replacing First Input Delay, as Google's web.dev announcement explains. Google's guidance is that at least 75% of interactions should respond in under 200 milliseconds. Scores above 500 milliseconds are rated poor, and anything in between needs improvement.

Why does INP matter on an online store?

Online stores are built on interactions. Shoppers pick variants, open size guides, apply filters, expand menus, add to cart and type into checkout fields. When those interactions lag, the store feels broken even when nothing has technically failed, and shoppers tap again, abandon the page or leave the cart.

INP is also one of the Core Web Vitals Google uses to assess page experience. The post on which Core Web Vitals actually move ecommerce conversion covers how INP compares with loading and layout stability, and how much revenue slow page speed costs an online store shows how to size the impact.

How do you measure INP for real shoppers?

INP has to be measured with field data from real visits, because it depends on what shoppers actually tap and when. Lab tools such as Lighthouse load a page without a person interacting with it, so they cannot report INP directly and use proxies such as Total Blocking Time instead. A page can pass in the lab and still fail INP for shoppers on mid-range phones.

Use real user monitoring or the Chrome UX Report, and split INP by page template and device. Product pages on mobile are usually where problems concentrate. The post on why a Lighthouse score differs from real user Core Web Vitals explains the gap in more detail.

What causes poor INP on ecommerce sites?

Poor INP on an online store usually traces back to the browser's main thread being busy when the shopper interacts. Common causes include:

1. Long JavaScript tasks. Theme scripts, product recommendation widgets or hydration in headless storefronts run for hundreds of milliseconds without a break.
2. Third-party scripts. Chat, reviews, personalization, tracking tags and pop-ups compete for the main thread, especially during page load.
3. Heavy event handlers. An add-to-cart or variant change that re-renders large parts of the page, recalculates prices or fires several tracking calls before updating the screen.
4. Large pages. Very large DOMs on category pages and mega menus make every update slower to render.

How do you improve INP step by step?

Start with the interactions that matter most to revenue: add to cart, variant and size selection, filters on category pages, and checkout form fields. For each slow interaction, work through these changes:

1. Break up long tasks. Split long JavaScript work into smaller pieces and yield to the main thread between them, so the browser can respond to the shopper first.
2. Show feedback immediately. Update the button state or show a loading indicator first, then run the cart update, recommendations and tracking calls afterward.
3. Defer or remove third-party scripts. Load chat, reviews and pop-ups after the page is interactive, and remove scripts from apps the store no longer uses.
4. Cut rendering work. Reduce DOM size on category pages and menus, and avoid reading layout values right after changing styles inside event handlers.
5. Debounce input-heavy features. Search-as-you-type and filter sliders should not run expensive work on every keystroke or pixel of movement.

Re-measure the same templates with field data after each release. Teams running experiments should also check that testing scripts are not adding to the problem; the guide on running A/B tests on Shopify without slowing the site down covers that.

How does Noibu's Performance agent help with INP?

Noibu's Performance agent measures Core Web Vitals from real shopper traffic, ranks the slowest page groups, identifies the cause, and stages a change for your review. Because it works from real sessions, it shows which templates and devices have the worst responsiveness and how much revenue runs through them, so the team starts with the interactions that matter most.

The Performance agent follows the same loop as every Noibu agent: find the issue, build the change, wait for your approval, ship it, measure the result, and compound what it learns. Nothing goes live without your approval. The agent works in the Noibu console and in AI tools such as Claude, ChatGPT and Microsoft Copilot through Noibu MCP. The overview of Noibu's Performance agent has more detail.

To see which pages on your own store are slowest for real shoppers, start with the free website audit.

Noibu is AI for ecommerce operations, the always-on optimization system that keeps online stores running at their best. A team of supervised AI agents finds what's broken, slow, or leaking revenue, does the work, and hands results back for human approval. Trusted by retailers like Free People, Guess, Liquid I.V., and Ariat.

Frequently asked questions