How to fix cwv inp on Next.js (Headless)

Steps for Next.js (Headless)

1. Break up long tasks with scheduler.postTask / setTimeout(fn, 0): Audit your event handlers (add-to-cart, filter changes, modal opens) in components like `components/Cart.tsx`, `components/ProductFilter.tsx`, etc. Wrap any non-paint-critical work (analytics calls, state syncs, inventory re-fetches) inside `setTimeout(() => { heavyWork() }, 0)` or, where supported, `scheduler.postTask(() => { heavyWork() }, { priority: 'background' })` so the browser can commit the visual response first.
2. Defer non-critical third-party scripts with `next/script`: In `app/layout.tsx` (App Router) or `pages/_app.tsx` (Pages Router), replace plain `<script>` tags for chat widgets, tag managers, analytics, and ad pixels with Next.js `<Script strategy='lazyOnload' …/>` (or `'afterInteractive'` for scripts that need the DOM but not immediate interaction). This removes their parse/execute cost from the critical path entirely.
3. Optimise React event handlers with `useTransition` / `useDeferredValue`: For expensive state updates triggered by user input (e.g., faceted search, variant selectors), wrap the heavy `setState` call in `startTransition(() => { setResults(filtered) })`. React will yield to the browser between renders, keeping INP low. Import `useTransition` from `react`.
4. Avoid layout-thrashing in handlers: Inside click/tap handlers, read all DOM measurements before writing. Replace patterns like `el.style.height = el.scrollHeight + 'px'` (which force synchronous layout) with CSS transitions or the View Transitions API so the browser's rendering pipeline is not blocked.
5. Code-split heavy components with `dynamic()`: In `app/` or `pages/`, replace static imports of heavy UI (rich-text editors, map embeds, heavy carousels) with `const HeavyComp = dynamic(() => import('../components/HeavyComp'), { ssr: false })`. This keeps main-bundle parse time low, directly reducing the task length that precedes a user interaction.
6. Measure and verify: Add the `web-vitals` package and report INP via `onINP` in `app/layout.tsx` or `pages/_app.tsx`. Use Chrome DevTools → Performance panel → 'Interactions' track and PageSpeed Insights to confirm all interactions are consistently below 200 ms after deploying.

What is cwv inp?

Interaction to Next Paint (INP) measures how quickly your page visually responds after a visitor taps a button, opens a menu, or types in a search box — from the moment they interact to the moment the screen actually updates. Google considers anything under 200 ms "good," 200–500 ms "needs improvement," and over 500 ms "poor." INP is now a Core Web Vital, meaning it is part of Google's official page-experience signal that feeds directly into rankings. A high INP score almost always means the browser's main thread is busy running JavaScript and simply cannot get around to updating what the visitor sees for a frustrating fraction of a second (or longer).

Google uses Core Web Vitals — including INP — as a ranking signal, so a poor INP score can quietly suppress your pages in search results compared to faster competitors. Beyond rankings, a sluggish-feeling page directly hurts conversions: studies consistently show that every 100 ms of added interaction delay reduces add-to-cart and checkout completion rates. On mobile, where CPU speed is limited and networks are slower, a 500–800 ms INP is especially damaging because mobile shoppers are the majority of ecommerce traffic. There is also an accessibility dimension — users who rely on keyboard navigation or assistive technology are disproportionately harmed by delayed visual feedback, which can create a frustrating or unusable experience.

See the complete Cwv inp guide for every platform and the full background.