Since it was officially introduced by Google as a major Core Web Vitals metric, definitively replacing FID (First Input Delay), INP (Interaction to Next Paint) has become the essential arbiter for e-commerce sites with a strong technology component. While FID measured only the latency of the very first click, INP assesses the overall responsiveness of the user interface by taking into account almost all interactions (clicks, taps, keyboard input) throughout the browsing session. An optimal INP score, the guarantee of a smooth experience, must imperatively remain below 200 milliseconds.
On decoupled (headless) e-commerce architectures, particularly those relying on cutting-edge frameworks such as Next.js connected by API to high-end SaaS platforms such as Shopify Plus or Salesforce Commerce Cloud (SFCC), optimising INP raises specific architectural challenges. While it is difficult to promise a perfect score across 100% of sessions because of the diversity of customers’ networks and devices, targeting and sustainably maintaining an INP below the 200 ms mark is a realistic objective thanks to precision engineering. Indeed, the profusion of JavaScript code executed client-side within the web browser can quickly saturate the main thread.
The anatomy of an INP bottleneck on headless platforms
From a purely business and user-experience point of view, INP is the barometer of perceived responsiveness. It is the indicator that separates smooth navigation from invisible frustration: when a customer clicks on “Add to bag” or on a size guide, do they get immediate visual feedback or a micro-delay that breaks their buying momentum? An interface that feels sluggish destroys the sense of fluidity, a non-negotiable criterion in the world of premium retail and luxury.
Under the bonnet, in order to understand where these latencies come from, it is worth dissecting the technical mechanics. The time measured by INP is made up of three distinct phases:
INP = Input Delay + Processing Time + Presentation Delay
In the premium retail and luxury world, e-commerce sites incorporate a critical quantity of heavy application modules: omnichannel data tracking scripts, personalised algorithmic recommendation components, live conversational chat modules or complex 3D configurators.
When these scripts run synchronously, they create Long Tasks (tasks exceeding 50 ms). If a user interacts with an interface element (clicking on a size selector, adding to the basket) while a long task is monopolising the main thread, the browser has to wait for that execution to finish before it can process the event and refresh the graphical interface. That is where Input Delay collapses.
What is more, the headless paradigm often suffers from over-hydration. If the Next.js application sends a massive volume of JavaScript to make a largely static page interactive, the browser spends precious seconds executing the code that attaches event listeners, paralysing any attempt at early user interaction.
// Next.js optimisation example: yielding to the main thread with scheduler.yield() const handleAddToBag = async (productId) => { // 1. Immediate task: give the user instant visual feedback (skeleton or loader) setButtonState('loading'); // 2. Yielding: hand control back to the browser so it can perform the visual render if (typeof window !== 'undefined' && 'scheduler' in window) { await window.scheduler.yield(); } else { await new Promise(resolve => setTimeout(resolve, 0)); } // 3. Running the heavy task (GraphQL API call to the e-commerce platform) try { const response = await fetch('/api/cart/add', { method: 'POST', body: JSON.stringify({ productId }) }); const data = await response.json(); setCartState(data); } catch (error) { console.error("Add to cart error", error); } finally { setButtonState('idle'); } };
A methodology for technically diagnosing INP: from lab to field
In order to pinpoint precisely where an INP bottleneck comes from, using standardised lab tools alone (such as Google Lighthouse) proves insufficient, because they simulate interactions synthetically. Implementing a RUM (Real User Monitoring) strategy combined with an in-depth audit within the Chrome DevTools Performance panel is required.
Step 1: monitor the field via the PerformanceObserver API
To capture the real friction experienced by your customers in production, deploy a telemetry listening script based on the browser’s native API. This technical snippet makes it possible to attribute INP precisely to a DOM element and to identify the failing phase:// INP RUM monitoring script – Numendo Performance team if (typeof window !== 'undefined' && 'PerformanceObserver' in window) { const observer = new PerformanceObserver((list) => { for (const entry of list.getEntries()) { // Filter only significant interactions if (entry.duration > 0) { console.warn(`[Numendo RUM] Interaction detected: ${entry.name}`); console.log(`│ Target element:`, entry.target); console.log(`│ Total INP: ${entry.duration}ms`); console.log(`│ 1. Input Delay: ${entry.inputDelay}ms`); console.log(`│ 2. Processing Time: ${entry.processingStart - entry.startTime}ms`); console.log(`│ 3. Presentation Delay: ${entry.duration - (entry.processingEnd - entry.startTime)}ms`); } } }); // Listen to 'event' entries to measure responsiveness observer.observe({ type: 'event', durationThreshold: 16, buffered: true }); }
Step 2: Profiling in Chrome DevTools
- Open a private browsing window, go to the Next.js product page and open the developer tools (F12).
- Go to the Performance tab, tick the Screenshots option and enable 4x CPU throttling hardware slowdown simulation (or 6x to simulate an entry-level smartphone).
- Start recording, carry out the critical interaction (e.g. repeatedly clicking the add-to-basket button connected to the Shopify Plus API) and stop the recording.
- Locate the Interactions section: red blocks indicate breaches of the 200 ms threshold. Analyse the Main row just below: the call stack will tell you the exact JavaScript function (and source file) responsible for holding on to the thread.
Technical optimisation checklist for Next.js & Shopify Plus architectures
Achieving an excellent INP score requires rigorous software engineering strategies to be applied at the code level of your front-end application.
3.1. “Yielding” long tasks through asynchronous architecture
When a user clicks on a product variant, the application often has to update the visual state, recalculate prices and send a GraphQL or REST request to a basket manager’s API (Shopify Cart API). Instead of running all of that in a single synchronous block, apply the concept of yielding to the main thread.
Using the modern scheduler.yield() API makes it possible to artificially break a long task into micro-tasks, giving the browser windows of opportunity to perform visual rendering between each step.// Next.js / React optimisation example - optimised basket button component import React, { useState, useTransition } from 'react'; export function AddToCartButton({ variantId }: { variantId: string }) { const [isPending, startTransition] = useTransition(); const [buttonText, setButtonText] = useState('Add to basket'); const handleAddToCart = async () => { // Phase 1: immediate visual feedback (optimised Presentation Delay) setButtonText('Adding...'); // Phase 2: yielding to the main thread to force the visual refresh if (window.scheduler && typeof window.scheduler.yield === 'function') { await window.scheduler.yield(); } else { // Fallback for legacy browsers await new Promise((resolve) => setTimeout(resolve, 0)); } // Phase 3: processing the heavy logic in non-blocking mode startTransition(async () => { try { const response = await fetch('/api/cart/add', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ variantId, quantity: 1 }), }); if (!response.ok) throw new Error('API error'); setButtonText('Added!'); } catch (error) { setButtonText('Try again'); } }); }; return ( <button onClick={handleAddToCart} disabled={isPending} className="btn-premium"> {buttonText} </button> ); }
3.2. A strategy for isolating and offloading third-party scripts
Analytics, ad retargeting and CRM tools must never run on the main thread during critical interaction phases.
- Using next/script: banish traditional HTML tags. Use Next.js’s native component, favouring the
lazyOnloadstrategy. - Delegation via Web Workers (Partytown): for highly intrusive third-party scripts (such as certain tracking pixels), Numendo recommends encapsulation via technologies such as Partytown, moving all calculations and network requests into a Web Worker and thereby freeing up the main thread 100% for the user interface.
3.3. Progressive hydration and use of React Server Components (RSC)
The most effective way to reduce JavaScript processing time on the client remains, quite simply, not to send it any JavaScript.
- By making use of the layered architecture of the Next.js App Router, make sure that purely informational components (descriptive sheets, text reviews, footers, reassurance grids) remain React Server Components.
- Reserve use of the “use client” directive exclusively for elements requiring immediate interactivity (selectors, forms, search bars). This drastically reduces the size of the initial JS bundle and lightens the hydration phase, structurally reducing the risk of INP problems.
Summary matrix of INP optimisations by headless component
| Degraded INP phase | Main cause in headless | Targeted technical solution | Recommended implementation tool |
| Input Delay | Massive DOM hydration on initial load or synchronous execution of third-party tools (CRM, analytics). | Migration to React Server Components (RSC) and script isolation. | Next.js App Router & next/script (lazyOnload). |
| Processing Time | Complex synchronous business logic on click (price calculations, heavy state managers). | Task splitting and returning to the event loop. | Native scheduler.yield() API or requestIdleCallback() micro-optimisation. |
| Presentation Delay | Layout recalculations (layout thrashing) caused by successive, disordered DOM mutations. | Force the use of a loading skeleton or non-blocking CSS transitions. | React useTransition & optimised CSS properties (transform, opacity). |
4. Data & business correlation: the impact of INP on conversion rate and omnichannel
Technically optimising performance indicators is not merely an engineering or search-engine-ranking issue. For a brand operating in premium e-commerce, every tenth of a second of latency following a click translates instantly into a measurable drop in engagement rate and, consequently, into basket abandonment.
A responsive site creates a sense of fluidity similar to the ceremony of selling in a physical boutique, a strategic focus we deployed, for example, when redesigning the user experience and digital customer journey for the prestigious Maison Michel (Chanel Group) on an infrastructure connected to Shopify Plus.
Conclusion: make web performance your competitive advantage
Mastering INP on a headless Next.js e-commerce architecture requires cross-cutting expertise, at the intersection of product culture, data flow governance and cutting-edge software development. By applying granular diagnostic methodologies and adopting asynchronous coding patterns, technical departments turn web performance into a measurable business lever.
To support companies facing these performance challenges without weighing down their purchasing processes, Numendo offers its exclusive signature package. This agile, flexible contractual model can be activated in less than 48 hours. It makes it possible to inject immediately, within your teams or in complete autonomy, a unit of experts (lead developers, architects, product owners) dedicated to resolving your technical bottlenecks.
Whether your infrastructure relies on Shopify Plus, Salesforce Commerce Cloud or complex data orchestrators based on Apache Kafka (as with our logistics supervision projects for a major luxury house), our consultants secure your digital ecosystems to drive your omnichannel growth.
