admin@debuggingwizard.com·Mon - Fri, 9:00 - 18:00 CET Client login Start a project

Slow Clicks Cost Sales: How to Fix INP (Interaction to Next Paint)

Slow Clicks Cost Sales: How to Fix INP (Interaction to Next Paint)

You click “Add to cart” and nothing seems to happen for a second. You click again. Now there are two items in your basket. That frustrating lag is exactly what Google’s Interaction to Next Paint (INP) metric measures, and it has been one of the three Core Web Vitals since it replaced First Input Delay in March 2024.

If Google Search Console is flagging INP issues on your site, here is what it means and how to fix it.

What INP measures

INP looks at how quickly your page visually responds after a visitor clicks, taps or types. Each visit is scored by its slowest interaction (ignoring the occasional outlier), and Google uses the 75th percentile of real visits:

  • Good: 200 milliseconds or less
  • Needs improvement: 200 to 500 milliseconds
  • Poor: more than 500 milliseconds

Unlike lab scores, INP comes from real users on real devices, which often means mid-range phones on mobile data. A site that feels instant on your laptop can still fail.

Why sites get slow to respond

Every interaction has three parts, and each one can go wrong:

  • Input delay: the browser is busy running other JavaScript when the visitor clicks. Tag managers, consent banners, chat widgets and analytics are common culprits, especially while the page is still loading.
  • Processing time: the code attached to the click does too much work before updating the screen.
  • Presentation delay: the browser needs a long time to redraw the page, often because the HTML is very large or deeply nested.

How to fix poor INP

1. Cut and delay third-party scripts

Audit everything your site loads. Remove tools nobody uses, load the rest with defer or async, and delay non-essential widgets (chat, heatmaps, social embeds) until after the page has loaded or the user interacts.

2. Break up long tasks

Any JavaScript task longer than 50 milliseconds blocks the page. Split heavy work into smaller chunks and give control back to the browser in between, for example with scheduler.yield() where supported, falling back to setTimeout.

3. Give instant feedback

Update the button state or show a loading indicator immediately, then do the heavy work. Move analytics calls and other non-visible work out of the click path.

4. Keep the page lean

Very large pages (thousands of HTML elements) are slow to update. Simplify page builders’ nested layouts, paginate long lists and use content-visibility: auto for sections further down the page.

5. Debounce noisy events

Search-as-you-type, scroll and resize handlers can fire dozens of times per second. Debouncing them keeps the page responsive.

WordPress and WooCommerce tips

  • Check how many plugins add JavaScript to every page, and disable scripts on pages that do not need them.
  • Be careful with heavy page builders and “all-in-one” themes. They often ship a lot of code you never use.
  • Use a performance plugin that can delay JavaScript until user interaction, then test checkout and forms carefully afterwards.

How to measure it

Use the Core Web Vitals report in Google Search Console for real-user data across your site, and PageSpeed Insights for individual URLs. In Chrome DevTools, the Performance panel shows exactly which scripts run when you click.

Faster interactions mean happier visitors, fewer abandoned checkouts and a better chance of ranking well. Want us to find out what is slowing your site down? Our Growth Support plan includes quarterly performance audits, or you can ask us for a one-off review. For a quick health check right now, try our free SEO Meta Tag Analyzer.

Charbel

Founder & Lead Engineer at Debugging Wizard. Writes about web development, email engineering and keeping business tech running smoothly.

Keep reading

Running your business on spreadsheets?

Tell us how things work today. We reply within one business day with ideas and a rough budget.