Understanding Interaction to Next Paint (INP) Metric and How to Measure It

INP (Interaction to Next Paint) is a new core web‑vitals metric that will replace First Input Delay (FID) in Chrome starting March 2024. It measures the latency of the longest interaction across a page’s entire lifecycle, using the Event Timing API, to assess overall responsiveness.

The metric is calculated by observing every user interaction, selecting the longest interaction duration (after discarding the top 50 longest outliers) and reporting the 75th‑percentile value across all page views. Lower INP values indicate faster response to user actions.

INP satisfaction ranges are: ≤200 ms (good), 200‑500 ms (needs improvement), >500 ms (poor). It focuses on all interaction types—mouse clicks, touch gestures, and keyboard events—while ignoring hover and scroll actions that do not involve explicit input.

Compared with FID, INP considers all interactions, reports the maximum latency rather than just the first, and is part of a comprehensive performance score.

If a page reports no INP value, possible reasons include no user interactions, only passive scrolling/hover, or bot/headless browsing without scripted events.

To measure INP you can:

Query Chrome User Experience Report (CrUX) for field data.

Use PageSpeed Insights (PSI) for page‑level metrics.

Integrate the web-vitals JavaScript library in your code to capture INP in real time.

Install the Web Vitals Chrome extension for on‑page visual feedback.

Run custom console scripts to log slow interactions.

Example of using web‑vitals to send INP data to Google Analytics:

import { onINP } from 'web-vitals/attribution';

function sendToGoogleAnalytics({ name, value, id, attribution }) {
  const { eventEntry, eventTarget, eventType, loadState } = attribution;
  const { startTime, processingStart, processingEnd, duration, interactionId } = eventEntry;
  const eventParams = {
    metric_inp_value: value,
    metric_id: id,
    metric_inp_event_target: eventTarget,
    metric_inp_event_type: eventType,
    metric_inp_load_state: loadState,
    metric_inp_start_time: startTime,
    metric_inp_processing_start: processingStart,
    metric_inp_processing_end: processingEnd,
    metric_inp_duration: duration,
    metric_inp_interaction_id: interactionId,
  };
  gtag('event', name, eventParams);
}

onINP(sendToGoogleAnalytics);

For environments where the extension cannot be used, the following console script logs the worst INP interaction observed:

let worstInp = 0;
const observer = new PerformanceObserver((list, obs, options) => {
  for (let entry of list.getEntries()) {
    if (!entry.interactionId) continue;
    entry.renderTime = entry.startTime + entry.duration;
    worstInp = Math.max(entry.duration, worstInp);
    console.log('[Interaction]', entry.duration, `type: ${entry.name} interactionCount: ${performance.interactionCount}, worstInp: ${worstInp}`, entry, options);
  }
});
observer.observe({
  type: 'event',
  durationThreshold: 0, // 16 minimum by spec
  buffered: true,
});

These tools together enable developers to identify slow interactions, understand which elements cause delays, and take targeted optimizations to improve the overall user experience.

In summary, INP provides a comprehensive view of interaction latency, helping teams prioritize performance work, align product direction with real user experience, and deliver faster, more responsive web applications.