Cwv inp

Larger project

Found on 42% of audited stores.

Reduce Interaction to Next Paint (INP) to under 200 ms by breaking up long JavaScript tasks, deferring non-critical third-party scripts, and lightening event handlers so the page feels fast and responsive after every tap or click.

What it is

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).

Why it matters

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.

How to fix it

  1. Measure first: open Chrome DevTools → Performance panel (or use PageSpeed Insights / CrWUX dashboard) and record a real interaction (menu open, search, add-to-cart). Identify the longest tasks (shown in red, >50 ms) that run during or just after that interaction.
  2. Break up long tasks: look for JavaScript that does a large amount of work synchronously in a single event handler. Split it using `scheduler.yield()`, `setTimeout(..., 0)`, or `requestIdleCallback` so the browser can paint between chunks.
  3. Defer non-critical third-party scripts: move chat widgets, marketing pixels, review widgets, and analytics tags so they load after the page is interactive — use the `defer` or `async` attribute on `<script>` tags, or load them dynamically after the `load` event.
  4. Audit and slim down event handlers: remove heavy DOM queries, large loops, or synchronous network calls from click/keydown/input handlers. Pre-compute values where possible and cache DOM references outside the handler.
  5. Reduce Input Delay by avoiding long tasks during page load: ensure all heavy initialisation work (parsing large JSON, building complex component trees) finishes before the visitor's first likely interaction, or is deferred past it.
  6. Re-test in PageSpeed Insights (field data) and the Chrome DevTools Performance panel (lab data) after each change to confirm the INP improvement, then monitor via Google Search Console's Core Web Vitals report for real-user field improvement over the following 28 days.

Fix it on your platform

Pick your platform for the exact steps.

How to fix cwv inp on Shopify
  1. Go to Online Store → Themes → (your theme) → Edit code.
  2. Open theme.liquid (or layout/theme.liquid). Find any render-blocking `<script>` tags for third-party apps (chat, reviews, pop-ups) and add the `defer` or `async` attribute, or move them just before `</body>`.
  3. In the Shopify admin, go to Online Store → Preferences and disable any built-in scripts you don't need (e.g., welcome pop-up overlays).
  4. Go to Apps and review every installed app. Remove apps whose scripts are not actively driving revenue — each app injects JavaScript that can inflate INP. Check the App Blocks in the theme editor and remove unused ones.
  5. For custom JavaScript in assets/theme.js or assets/global.js, open those files and refactor heavy click/submit handlers: extract expensive work into a `setTimeout` or use `scheduler.yield()` so the browser can paint between steps.
  6. Use Shopify's Speed Score (Online Store → Themes) and PageSpeed Insights to verify improvement after each change.
Full Shopify guide →Official Shopify docs ↗
How to fix cwv inp on Shopify Plus
  1. Follow all Shopify steps above. Additionally, audit scripts injected via Shopify Scripts (Script Editor app) — these run at checkout and can inflate INP on checkout pages.
  2. In the Checkout Extensibility admin (if enabled), review Checkout UI Extensions for heavy JavaScript in their event callbacks and refactor them to defer work.
  3. Use the Shopify Checkout Speed report (Analytics → Reports → Checkout funnel) alongside PageSpeed Insights to track INP on checkout pages specifically.
Full Shopify Plus guide →Official Shopify Plus docs ↗
How to fix cwv inp on WooCommerce
  1. Install a performance plugin such as WP Rocket, Perfmatters, or Asset CleanUp Pro. In its settings, enable 'Delay JavaScript execution' or 'Load JS deferred' for third-party scripts (chat, CRM pixels, review widgets).
  2. Go to WP Admin → Plugins and deactivate any plugin whose frontend script you don't actively need. Each deactivated plugin typically removes one or more scripts from the page.
  3. In WP Rocket (or equivalent), use the 'Delay JavaScript' feature to defer specific scripts (e.g., Facebook Pixel, Intercom) until after first user interaction.
  4. If using a page builder (Elementor, Divi, etc.), go to its performance settings and enable 'Improved Asset Loading' or 'Script Loading Optimizations' — these defer builder-injected JS.
  5. For custom code, open your child theme's functions.php or a custom plugin and change `wp_enqueue_script` calls to use `'in_footer' => true` and add the `defer` strategy via the `$args` array (WP 6.3+): `wp_enqueue_script('my-script', $src, $deps, $ver, ['strategy' => 'defer'])`.
  6. Verify with PageSpeed Insights and the Chrome DevTools Performance panel; monitor Google Search Console → Core Web Vitals report.
