All Guides
INP 9 min read· Updated Apr 2026

How to Fix INP (Interaction to Next Paint) — Responsiveness Guide

Improve your INP score and make your site respond instantly to user interactions. Covers event handler optimization, main thread management, and debouncing techniques.

In this guide
What is INP?Common Causes of Poor INPFix 1: Break Up Long TasksFix 2: Debounce Input HandlersFix 3: Use CSS contain for Complex Components

What is INP?

Interaction to Next Paint (INP) measures how quickly your page responds to user interactions — clicks, taps, and key presses. Google considers INP good if it's under 200ms. Poor INP (>500ms) means your site feels sluggish and unresponsive.


INP replaced FID (First Input Delay) as a Core Web Vital in March 2024. Unlike FID which only measured the first interaction, INP measures all interactions throughout the page lifecycle.

Common Causes of Poor INP

1.Long JavaScript tasks — blocking the main thread
2.Expensive event handlers — doing too much synchronous work
3.Large DOM trees — causing slow rendering after state changes
4.Third-party scripts — competing for main thread time
5.Synchronous layout reads — triggering forced reflows

Fix 1: Break Up Long Tasks

Use setTimeout or scheduler.yield() to break up long tasks:



javascript
// Before: one long task (blocks for 300ms)
function processData(items) {
  items.forEach(item => heavyComputation(item));
}

// After: yielding to the browser between chunks
async function processData(items) {
  const CHUNK_SIZE = 50;
  for (let i = 0; i < items.length; i += CHUNK_SIZE) {
    const chunk = items.slice(i, i + CHUNK_SIZE);
    chunk.forEach(item => heavyComputation(item));
    // Yield to let the browser handle user input
    await new Promise(resolve => setTimeout(resolve, 0));
  }
}

Fix 2: Debounce Input Handlers

For scroll, resize, and input handlers, debounce to prevent excessive calls:



javascript
function debounce(fn, delay = 150) {
  let timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => fn(...args), delay);
  };
}

const handleSearch = debounce((query) => {
  fetchResults(query);
}, 200);

input.addEventListener('input', (e) => handleSearch(e.target.value));

Fix 3: Use CSS contain for Complex Components

CSS containment tells the browser that a subtree is independent, allowing it to skip re-rendering:



css
.card {
  contain: layout style paint;
}

.virtualized-list-item {
  contain: strict;
  content-visibility: auto;
  contain-intrinsic-size: 0 60px;
}


content-visibility: auto can dramatically speed up rendering of long lists by skipping off-screen items.

Test these fixes on your site

Run a free audit to see your current INP score and get prioritized fix recommendations.

Run Free Audit

Related Guides

LCP8 min

How to Fix LCP (Largest Contentful Paint) — Complete Guide

CLS7 min

How to Fix CLS (Cumulative Layout Shift) — Stop Layout Jank

General10 min

How to Improve Your Lighthouse Score from 50 to 90+