What is INP and how to optimize Interaction to Next Paint

Interaction to Next Paint (INP)

INP measures how quickly the page visually responds to user interactions — clicks, taps, and key presses. It replaced FID as a Core Web Vital in 2024 because FID only measured the delay before an event handler ran, not the full end-to-end delay to the next paint. Target: under 200ms.

INP = Input Delay + Processing Time + Presentation Delay.

Input delay is caused by long tasks occupying the main thread when the user interacts. Break long tasks using scheduler.yield():

async function processLargeList(items) {
  for (let i = 0; i < items.length; i++) {
    processItem(items[i]);
    // Yield to browser every 50 items to allow input events
    if (i % 50 === 0) {
      await scheduler.yield();
    }
  }
}

Processing time is your event handler's execution time. Move expensive work off the main thread with Web Workers:

const worker = new Worker('heavy-computation.js');
button.addEventListener('click', () => {
  worker.postMessage({ data: inputData });
});
worker.onmessage = (e) => renderResult(e.data);

Presentation delay is the time between your handler finishing and the browser painting. Minimize DOM mutations and avoid forced synchronous layout reads (reading offsetHeight after writing styles) inside event handlers.