log INP core web vital

inp.ts

function onDocumentClick(){
  const start = performance.now();
  runAfterFramePaint(() => {
    const end = performance.now();
    console.log(`Time to paint: ${end - start}ms`);
  });
}

function onDocumentKeyDown(event: KeyboardEvent){
  const start = performance.now();
  runAfterFramePaint(() => {
    const end = performance.now();
    console.log(`Time to paint: ${end - start}ms`);
  });
}

document.addEventListener('click', onDocumentClick);
document.addEventListener('keydown', onDocumentKeyDown);

/**
 * Runs `callback` shortly after the next browser Frame is produced.
 * https://webperf.tips/tip/measuring-paint-time/
 */
function runAfterFramePaint(callback) {
  // Queue a "before Render Steps" callback via requestAnimationFrame.
  requestAnimationFrame(() => {
      const messageChannel = new MessageChannel();

      // Setup the callback to run in a Task
      messageChannel.port1.onmessage = callback;

      // Queue the Task on the Task Queue
      messageChannel.port2.postMessage(undefined);
  });
}