web-vitals/dist/modules/types/inp.d.ts

Easily measure performance metrics in JavaScript

import type { LoadState, Metric } from './base.js';
/**
 * An INP-specific version of the Metric object.
 */
export interface INPMetric extends Metric {
    name: 'INP';
    entries: PerformanceEventTiming[];
}
/**
 * An object containing potentially-helpful debugging information that
 * can be sent along with the INP value for the current page visit in order
 * to help identify issues happening to real-users in the field.
 */
export interface INPAttribution {
    /**
     * A selector identifying the element that the user first interacted with
     * as part of the frame where the INP candidate interaction occurred.
     * If this value is an empty string, that generally means the element was
     * removed from the DOM after the interaction.
     */
    interactionTarget: string;
    /**
     * A reference to the HTML element identified by `interactionTargetSelector`.
     * NOTE: for attribution purpose, a selector identifying the element is
     * typically more useful than the element itself. However, the element is
     * also made available in case additional context is needed.
     */
    interactionTargetElement: Node | undefined;
    /**
     * The time when the user first interacted during the frame where the INP
     * candidate interaction occurred (if more than one interaction occurred
     * within the frame, only the first time is reported).
     */
    interactionTime: DOMHighResTimeStamp;
    /**
     * The best-guess timestamp of the next paint after the interaction.
     * In general, this timestamp is the same as the `startTime + duration` of
     * the event timing entry. However, since `duration` values are rounded to
     * the nearest 8ms, it can sometimes appear that the paint occurred before
     * processing ended (which cannot happen). This value clamps the paint time
     * so it's always after `processingEnd` from the Event Timing API and
     * `renderStart` from the Long Animation Frame API (where available).
     * It also averages the duration values for all entries in the same
     * animation frame, which should be closer to the "real" value.
     */
    nextPaintTime: DOMHighResTimeStamp;
    /**
     * The type of interaction, based on the event type of the `event` entry
     * that corresponds to the interaction (i.e. the first `event` entry
     * containing an `interactionId` dispatched in a given animation frame).
     * For "pointerdown", "pointerup", or "click" events this will be "pointer",
     * and for "keydown" or "keyup" events this will be "keyboard".
     */
    interactionType: 'pointer' | 'keyboard';
    /**
     * An array of Event Timing entries that were processed within the same
     * animation frame as the INP candidate interaction.
     */
    processedEventEntries: PerformanceEventTiming[];
    /**
     * If the browser supports the Long Animation Frame API, this array will
     * include any `long-animation-frame` entries that intersect with the INP
     * candidate interaction's `startTime` and the `processingEnd` time of the
     * last event processed within that animation frame. If the browser does not
     * support the Long Animation Frame API or no `long-animation-frame` entries
     * are detect, this array will be empty.
     */
    longAnimationFrameEntries: PerformanceLongAnimationFrameTiming[];
    /**
     * The time from when the user interacted with the page until when the
     * browser was first able to start processing event listeners for that
     * interaction. This time captures the delay before event processing can
     * begin due to the main thread being busy with other work.
     */
    inputDelay: number;
    /**
     * The time from when the first event listener started running in response to
     * the user interaction until when all event listener processing has finished.
     */
    processingDuration: number;
    /**
     * The time from when the browser finished processing all event listeners for
     * the user interaction until the next frame is presented on the screen and
     * visible to the user. This time includes work on the main thread (such as
     * `requestAnimationFrame()` callbacks, `ResizeObserver` and
     * `IntersectionObserver` callbacks, and style/layout calculation) as well
     * as off-main-thread work (such as compositor, GPU, and raster work).
     */
    presentationDelay: number;
    /**
     * The loading state of the document at the time when the interaction
     * corresponding to INP occurred (see `LoadState` for details). If the
     * interaction occurred while the document was loading and executing script
     * (e.g. usually in the `dom-interactive` phase) it can result in long delays.
     */
    loadState: LoadState;
}
/**
 * An INP-specific version of the Metric object with attribution.
 */
export interface INPMetricWithAttribution extends INPMetric {
    attribution: INPAttribution;
}