INP: what it is and how to improve this Core Web Vitals metric

INP (Interaction to Next Paint) measures how quickly your site responds to user clicks and taps. Together with LCP (loading) and CLS (visual stability), it forms the Core Web Vitals trio that Google uses to evaluate your site.

The limit is 200 milliseconds. If you exceed it, your ranking notices. If you’re starting from scratch, begin with what Core Web Vitals are.

Difference between INP and FID (and why it’s harder now)

In plain English: before, it was enough for the first impression to be good. Now, if you have a single button that responds poorly, Google will make you pay for it.

What’s a good INP

Google evaluates INP at the 75th percentile of all interactions on the page. This means that 75% of interactions must be fast.

Why INP fails (the 3 main problems)

1. JavaScript blocks the main thread

The browser uses a single thread for everything: processing JavaScript and rendering visual changes. When a script occupies that thread for more than 50 ms, the browser can’t respond to user clicks.

The most common culprits:

• Analytics scripts (Google Analytics, Hotjar)
• Chatbots and third-party widgets
• Ad pixels
• Heavy event handlers that do complex calculations on click

2. Long tasks on click

When you click a button, the browser runs a «handler». If that handler makes an API call, processes data or updates a heavy React/Vue component, INP measures all that time.

3. Layout thrashing

When an interaction forces the page to recalculate the position of many elements (resizes, style changes), the time between the click and the visual update skyrockets. Animations using width, height or margin instead of transform or opacity are the main culprits.

How to audit your INP

Don’t guess. Measure with real data.

How to improve INP

1. Remove or defer third-party scripts

Scripts you don’t control (analytics, chat, ads) are the main cause of poor INP. You can’t optimize their code, but you can control when they load.

What to do:

• Add defer or async to non-critical scripts.
• Load chat widgets only when the user clicks a placeholder (lazy loading).

Example:

<script src="https://chat-provider.com/widget.js" defer></script>

2. Split long tasks into smaller chunks

If your own JavaScript does heavy operations, split them into smaller chunks and let the browser breathe between each one.

Example:

// Bad: blocks the thread for 800ms
for (let i = 0; i < 10000; i++) { process(i); }

// Good: yields control every 50 items
async function processList(items) {
  for (let i = 0; i < items.length; i += 50) {
    const chunk = items.slice(i, i + 50);
    processChunk(chunk);
    await new Promise(r => setTimeout(r, 0));
  }
}

3. Optimize event listeners

If you have many elements with individual listeners (each product card, each menu item), use event delegation:

// Bad: 100 listeners
document.querySelectorAll('.card').forEach(card => {
  card.addEventListener('click', handleClick);
});

// Good: 1 listener on the parent
document.querySelector('.grid').addEventListener('click', (e) => {
  if (e.target.closest('.card')) handleClick(e);
});

4. In WordPress with Elementor

Elementor tends to accumulate heavy JavaScript. Concrete solutions:

• Load third-party scripts only on the pages that need them.
• Disable widgets you don’t use (carousels, animations, particles).
• Use a caching plugin that minifies and combines JS (WP Rocket, W3 Total Cache).

If you want to dive deeper, check out why your WordPress needs maintenance.

5. In WooCommerce

INP in WooCommerce usually fails on three interactions:

INP isn’t a number, it’s a symptom

Optimizing INP isn’t a whim. It’s a signal that your site has clean code, that third-party scripts don’t hijack the browser and that your users aren’t left waiting.

If you improve INP, user experience, conversion rate and ranking improve too. It’s not magic. It’s doing things right.

Start with what hurts most: third-party scripts and long main-thread tasks. Then go cleaning up what’s left over. Step by step.

And if you want to complete the strategy, check out how to improve LCP, how to improve CLS and the complete Core Web Vitals guide: what they are and how to improve them.

Written by

Alex Figueiras

Freelance SEO consultant in Valencia · WordPress + Elementor + Rank Math

I help local businesses and SMEs rank on Google with technical audits, on-page SEO and content that converts. More than 40 projects audited and cases measured in sectors such as renovations, training and ecommerce.

• About me
• LinkedIn
• Contact