Improve Interaction to Next Paint (INP)

INP measures how long your page takes to visually respond after a user interacts, a tap, click, or key press. The clock starts when they tap and stops when the next frame paints. Google considers under 200ms good, 200–500ms needs improvement, over 500ms poor. INP replaced FID as a Core Web Vital in 2024.

A laggy interface tells visitors the site is broken. They re-tap, double-submit, or just leave. Slow INP is almost always caused by heavy JavaScript blocking the main thread when the user interacts, which is exactly when responsiveness matters most.

1. 1

   Find the slow interaction

   In Chrome DevTools > Performance > Record while you interact with the page. Look for long tasks (red flags) that fire during your tap/click. The flamegraph will show which functions are eating time.

2. 2

   Break up long tasks

   Any single JS task over 50ms blocks the main thread. Split big loops by yielding to the browser between chunks. Modern browsers support `scheduler.yield()`; in older ones, use `setTimeout(..., 0)`.

   async function processItems(items) {
     for (const item of items) {
       doWork(item);
       // Yield to the browser between items
       if ('scheduler' in window && 'yield' in scheduler) {
         await scheduler.yield();
       } else {
         await new Promise((r) => setTimeout(r, 0));
       }
     }
   }

3. 3

   Debounce expensive input handlers

   If you run logic on every keystroke or scroll event, debounce it so it fires at most every 100–200ms.

   function debounce(fn, ms) {
     let t;
     return (...args) => {
       clearTimeout(t);
       t = setTimeout(() => fn(...args), ms);
     };
   }
   
   input.addEventListener('input', debounce(handleInput, 150));

4. 4

   Move heavy work off the main thread

   CPU-bound work (parsing big JSON, running search, processing images) can move into a Web Worker so the main thread stays free to paint.

5. 5

   Cut third-party JS

   Analytics, A/B testing, chat widgets, and tag managers are the most common INP killers. Load them after the main content is interactive, defer them, or replace them with lighter alternatives.

Interact with the page repeatedly while watching the Performance recorder, tasks should stay under 50ms. PageSpeed Insights should show INP under 200ms on mobile. Real-world data takes ~28 days to update in Chrome User Experience Report.

• web.dev: Optimize INP