Interaction to Next Paint (INP)

INP replaced FID in March 2024. It measures how quickly the page responds to all interactions (click, tap, keyboard) during a visit. Target: under 200 ms.

Updated

The 3 phases of an interaction

  • Input delay: the main thread is busy with another task.
  • Processing time: duration of event handlers.
  • Presentation delay: style, layout and next paint.

Priority actions

  • Break up long JavaScript tasks and yield to the browser:
  • Remove or defer unneeded JS (defer & async) and audit third-party scripts.
  • Move heavy computation to Web Workers.
  • Keep the DOM small; content-visibility: auto lightens initial rendering (MDN).
async function traiter(items) {
  for (const item of items) {
    travailler(item);
    if (globalThis.scheduler?.yield) await scheduler.yield();
    else await new Promise(r => setTimeout(r));
  }
}

See also web.dev/inp, then LCP and CLS to complete your Core Web Vitals audit.