Full WooCommerce guide →Official WooCommerce docs ↗
How to fix cwv inp on BigCommerce
  1. Go to Storefront → Script Manager. Review every installed script. For non-critical scripts (chat, affiliate pixels, review widgets), change their 'Load Method' to 'Defer' or move their 'Placement' to 'Footer'.
  2. In Storefront → My Themes → Advanced → Edit Theme Files, open templates/layout/base.html and find any hard-coded `<script>` tags. Add `defer` or `async` attributes to non-critical ones.
  3. Remove or disable BigCommerce apps that inject frontend JavaScript but are no longer actively used (Apps → My Apps).
  4. For custom JavaScript in assets/js/, refactor event handlers on cart, search, and navigation interactions to yield back to the browser using `setTimeout` or `scheduler.yield()` between heavy steps.
  5. Use BigCommerce's built-in Lighthouse integration (Storefront → Optimize) or PageSpeed Insights to measure INP before and after changes.
Full BigCommerce guide →Official BigCommerce docs ↗
How to fix cwv inp on Wix
  1. Open the Wix Editor. In the left panel, go to Add Apps → Manage Apps and remove any app whose functionality you no longer actively use — every Wix app can add JavaScript weight.
  2. In the Wix Editor, select any embedded HTML/custom code widgets (via Settings → Custom Code or via Velo) and check whether their scripts can be moved to load 'After body start' or set to load on interaction rather than on page load.
  3. Go to Settings → Custom Code (in the Dashboard). For third-party scripts (chat, analytics, pixels), set the 'Load' timing to 'Load when page is ready' or 'Load after user interaction' if that option is available for your script.
  4. In Velo (Wix's dev environment), review any `$w.onReady()` code that runs large synchronous operations. Break heavy logic into smaller async steps using `async/await` and `setTimeout` to avoid blocking the main thread.
  5. Use PageSpeed Insights with your live Wix URL and the Chrome DevTools Performance panel to identify which specific interactions have the highest INP.
Full Wix guide →Official Wix docs ↗
How to fix cwv inp on Squarespace
  1. Go to Settings → Advanced → Code Injection. Review any third-party `<script>` tags in the Header or Footer injection areas. Move scripts from Header to Footer, and add `defer` or `async` to reduce main-thread blocking during load.
  2. Remove any unused third-party integrations (chat widgets, marketing tools) from Settings → Integrations or from Code Injection — these are common sources of long tasks.
  3. Squarespace does not offer deep JavaScript customisation, so the primary levers are: (1) reducing the number of third-party scripts, (2) switching to lighter Squarespace-native blocks instead of embedded widgets, and (3) ensuring custom JavaScript added via Code Blocks uses `defer`.
  4. Monitor INP via PageSpeed Insights and Google Search Console → Core Web Vitals. For significant INP problems, a migration to a more flexible platform (e.g., Shopify or a headless stack) may be required if Squarespace's first-party scripts are the bottleneck.
Full Squarespace guide →Official Squarespace docs ↗
How to fix cwv inp on Webflow
  1. In the Webflow Designer, go to Page Settings (the gear icon) for each page. Scroll to 'Before </body> tag' and move any third-party script embeds there if they are currently in 'Inside <head> tag', so they load after page content.
  2. Add `defer` or `async` as an attribute directly in your `<script>` embed code within the Custom Code panel.
  3. In Project Settings → Custom Code, review scripts in the 'Head Code' and 'Footer Code' sections. Move non-critical scripts to Footer and add `defer`.
  4. For interactions built with Webflow Interactions, audit any 'Page Load' triggers that fire heavy animations immediately — delay them or trigger them on scroll/interaction instead.
  5. Use Finsweet's Webflow Optimizer or a Cloudflare Worker to further defer scripts if native embed options are insufficient.
  6. Verify INP improvement with PageSpeed Insights and Chrome DevTools Performance panel after publishing each change.
Full Webflow guide →Official Webflow docs ↗
How to fix cwv inp on Adobe Commerce (Magento)
  1. In the Admin panel, go to Stores → Configuration → Advanced → Developer → JavaScript Settings. Set 'Merge JavaScript Files' and 'Minify JavaScript Files' to 'Yes' to reduce the number and size of JS files.
  2. Enable 'Move JS code to the bottom of the page' in the same JavaScript Settings section so scripts don't block early rendering.
  3. Identify heavy RequireJS modules by running a Performance trace in Chrome DevTools. For custom modules, refactor event listener callbacks in your module's JS to yield using `setTimeout` or the browser's Scheduler API.
  4. Audit third-party extensions: go to System → Extensions and disable or uninstall any extension that injects frontend scripts and is not actively used.
  5. Use Varnish cache and a CDN (configured in Stores → Configuration → System → Full Page Cache) to ensure HTML is served fast, reducing total blocking time.
  6. Deploy changes to staging, run PageSpeed Insights and the Chrome DevTools Performance panel, and verify INP is below 200 ms before promoting to production.
Full Adobe Commerce (Magento) guide →Official Adobe Commerce (Magento) docs ↗
How to fix cwv inp on Magento Open Source
  1. Follow all Adobe Commerce (Magento) steps above — the admin paths and configuration options are identical.
  2. Additionally, use the free Yireo Webp2 or Hyva theme (if applicable) — the Hyva theme replaces Magento's heavy RequireJS/KnockoutJS stack with lightweight Alpine.js + Tailwind CSS, which dramatically reduces INP on many stores.
  3. Run `bin/magento setup:static-content:deploy` and `bin/magento cache:flush` after any JS configuration change.
Full Magento Open Source guide →Official Magento Open Source docs ↗
How to fix cwv inp on PrestaShop
  1. Go to Back Office → Advanced Parameters → Performance. Enable 'Compress, minify and cache JavaScript' and 'Combine JavaScript files'.
  2. In Modules → Module Manager, disable or uninstall any front-end module (chat, slider, pop-up) that you are not actively using — each adds JavaScript weight.
  3. In Back Office → Design → Theme & Logo → Advanced Customisation, identify custom JS files added to the theme. Open them and refactor heavy event handlers to defer work using `setTimeout`.
  4. Use PageSpeed Insights to identify which specific interactions are slow, then target those handlers in the theme's JavaScript.
Full PrestaShop guide →Official PrestaShop docs ↗
How to fix cwv inp on Headless / Custom (I build in code)
  1. Run a Chrome DevTools Performance trace on your highest-traffic interaction (add-to-cart, search, menu open). Find all Long Tasks (>50 ms) that overlap with the interaction.
  2. Refactor synchronous work in event handlers: use `scheduler.yield()` (or a polyfill using `setTimeout`) to break long tasks into smaller chunks, yielding back to the browser between each chunk so it can paint.
  3. Move all non-critical third-party script loading to after the `load` event or after the first user interaction using dynamic `import()` or a lightweight loader.
  4. Audit your framework's hydration strategy (Next.js, Nuxt, Astro, etc.). Use Partial Hydration, Islands Architecture, or React 18's `startTransition` / `useDeferredValue` to avoid blocking the main thread on page load.
  5. Add `scheduler.postTask()` for work that is truly low-priority (analytics, pre-fetching) to ensure it never competes with interaction responses.
  6. Monitor real-user INP with the `web-vitals` JavaScript library, send results to your analytics platform, and set up an alert when p75 INP exceeds 200 ms.
Full Headless / Custom (I build in code) guide →Official Headless / Custom (I build in code) docs ↗
How to fix cwv inp on 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.
Full Next.js (Headless) guide →Official Next.js (Headless) docs ↗
How to fix cwv inp on Klaviyo
  1. Load the Klaviyo snippet asynchronously and deferred: in your Shopify theme's `theme.liquid` (or equivalent base layout), locate the Klaviyo `<script>` tag (company ID embed) and ensure it uses both `async` and is placed just before `</body>` rather than in `<head>`. If you installed Klaviyo via the Shopify Sales Channel app, go to Klaviyo → Settings → Integration → Shopify and toggle on 'Load Klaviyo.js asynchronously' if available, then re-save.
  2. Delay Klaviyo's onsite popup/flyout evaluation until after the page is interactive: in Klaviyo → Signup Forms, open each active form → Settings tab → 'Display Timing'. Set a display delay of at least 3–5 seconds (or trigger on scroll/exit intent) so the form's JS does not execute during the critical post-load interaction window.
  3. Audit and throttle Klaviyo event listeners in your theme: search your JS files for `klaviyo.push`, `_learnq.push`, and `identify`/`track` calls. Move any that fire on every `scroll` or `mousemove` event into debounced/throttled wrappers (e.g., debounce 200–300 ms) so they do not block the main thread during user interactions.
  4. Defer the Klaviyo back-in-stock and product-view tracking scripts: wrap any inline `_learnq.push(['track', ...])` calls in a `requestIdleCallback` (with a `setTimeout` fallback for Safari) so they yield to user input before executing — e.g., `requestIdleCallback(() => { _learnq.push(['track', 'Viewed Product', {...}]); });`
  5. Remove or consolidate redundant Klaviyo script tags: check that Klaviyo's `klaviyo.js` snippet is only loaded once across your theme (theme.liquid, app embeds, and any third-party integrations). Multiple loads cause duplicate event handler registration that compounds INP cost — use your browser's Network panel to confirm a single request to `static.klaviyo.com/onsite/js/klaviyo.js`.
  6. Test INP impact after each change using Chrome DevTools → Performance panel: record a trace while clicking an Add-to-Cart button or newsletter form submit, inspect 'Long Tasks' (red bars > 50 ms) attributed to `klaviyo.js`, and confirm total interaction duration drops below 200 ms before deploying to production.
Full Klaviyo guide →Official Klaviyo docs ↗
How to fix cwv inp on Elementor
  1. In the WordPress dashboard, go to Elementor → Settings → Performance tab. Enable the 'Improved Asset Loading' (formerly Improved CSS Loading) option and set 'Load Elementor CSS Print Method' to 'Internal Embedding' to reduce render-blocking requests that contribute to long main-thread tasks on interaction.
  2. Still in Elementor → Settings → Performance, enable 'Lazy Load Background Images' and turn OFF any Elementor features you are not using (e.g. Motions Effects, Floating Effects, Scroll Snap) under the 'Features' tab — each unused feature removes a JavaScript module that competes for the main thread during user interactions.
  3. Go to Elementor → Settings → Experiments and disable any experimental or beta widgets/features that are inactive on your site (e.g. Nested Elements, Container Grid) — experimental code runs JavaScript listeners on every interaction and can inflate INP.
  4. Install or configure a WordPress performance plugin (e.g. WP Rocket, LiteSpeed Cache, or Perfmatters) and enable 'Delay JavaScript Execution' (sometimes called 'defer JS on user interaction'). Add Elementor's non-critical scripts (e.g. elementor-frontend.js animations, motion effects) to the delay list so they do not block the main thread before the first user interaction is processed.
  5. In your performance plugin's exclusion list, ensure that any Elementor widget scripts tied to interactive elements (forms, accordions, tabs, sliders) are NOT delayed — only delay purely visual/animation scripts. This prevents INP regressions on click/tap targets.
  6. After saving all settings, clear all caches (Elementor → Tools → Regenerate Files & Data, then your caching plugin's cache), then re-test INP in Chrome DevTools (Performance panel → Interactions track) or PageSpeed Insights to confirm all interaction delays are under 200 ms.
Full Elementor guide →Official Elementor docs ↗

Does your site have this issue?

Run a free SEOLZ scan to find cwv inp — and every other issue — across your whole site in minutes.

Scan my site free

Frequently asked questions

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).

Why does cwv inp matter?

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.

How do I fix cwv inp?

Reduce Interaction to Next Paint (INP) to under 200 ms by breaking up long JavaScript tasks, deferring non-critical third-party scripts, and lightening event handlers so the page feels fast and responsive after every tap or click.

Related SEO issues