Skip to content

Instantly share code, notes, and snippets.

@malchata
Created May 2, 2023 14:18
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save malchata/5e60f283dddf89a2f6cf3b6fddedf5bd to your computer and use it in GitHub Desktop.
Save malchata/5e60f283dddf89a2f6cf3b6fddedf5bd to your computer and use it in GitHub Desktop.
Log INP details in the console
// Credit to Michal Mocny (https://twitter.com/mmocny)
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
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment