Optimize INP: Interaction to Next Paint for Shops 2026

Since March 2024, Interaction to Next Paint (INP) has been the official Core Web Vital for interactivity, replacing the previous First Input Delay (FID). Yet 43% (HTTP Archive) of all websites still fail the 200-millisecond threshold. For online shops, a sluggish INP means customers abandon before they buy. In this article, you will learn what INP measures, why it matters for shop operators, and how to optimize it technically.

What Is INP and Why Did It Replace FID?

Interaction to Next Paint (INP) measures the latency between a user interaction and the next visual update in the browser. Unlike the former First Input Delay, which only evaluated the first interaction, INP captures all interactions during a page visit and reports the worst one (or an approximation for pages with many interactions). The thresholds are: under 200ms is good, 200-500ms needs improvement, and over 500ms is poor (web.dev).

Technically, each INP measurement consists of three phases: Input Delay (time between the user interaction and the start of event handler execution), Processing Time (duration of the event handlers themselves), and Presentation Delay (time between the end of event handlers and the next frame rendering). Understanding these three phases is crucial for targeted optimization, as each phase has different causes and solutions.

The switch from FID to INP was necessary because FID painted an unrealistically positive picture. Nearly all websites passed the FID test, even though users experienced noticeable delays. After the transition to INP, mobile Core Web Vitals pass rates dropped by approximately 5 percentage points (HTTP Archive Web Almanac). INP reflects the actual user experience far more realistically because it considers not just the first click but also the tenth and hundredth interaction in its assessment.

For e-commerce shops, INP is particularly relevant: every interaction counts, from clicking product filters to opening a configurator to the add-to-cart button. Typical Shopware or WooCommerce shops have dozens of interactive elements per page. When these actions respond sluggishly, shop operators lose customers and revenue. Studies show that websites with good Core Web Vitals record 24% lower bounce rates (Digital Applied).

Measuring INP: Tools and Methods

Before you optimize, you need to know your current INP value. INP can be measured with both field data (real users) and lab data (simulated tests). For meaningful results, a combination of both approaches is recommended:

• Google Search Console (Core Web Vitals Report): Shows INP values from real user data (CrUX). This is the most relevant source, as Google uses this data for ranking.
• PageSpeed Insights: Combines field and lab data. The "Real User Experience" section shows CrUX INP data when sufficient traffic is available.
• Chrome DevTools (Performance Panel): Allows recording individual interactions. Under "Interactions" you can see Input Delay, Processing Time, and Presentation Delay.
• Web Vitals Chrome Extension: Shows INP in real-time while browsing and helps quickly identify problematic interactions.
• web-vitals JavaScript Library: Captures INP programmatically and can send data to your analytics infrastructure. Ideal for continuous monitoring.
• Lighthouse (from version 12): Contains a TBT (Total Blocking Time) value that correlates strongly with INP and serves as a lab proxy.

The Most Common INP Problems in E-Commerce

When analyzing online shops, we typically identify recurring patterns that lead to poor INP values. Most problems can be traced back to three root causes: too much JavaScript on the main thread, uncontrolled third-party scripts, and insufficient prioritization of user interactions.

JavaScript Optimization: Unblocking the Main Thread

The most effective strategy for improving INP is to unblock the browser's main thread. Every millisecond the main thread spends executing JavaScript is unavailable for processing user interactions. The goal: break long tasks into smaller units so the browser can respond to inputs between chunks. Chrome classifies any task over 50ms as a "Long Task". The more long tasks running on your shop pages, the higher the INP value will be.

A typical problem in complex shop systems is the initialization of product pages: price calculation, variant logic, image galleries, review widgets, and analytics tracking are often executed synchronously during page load. Together, these regularly create tasks of 200-500ms that completely block the main thread. Any user interaction during this time remains unanswered until the task completes.

The most modern approach to breaking up such tasks is the scheduler.yield() API, available in Chrome since 2024. It allows you to deliberately interrupt a running task and return control to the browser, so that pending user interactions are processed with priority:

// Break long tasks into chunks with scheduler.yield()
async function processLargeProductList(products) {
  for (let i = 0; i < products.length; i++) {
    renderProductCard(products[i]);

    // Yield to browser every 5 products
    if (i % 5 === 0 && 'scheduler' in globalThis) {
      await scheduler.yield();
    }
  }
}

// Fallback for browsers without scheduler.yield()
function yieldToMain() {
  if ('scheduler' in globalThis) {
    return scheduler.yield();
  }
  return new Promise(resolve => setTimeout(resolve, 0));
}

Beyond scheduler.yield(), there are additional proven strategies that have been established in professional web development:

• Code-Splitting: Only load the JavaScript needed for the current page. Dynamic imports (import()) enable lazy loading of modules.
• Web Workers: Move compute-intensive operations like price calculations, filter logic, or sorting into Web Workers that do not block the main thread.
• requestAnimationFrame: Use requestAnimationFrame for visual updates to avoid layout thrashing.
• Debouncing and Throttling: Limit event handlers for scroll, resize, and input to reasonable intervals (typically 100-150ms).
• Tree Shaking and Dead Code Elimination: Remove unused JavaScript from the bundle. Modern bundlers like Vite or Rollup typically handle this automatically.

QuintoAndar, one of Brazil's largest real estate platforms, reduced their INP by 80% and increased conversions by 36% (web.dev) by systematically breaking up long tasks and deferring non-critical JavaScript. Similarly, RedBus achieved a 7% revenue increase (web.dev) after targeted INP optimization. These results demonstrate that the return on investment from JavaScript optimization is measurable and often substantial.

Another approach is using requestIdleCallback for non-time-critical tasks. This API only executes code when the browser is idle. This way, analytics tracking, prefetch logic, or DOM cleanup can be processed without impacting INP. For Shopware shops, it is additionally recommended to review all installed plugins: each plugin can bring its own JavaScript that burdens the main thread.

Bringing Third-Party Scripts Under Control

Third-party scripts are one of the most common and simultaneously hardest-to-control INP offenders. Tracking pixels, tag managers, chat widgets, social media embeds, and consent management platforms all share the same main thread as your shop interactions. In many online shops, 30-50% of total JavaScript load comes from third-party code outside the direct control of the development team. The Italian marketplace Subito was able to improve their INP by 38ms simply by disabling a single TikTok tracking script (web.dev). This case dramatically demonstrates how massively individual third-party scripts can affect interactivity.

Particularly critical is the Google Tag Manager (GTM): every dataLayer.push() potentially triggers multiple tag evaluations that block the main thread. An optimized GTM configuration can save 20-100ms of INP (industry analyses). The following measures help tame third-party scripts:

• Conduct a script audit: Identify all loaded scripts with Chrome DevTools (Coverage Tab) and remove unused tags.
• Adjust loading strategies: Use async or defer for non-critical scripts. Even better: load scripts only after user interaction (interaction-triggered loading).
• GTM Server-Side Tagging: Shifts tag execution from the browser to the server. Significantly reduces client-side blocking.
• Facade Pattern: Replace heavy embeds (YouTube, chat widgets) with lightweight placeholders that only load the actual script on click.
• Define performance budgets: Set a ceiling for total third-party JavaScript size (e.g., max 100 KB gzipped) and monitor deviations.

An often overlooked aspect is the order of script execution: when an analytics tag loads before the actual shop JavaScript, the first user interaction (typically within the first 3-5 seconds) may hit a blocked main thread. Always prioritize shop-critical JavaScript over tracking and marketing tags. In practice, this means: the add-to-cart handler must execute before the Facebook pixel, not the other way around.

INP on Mobile Devices: The Biggest Challenge

The discrepancy between desktop and mobile INP is one of the biggest challenges for shop operators. Mobile devices show on average 60-80% worse INP scores than desktop computers (CrUX). This is due to weaker processors, less memory, and less stable network connections. Since Google uses the Mobile-First Index for ranking, it is precisely these poor mobile values that determine your visibility. A shop that achieves an excellent 80ms INP on desktop can easily land at 300-400ms on a typical mid-range Android device.

An additional problem on mobile devices is thermal throttling: smartphones automatically reduce CPU performance during extended use or high ambient temperatures. This causes INP values to progressively worsen throughout a session. Users who browse your shop for several minutes experience increasingly slower interactions. This phenomenon is not captured in lab tests on desktop machines but occurs regularly with real users.

To improve INP on mobile devices, a consistent mobile-first approach to development is necessary. Test on real devices, not just in desktop Chrome with throttling. Invest in server-side optimizations that reduce client load: server-side rendering, edge computing, and intelligent caching take work off the mobile device.

Websites that pass all Core Web Vitals record 24% lower bounce rates (Digital Applied). The economic effect is clear: every additional second of load time can reduce conversions by up to 7% (industry analyses). An optimized INP on mobile devices is therefore not a technical nice-to-have but a direct lever for your shop profitability.

Monitoring and Continuous Improvement

INP optimization is not a one-time project but a continuous process. Every new feature, every additional script, and every plugin can worsen interactivity. A robust monitoring system ensures that regressions are detected and fixed early. Without continuous monitoring, INP improvements typically degrade within a few months.

Implement Real User Monitoring (RUM) with the web-vitals JavaScript library to capture INP data from real users. Define alerting thresholds: a warning when INP exceeds 150ms, a critical alert above 200ms. Integrate INP checks into your CI/CD pipeline to catch performance regressions before deployment. Regular audits with Lighthouse and Google Search Console complement the monitoring. Especially after shop system updates, plugin upgrades, or changes to the tag manager configuration, INP values should be verified immediately.

In addition to technical monitoring, setting up performance budgets is recommended: define ceilings for total JavaScript size, number of long tasks, and maximum INP per page type. Automated tests in the build pipeline (such as Lighthouse CI or the Web Vitals Report) warn when a deployment exceeds these budgets. This prevents small, creeping degradations from pushing the INP value into the red zone over weeks.

Particularly important is correlating INP values with business metrics. Connect your web analytics with CWV data to make the direct relationship between interaction speed and conversion rate visible. This allows you to justify INP optimizations to management with concrete revenue figures. A shop that reduces network latency through HTTP/3 and QUIC while simultaneously unblocking the main thread typically sees results in both CrUX data and revenue curves.

Leveraging Interactivity as a Competitive Advantage

INP is more than a technical metric. It measures how your shop feels to real customers. In a world where 43% (HTTP Archive) of all websites fail the INP threshold, shops with fast interactions gain a measurable competitive advantage in rankings and conversions. Trust signals like fast response times and smooth interactions are at least as important as traditional trust elements.

The good news: most INP problems can be solved with proven strategies. JavaScript optimization, controlled third-party management, mobile-first development, and continuous monitoring form the foundation. The effort pays off: better interactivity means fewer abandonments, higher conversions, and stronger SEO rankings.

Start with an inventory of your current INP values in Google Search Console. Identify the slowest pages and interactions. Prioritize optimizations by their expected business impact. And above all: measure success not just technically, but in monetary terms. Professional performance optimization for online shops typically pays off quickly because faster shops generally sell more.