chrome-devtools-frontend 1.0.1526630 → 1.0.1529186

package/front_end/third_party/web-vitals/package/src/attribution/onINP.ts

@@ -16,19 +16,17 @@
 
 import {getLoadState} from '../lib/getLoadState.js';
 import {getSelector} from '../lib/getSelector.js';
-import {
-  longestInteractionList,
-  entryPreProcessingCallbacks,
-  longestInteractionMap,
-} from '../lib/interactions.js';
+import {initUnique} from '../lib/initUnique.js';
+import {InteractionManager, Interaction} from '../lib/InteractionManager.js';
 import {observe} from '../lib/observe.js';
-import {whenIdle} from '../lib/whenIdle.js';
+import {whenIdleOrHidden} from '../lib/whenIdleOrHidden.js';
 import {onINP as unattributedOnINP} from '../onINP.js';
 import {
   INPAttribution,
+  INPAttributionReportOpts,
   INPMetric,
   INPMetricWithAttribution,
-  ReportOpts,
+  INPLongestScriptSummary,
 } from '../types.js';
 
 interface pendingEntriesGroup {
@@ -48,289 +46,415 @@ interface pendingEntriesGroup {
 // keeping the most recent 50 should be more than sufficient.
 const MAX_PREVIOUS_FRAMES = 50;
 
-// A PerformanceObserver, observing new `long-animation-frame` entries.
-// If this variable is defined it means the browser supports LoAF.
-let loafObserver: PerformanceObserver | undefined;
+/**
+ * Calculates the [INP](https://web.dev/articles/inp) value for the current
+ * page and calls the `callback` function once the value is ready, along with
+ * the `event` performance entries reported for that interaction. The reported
+ * value is a `DOMHighResTimeStamp`.
+ *
+ * A custom `durationThreshold` configuration option can optionally be passed
+ * to control what `event-timing` entries are considered for INP reporting. The
+ * default threshold is `40`, which means INP scores of less than 40 will not
+ * be reported. To avoid reporting no interactions in these cases, the library
+ * will fall back to the input delay of the first interaction. Note that this
+ * will not affect your 75th percentile INP value unless that value is also
+ * less than 40 (well below the recommended
+ * [good](https://web.dev/articles/inp#what_is_a_good_inp_score) threshold).
+ *
+ * If the `reportAllChanges` configuration option is set to `true`, the
+ * `callback` function will be called as soon as the value is initially
+ * determined as well as any time the value changes throughout the page
+ * lifespan.
+ *
+ * _**Important:** INP should be continually monitored for changes throughout
+ * the entire lifespan of a page—including if the user returns to the page after
+ * it has been hidden/backgrounded. However, since browsers often [will not fire
+ * additional callbacks once the user has backgrounded a
+ * page](https://developer.chrome.com/blog/page-lifecycle-api/#advice-hidden),
+ * `callback` is always called when the page's visibility state changes to
+ * hidden. As a result, the `callback` function might be called multiple times
+ * during the same page load._
+ */
+export const onINP = (
+  onReport: (metric: INPMetricWithAttribution) => void,
+  opts: INPAttributionReportOpts = {},
+) => {
+  // Clone the opts object to ensure it's unique, so we can initialize a
+  // single instance of the `InteractionManager` class that's shared only with
+  // this function invocation and the `unattributedOnINP()` invocation below
+  // (which is passed the same `opts` object).
+  opts = Object.assign({}, opts);
+
+  const interactionManager = initUnique(opts, InteractionManager);
+
+  // A list of LoAF entries that have been dispatched and could potentially
+  // intersect with the INP candidate interaction. Note that periodically this
+  // list is cleaned up and entries that are known to not match INP are removed.
+  let pendingLoAFs: PerformanceLongAnimationFrameTiming[] = [];
+
+  // An array of groups of all the event timing entries that occurred within a
+  // particular frame. Note that periodically this array is cleaned up and entries
+  // that are known to not match INP are removed.
+  let pendingEntriesGroups: pendingEntriesGroup[] = [];
+
+  // The `processingEnd` time of most recently-processed event, chronologically.
+  let latestProcessingEnd: number = 0;
+
+  // A WeakMap to look up the event-timing-entries group of a given entry.
+  // Note that this only maps from "important" entries: either the first input or
+  // those with an `interactionId`.
+  const entryToEntriesGroupMap: WeakMap<
+    PerformanceEventTiming,
+    pendingEntriesGroup
+  > = new WeakMap();
+
+  // A mapping of interactionIds to the target Node.
+  const interactionTargetMap: WeakMap<Interaction, string> = new WeakMap();
+
+  // A boolean flag indicating whether or not a cleanup task has been queued.
+  let cleanupPending = false;
+
+  /**
+   * Adds new LoAF entries to the `pendingLoAFs` list.
+   */
+  const handleLoAFEntries = (
+    entries: PerformanceLongAnimationFrameTiming[],
+  ) => {
+    pendingLoAFs = pendingLoAFs.concat(entries);
+    queueCleanup();
+  };
+
+  const saveInteractionTarget = (interaction: Interaction) => {
+    if (!interactionTargetMap.get(interaction)) {
+      const node = interaction.entries[0].target;
+      if (node) {
+        const customTarget = opts.generateTarget?.(node) ?? getSelector(node);
+        interactionTargetMap.set(interaction, customTarget);
+      }
+    }
+  };
+
+  /**
+   * Groups entries that were presented within the same animation frame by
+   * a common `renderTime`. This function works by referencing
+   * `pendingEntriesGroups` and using an existing render time if one is found
+   * (otherwise creating a new one). This function also adds all interaction
+   * entries to an `entryToRenderTimeMap` WeakMap so that the "grouped" entries
+   * can be looked up later.
+   */
+  const groupEntriesByRenderTime = (entry: PerformanceEventTiming) => {
+    const renderTime = entry.startTime + entry.duration;
+    let group;
+
+    latestProcessingEnd = Math.max(latestProcessingEnd, entry.processingEnd);
+
+    // Iterate over all previous render times in reverse order to find a match.
+    // Go in reverse since the most likely match will be at the end.
+    for (let i = pendingEntriesGroups.length - 1; i >= 0; i--) {
+      const potentialGroup = pendingEntriesGroups[i];
+
+      // If a group's render time is within 8ms of the entry's render time,
+      // assume they were part of the same frame and add it to the group.
+      if (Math.abs(renderTime - potentialGroup.renderTime) <= 8) {
+        group = potentialGroup;
+        group.startTime = Math.min(entry.startTime, group.startTime);
+        group.processingStart = Math.min(
+          entry.processingStart,
+          group.processingStart,
+        );
+        group.processingEnd = Math.max(
+          entry.processingEnd,
+          group.processingEnd,
+        );
+        group.entries.push(entry);
+
+        break;
+      }
+    }
 
-// A list of LoAF entries that have been dispatched and could potentially
-// intersect with the INP candidate interaction. Note that periodically this
-// list is cleaned up and entries that are known to not match INP are removed.
-let pendingLoAFs: PerformanceLongAnimationFrameTiming[] = [];
+    // If there was no matching group, assume this is a new frame.
+    if (!group) {
+      group = {
+        startTime: entry.startTime,
+        processingStart: entry.processingStart,
+        processingEnd: entry.processingEnd,
+        renderTime,
+        entries: [entry],
+      };
+
+      pendingEntriesGroups.push(group);
+    }
 
-// An array of groups of all the event timing entries that occurred within a
-// particular frame. Note that periodically this array is cleaned up and entries
-// that are known to not match INP are removed.
-let pendingEntriesGroups: pendingEntriesGroup[] = [];
+    // Store the grouped render time for this entry for reference later.
+    if (entry.interactionId || entry.entryType === 'first-input') {
+      entryToEntriesGroupMap.set(entry, group);
+    }
 
-// The `processingEnd` time of most recently-processed event, chronologically.
-let latestProcessingEnd: number = 0;
+    queueCleanup();
+  };
 
-// A WeakMap to look up the event-timing-entries group of a given entry.
-// Note that this only maps from "important" entries: either the first input or
-// those with an `interactionId`.
-const entryToEntriesGroupMap: WeakMap<
-  PerformanceEventTiming,
-  pendingEntriesGroup
-> = new WeakMap();
+  const queueCleanup = () => {
+    // Queue cleanup of entries that are not part of any INP candidates.
+    if (!cleanupPending) {
+      whenIdleOrHidden(cleanupEntries);
+      cleanupPending = true;
+    }
+  };
 
-// A mapping of interactionIds to the target Node.
-export const interactionTargetMap: Map<number, Node> = new Map();
+  const cleanupEntries = () => {
+    // Keep all render times that are part of a pending INP candidate or
+    // that occurred within the 50 most recently-dispatched groups of events.
+    const longestInteractionGroups =
+      interactionManager._longestInteractionList.map((i) => {
+        return entryToEntriesGroupMap.get(i.entries[0]);
+      });
+    const minIndex = pendingEntriesGroups.length - MAX_PREVIOUS_FRAMES;
+    pendingEntriesGroups = pendingEntriesGroups.filter((group, index) => {
+      if (index >= minIndex) return true;
+      return longestInteractionGroups.includes(group);
+    });
 
-// A reference to the idle task used to clean up entries from the above
-// variables. If the value is -1 it means no task is queue, and if it's
-// greater than -1 the value corresponds to the idle callback handle.
-let idleHandle: number = -1;
+    // Keep all pending LoAF entries that either:
+    // 1) intersect with entries in the newly cleaned up `pendingEntriesGroups`
+    // 2) occur after the most recently-processed event entry (for up to MAX_PREVIOUS_FRAMES)
+    const loafsToKeep: Set<PerformanceLongAnimationFrameTiming> = new Set();
+    for (const group of pendingEntriesGroups) {
+      const loafs = getIntersectingLoAFs(group.startTime, group.processingEnd);
+      for (const loaf of loafs) {
+        loafsToKeep.add(loaf);
+      }
+    }
+    const prevFrameIndexCutoff = pendingLoAFs.length - 1 - MAX_PREVIOUS_FRAMES;
+    // Filter `pendingLoAFs` to preserve LoAF order.
+    pendingLoAFs = pendingLoAFs.filter((loaf, index) => {
+      if (
+        loaf.startTime > latestProcessingEnd &&
+        index > prevFrameIndexCutoff
+      ) {
+        return true;
+      }
 
-/**
- * Adds new LoAF entries to the `pendingLoAFs` list.
- */
-const handleLoAFEntries = (entries: PerformanceLongAnimationFrameTiming[]) => {
-  pendingLoAFs = pendingLoAFs.concat(entries);
-  queueCleanup();
-};
+      return loafsToKeep.has(loaf);
+    });
 
-// Get a reference to the interaction target element in case it's removed
-// from the DOM later.
-const saveInteractionTarget = (entry: PerformanceEventTiming) => {
-  if (
-    entry.interactionId &&
-    entry.target &&
-    !interactionTargetMap.has(entry.interactionId)
+    cleanupPending = false;
+  };
+
+  async function handleOnEachInteractionCallback(
+    entry: PerformanceEventTiming,
   ) {
-    interactionTargetMap.set(entry.interactionId, entry.target);
-  }
-};
+    if (!opts.onEachInteraction) {
+      return;
+    }
 
-/**
- * Groups entries that were presented within the same animation frame by
- * a common `renderTime`. This function works by referencing
- * `pendingEntriesGroups` and using an existing render time if one is found
- * (otherwise creating a new one). This function also adds all interaction
- * entries to an `entryToRenderTimeMap` WeakMap so that the "grouped" entries
- * can be looked up later.
- */
-const groupEntriesByRenderTime = (entry: PerformanceEventTiming) => {
-  const renderTime = entry.startTime + entry.duration;
-  let group;
-
-  latestProcessingEnd = Math.max(latestProcessingEnd, entry.processingEnd);
-
-  // Iterate over all previous render times in reverse order to find a match.
-  // Go in reverse since the most likely match will be at the end.
-  for (let i = pendingEntriesGroups.length - 1; i >= 0; i--) {
-    const potentialGroup = pendingEntriesGroups[i];
-
-    // If a group's render time is within 8ms of the entry's render time,
-    // assume they were part of the same frame and add it to the group.
-    if (Math.abs(renderTime - potentialGroup.renderTime) <= 8) {
-      group = potentialGroup;
-      group.startTime = Math.min(entry.startTime, group.startTime);
-      group.processingStart = Math.min(
-        entry.processingStart,
-        group.processingStart,
-      );
-      group.processingEnd = Math.max(entry.processingEnd, group.processingEnd);
-      group.entries.push(entry);
-
-      break;
+    // Wait a microtask so this "pre" processing callback actually
+    // becomes a "post" processing callback.
+    void (await Promise.resolve());
+    if (!entry.interactionId) {
+      return;
     }
-  }
 
-  // If there was no matching group, assume this is a new frame.
-  if (!group) {
-    group = {
-      startTime: entry.startTime,
-      processingStart: entry.processingStart,
-      processingEnd: entry.processingEnd,
-      renderTime,
+    const interaction = attributeINP({
       entries: [entry],
-    };
-
-    pendingEntriesGroups.push(group);
+      // The only value we really need for `attributeINP` is `entries`
+      // Everything else is included to fill out the type.
+      name: 'INP',
+      rating: 'good',
+      value: entry.duration,
+      delta: entry.duration,
+      navigationType: 'navigate',
+      id: 'N/A',
+    });
+    opts.onEachInteraction(interaction);
   }
 
-  // Store the grouped render time for this entry for reference later.
-  if (entry.interactionId || entry.entryType === 'first-input') {
-    entryToEntriesGroupMap.set(entry, group);
-  }
+  interactionManager._onBeforeProcessingEntry = (
+    entry: PerformanceEventTiming,
+  ) => {
+    void handleOnEachInteractionCallback(entry);
+    groupEntriesByRenderTime(entry);
+  };
+  interactionManager._onAfterProcessingINPCandidate = saveInteractionTarget;
 
-  queueCleanup();
-};
+  const getIntersectingLoAFs = (
+    start: DOMHighResTimeStamp,
+    end: DOMHighResTimeStamp,
+  ) => {
+    const intersectingLoAFs: PerformanceLongAnimationFrameTiming[] = [];
 
-const queueCleanup = () => {
-  // Queue cleanup of entries that are not part of any INP candidates.
-  if (idleHandle < 0) {
-    idleHandle = whenIdle(cleanupEntries);
-  }
-};
+    for (const loaf of pendingLoAFs) {
+      // If the LoAF ends before the given start time, ignore it.
+      if (loaf.startTime + loaf.duration < start) continue;
+
+      // If the LoAF starts after the given end time, ignore it and all
+      // subsequent pending LoAFs (because they're in time order).
+      if (loaf.startTime > end) break;
 
-const cleanupEntries = () => {
-  // Delete any stored interaction target elements if they're not part of one
-  // of the 10 longest interactions.
-  if (interactionTargetMap.size > 10) {
-    interactionTargetMap.forEach((_, key) => {
-      if (!longestInteractionMap.has(key)) {
-        interactionTargetMap.delete(key);
+      // Still here? If so this LoAF intersects with the interaction.
+      intersectingLoAFs.push(loaf);
+    }
+    return intersectingLoAFs;
+  };
+
+  const attributeLoAFDetails = (attribution: INPAttribution) => {
+    // If there is no LoAF data then nothing further to attribute
+    if (!attribution.longAnimationFrameEntries?.length) {
+      return;
+    }
+
+    const interactionTime = attribution.interactionTime;
+    const inputDelay = attribution.inputDelay;
+    const processingDuration = attribution.processingDuration;
+
+    // Stats across all LoAF entries and scripts.
+    let totalScriptDuration = 0;
+    let totalStyleAndLayoutDuration = 0;
+    let totalPaintDuration = 0;
+    let longestScriptDuration = 0;
+    let longestScriptEntry: PerformanceScriptTiming | undefined;
+    let longestScriptSubpart: INPLongestScriptSummary['subpart'] | undefined;
+
+    for (const loafEntry of attribution.longAnimationFrameEntries) {
+      totalStyleAndLayoutDuration =
+        totalStyleAndLayoutDuration +
+        loafEntry.startTime +
+        loafEntry.duration -
+        loafEntry.styleAndLayoutStart;
+
+      for (const script of loafEntry.scripts) {
+        const scriptEndTime = script.startTime + script.duration;
+        if (scriptEndTime < interactionTime) {
+          continue;
+        }
+        const intersectingScriptDuration =
+          scriptEndTime - Math.max(interactionTime, script.startTime);
+        // Since forcedStyleAndLayoutDuration doesn't provide timestamps, we
+        // apportion the total based on the intersectingScriptDuration. Not
+        // correct depending on when it occurred, but the best we can do.
+        const intersectingForceStyleAndLayoutDuration = script.duration
+          ? (intersectingScriptDuration / script.duration) *
+            script.forcedStyleAndLayoutDuration
+          : 0;
+        // For scripts we exclude forcedStyleAndLayout (same as DevTools does
+        // in its summary totals) and instead include that in
+        // totalStyleAndLayoutDuration
+        totalScriptDuration +=
+          intersectingScriptDuration - intersectingForceStyleAndLayoutDuration;
+        totalStyleAndLayoutDuration += intersectingForceStyleAndLayoutDuration;
+
+        if (intersectingScriptDuration > longestScriptDuration) {
+          // Set the subpart this occurred in.
+          longestScriptSubpart =
+            script.startTime < interactionTime + inputDelay
+              ? 'input-delay'
+              : script.startTime >=
+                  interactionTime + inputDelay + processingDuration
+                ? 'presentation-delay'
+                : 'processing-duration';
+
+          longestScriptEntry = script;
+          longestScriptDuration = intersectingScriptDuration;
+        }
       }
-    });
-  }
+    }
 
-  // Keep all render times that are part of a pending INP candidate or
-  // that occurred within the 50 most recently-dispatched groups of events.
-  const longestInteractionGroups = longestInteractionList.map((i) => {
-    return entryToEntriesGroupMap.get(i.entries[0]);
-  });
-  const minIndex = pendingEntriesGroups.length - MAX_PREVIOUS_FRAMES;
-  pendingEntriesGroups = pendingEntriesGroups.filter((group, index) => {
-    if (index >= minIndex) return true;
-    return longestInteractionGroups.includes(group);
-  });
-
-  // Keep all pending LoAF entries that either:
-  // 1) intersect with entries in the newly cleaned up `pendingEntriesGroups`
-  // 2) occur after the most recently-processed event entry (for up to MAX_PREVIOUS_FRAMES)
-  const loafsToKeep: Set<PerformanceLongAnimationFrameTiming> = new Set();
-  for (let i = 0; i < pendingEntriesGroups.length; i++) {
-    const group = pendingEntriesGroups[i];
-    getIntersectingLoAFs(group.startTime, group.processingEnd).forEach(
-      (loaf) => {
-        loafsToKeep.add(loaf);
-      },
-    );
-  }
-  const prevFrameIndexCutoff = pendingLoAFs.length - 1 - MAX_PREVIOUS_FRAMES;
-  // Filter `pendingLoAFs` to preserve LoAF order.
-  pendingLoAFs = pendingLoAFs.filter((loaf, index) => {
-    if (loaf.startTime > latestProcessingEnd && index > prevFrameIndexCutoff) {
-      return true;
+    // Calculate the totalPaintDuration from the last LoAF after
+    // presentationDelay starts (where available)
+    const lastLoAF = attribution.longAnimationFrameEntries.at(-1);
+    const lastLoAFEndTime = lastLoAF
+      ? lastLoAF.startTime + lastLoAF.duration
+      : 0;
+    if (lastLoAFEndTime >= interactionTime + inputDelay + processingDuration) {
+      totalPaintDuration = attribution.nextPaintTime - lastLoAFEndTime;
     }
 
-    return loafsToKeep.has(loaf);
-  });
+    if (longestScriptEntry && longestScriptSubpart) {
+      attribution.longestScript = {
+        entry: longestScriptEntry,
+        subpart: longestScriptSubpart,
+        intersectingDuration: longestScriptDuration,
+      };
+    }
+    attribution.totalScriptDuration = totalScriptDuration;
+    attribution.totalStyleAndLayoutDuration = totalStyleAndLayoutDuration;
+    attribution.totalPaintDuration = totalPaintDuration;
+    attribution.totalUnattributedDuration =
+      attribution.nextPaintTime -
+      interactionTime -
+      totalScriptDuration -
+      totalStyleAndLayoutDuration -
+      totalPaintDuration;
+  };
 
-  // Reset the idle callback handle so it can be queued again.
-  idleHandle = -1;
-};
+  const attributeINP = (metric: INPMetric): INPMetricWithAttribution => {
+    const firstEntry = metric.entries[0];
+    const group = entryToEntriesGroupMap.get(firstEntry)!;
 
-entryPreProcessingCallbacks.push(
-  saveInteractionTarget,
-  groupEntriesByRenderTime,
-);
+    const processingStart = firstEntry.processingStart;
 
-const getIntersectingLoAFs = (
-  start: DOMHighResTimeStamp,
-  end: DOMHighResTimeStamp,
-) => {
-  const intersectingLoAFs = [];
+    // Due to the fact that durations can be rounded down to the nearest 8ms,
+    // we have to clamp `nextPaintTime` so it doesn't appear to occur before
+    // processing starts. Note: we can't use `processingEnd` since processing
+    // can extend beyond the event duration in some cases (see next comment).
+    const nextPaintTime = Math.max(
+      firstEntry.startTime + firstEntry.duration,
+      processingStart,
+    );
 
-  for (let i = 0, loaf; (loaf = pendingLoAFs[i]); i++) {
-    // If the LoAF ends before the given start time, ignore it.
-    if (loaf.startTime + loaf.duration < start) continue;
+    // For the purposes of attribution, clamp `processingEnd` to `nextPaintTime`,
+    // so processing is never reported as taking longer than INP (which can
+    // happen via the web APIs in the case of sync modals, e.g. `alert()`).
+    // See: https://github.com/GoogleChrome/web-vitals/issues/492
+    const processingEnd = Math.min(group.processingEnd, nextPaintTime);
 
-    // If the LoAF starts after the given end time, ignore it and all
-    // subsequent pending LoAFs (because they're in time order).
-    if (loaf.startTime > end) break;
+    // Sort the entries in processing time order.
+    const processedEventEntries = group.entries.sort((a, b) => {
+      return a.processingStart - b.processingStart;
+    });
 
-    // Still here? If so this LoAF intersects with the interaction.
-    intersectingLoAFs.push(loaf);
-  }
-  return intersectingLoAFs;
-};
+    const longAnimationFrameEntries: PerformanceLongAnimationFrameTiming[] =
+      getIntersectingLoAFs(firstEntry.startTime, processingEnd);
+
+    const interaction = interactionManager._longestInteractionMap.get(
+      firstEntry.interactionId,
+    );
+
+    const attribution: INPAttribution = {
+      // TS flags the next line because `interactionTargetMap.get()` might
+      // return `undefined`, but we ignore this assuming the user knows what
+      // they are doing.
+      interactionTarget: interactionTargetMap.get(interaction!)!,
+      interactionType: firstEntry.name.startsWith('key')
+        ? 'keyboard'
+        : 'pointer',
+      interactionTime: firstEntry.startTime,
+      nextPaintTime: nextPaintTime,
+      processedEventEntries: processedEventEntries,
+      longAnimationFrameEntries: longAnimationFrameEntries,
+      inputDelay: processingStart - firstEntry.startTime,
+      processingDuration: processingEnd - processingStart,
+      presentationDelay: nextPaintTime - processingEnd,
+      loadState: getLoadState(firstEntry.startTime),
+      longestScript: undefined,
+      totalScriptDuration: undefined,
+      totalStyleAndLayoutDuration: undefined,
+      totalPaintDuration: undefined,
+      totalUnattributedDuration: undefined,
+    };
 
-export const attributeINP = (metric: INPMetric): INPMetricWithAttribution => {
-  const firstEntry = metric.entries[0];
-  const group = entryToEntriesGroupMap.get(firstEntry)!;
-
-  const processingStart = firstEntry.processingStart;
-  const processingEnd = group.processingEnd;
-
-  // Sort the entries in processing time order.
-  const processedEventEntries = group.entries.sort((a, b) => {
-    return a.processingStart - b.processingStart;
-  });
-
-  const longAnimationFrameEntries: PerformanceLongAnimationFrameTiming[] =
-    getIntersectingLoAFs(firstEntry.startTime, processingEnd);
-
-  // The first interaction entry may not have a target defined, so use the
-  // first one found in the entry list.
-  // TODO: when the following bug is fixed just use `firstInteractionEntry`.
-  // https://bugs.chromium.org/p/chromium/issues/detail?id=1367329
-  // As a fallback, also check the interactionTargetMap (to account for
-  // cases where the element is removed from the DOM before reporting happens).
-  const firstEntryWithTarget = metric.entries.find((entry) => entry.target);
-  const interactionTargetElement =
-    (firstEntryWithTarget && firstEntryWithTarget.target) ||
-    interactionTargetMap.get(firstEntry.interactionId);
-
-  // Since entry durations are rounded to the nearest 8ms, we need to clamp
-  // the `nextPaintTime` value to be higher than the `processingEnd` or
-  // end time of any LoAF entry.
-  const nextPaintTimeCandidates = [
-    firstEntry.startTime + firstEntry.duration,
-    processingEnd,
-  ].concat(
-    longAnimationFrameEntries.map((loaf) => loaf.startTime + loaf.duration),
-  );
-
-  const nextPaintTime = Math.max.apply(Math, nextPaintTimeCandidates);
-
-  const attribution: INPAttribution = {
-    interactionTarget: getSelector(interactionTargetElement),
-    interactionTargetElement: interactionTargetElement,
-    interactionType: firstEntry.name.startsWith('key') ? 'keyboard' : 'pointer',
-    interactionTime: firstEntry.startTime,
-    nextPaintTime: nextPaintTime,
-    processedEventEntries: processedEventEntries,
-    longAnimationFrameEntries: longAnimationFrameEntries,
-    inputDelay: processingStart - firstEntry.startTime,
-    processingDuration: processingEnd - processingStart,
-    presentationDelay: Math.max(nextPaintTime - processingEnd, 0),
-    loadState: getLoadState(firstEntry.startTime),
+    attributeLoAFDetails(attribution);
+
+    // Use `Object.assign()` to ensure the original metric object is returned.
+    const metricWithAttribution: INPMetricWithAttribution = Object.assign(
+      metric,
+      {attribution},
+    );
+    return metricWithAttribution;
   };
 
-  // Use Object.assign to set property to keep tsc happy.
-  const metricWithAttribution: INPMetricWithAttribution = Object.assign(
-    metric,
-    {attribution},
-  );
-  return metricWithAttribution;
-};
+  // Start observing LoAF entries for attribution.
+  observe('long-animation-frame', handleLoAFEntries);
 
-/**
- * Calculates the [INP](https://web.dev/articles/inp) value for the current
- * page and calls the `callback` function once the value is ready, along with
- * the `event` performance entries reported for that interaction. The reported
- * value is a `DOMHighResTimeStamp`.
- *
- * A custom `durationThreshold` configuration option can optionally be passed to
- * control what `event-timing` entries are considered for INP reporting. The
- * default threshold is `40`, which means INP scores of less than 40 are
- * reported as 0. Note that this will not affect your 75th percentile INP value
- * unless that value is also less than 40 (well below the recommended
- * [good](https://web.dev/articles/inp#what_is_a_good_inp_score) threshold).
- *
- * If the `reportAllChanges` configuration option is set to `true`, the
- * `callback` function will be called as soon as the value is initially
- * determined as well as any time the value changes throughout the page
- * lifespan.
- *
- * _**Important:** INP should be continually monitored for changes throughout
- * the entire lifespan of a page—including if the user returns to the page after
- * it's been hidden/backgrounded. However, since browsers often [will not fire
- * additional callbacks once the user has backgrounded a
- * page](https://developer.chrome.com/blog/page-lifecycle-api/#advice-hidden),
- * `callback` is always called when the page's visibility state changes to
- * hidden. As a result, the `callback` function might be called multiple times
- * during the same page load._
- */
-export const onINP = (
-  onReport: (metric: INPMetricWithAttribution) => void,
-  opts?: ReportOpts,
-) => {
-  if (!loafObserver) {
-    loafObserver = observe('long-animation-frame', handleLoAFEntries);
-  }
   unattributedOnINP((metric: INPMetric) => {
     const metricWithAttribution = attributeINP(metric);
     onReport(metricWithAttribution);