Firefox 144 ships interactionId for INP

TL;DR

Firefox 144 ships PerformanceEventTiming.interactionId, which lets browsers and tools group events that belong to the same user interaction. This property is used to calculate Interaction to Next Paint (INP), one of the Core Web Vitals.

Firefox 144 ships support for the PerformanceEventTiming.interactionId property. It helps browsers and tools identify which input events belong to a single user interaction, such as a pointerdown, pointerup, and click triggered by the same tap.

The Interaction to Next Paint (INP) metric, part of the Core Web Vitals, relies on this grouping to measure how responsive a page feels during real user interactions. INP represents how long it takes for the next frame to paint after a user input. Instead of looking at a single event, it captures the worst interaction latency during the page’s lifetime, giving a more complete view of responsiveness.

Why this matters

Before interactionId, each event had to be measured separately, which made it hard to connect related events as part of the same interaction.
With this property, performance tools and developers can now:

• Group related input events into a single interaction
• Measure interaction latency more accurately
• Identify and debug slow interactions more easily

Using interactionId

If you use the PerformanceObserver API to collect PerformanceEventTiming entries, you’ll start seeing an interactionId field in Firefox 144. Events that share a non-zero interactionId belong to the same interaction group, which can be used to calculate latency or understand where delays occur.

// The key is the interaction ID.
let eventLatencies = {};

const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    if (entry.interactionId > 0) {
      const interactionId = entry.interactionId;
      if (!eventLatencies[interactionId]) {
        eventLatencies[interactionId] = [];
      }
      eventLatencies[interactionId].push(entry.duration);
    }
  });
});

observer.observe({ type: "event", buffered: true });

// Log events with maximum event duration for a user interaction
Object.entries(eventLatencies).forEach(([k, v]) => {
  console.log(Math.max(...v));
});

If you use external tools and libraries like web-vitals, they should already collect the INP value for you.