CODEWITHSUNDEEP
javascriptperformancecore-web-vitalsinp
SimonRabbit
SimonRabbit

Reputation: 368

How to get every INP? PerformanceObserver is not returning the low values

When we open dev tools on a performance tab, there is a super nice list of every interaction with the site, and the timing with it. enter image description here

Unfortunately, it is impossible to get that kind of data from PerformanceObserver, since for 'events' its returning only bigger values, and it is doing so very sporadically.

Any ideas how to get such a nice list of interactions?

Upvotes: 0

Views: 86

Answers (1)

Barry Pollard
Barry Pollard

Reputation: 46040

That screen uses a performance observer code btw :-)

Make sure you pass a durationThreshold otherwise it uses the default of 104 milliseconds:

const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    console.log(entry.duration, entry);
  });
});

// Register the observer for events
observer.observe({ type: "event", buffered: true, durationThreshold: 0 });

Note this still won't be every duration as the minimum durationThreshold is 16 milliseconds even if you specify less (like I have there).

For that reason we also observe the first-input entry in the above screen (which has no minimum but only fires for the first interaction).

Upvotes: 1

Related Questions