UNPKG

4.91 kBTypeScriptView Raw
1import type { LoadState, Metric } from './base.js';
2/**
3 * An INP-specific version of the Metric object.
4 */
5export interface INPMetric extends Metric {
6 name: 'INP';
7 entries: PerformanceEventTiming[];
8}
9/**
10 * An object containing potentially-helpful debugging information that
11 * can be sent along with the INP value for the current page visit in order
12 * to help identify issues happening to real-users in the field.
13 */
14export interface INPAttribution {
15 /**
16 * A selector identifying the element that the user first interacted with
17 * as part of the frame where the INP candidate interaction occurred.
18 * If this value is an empty string, that generally means the element was
19 * removed from the DOM after the interaction.
20 */
21 interactionTarget: string;
22 /**
23 * A reference to the HTML element identified by `interactionTargetSelector`.
24 * NOTE: for attribution purpose, a selector identifying the element is
25 * typically more useful than the element itself. However, the element is
26 * also made available in case additional context is needed.
27 */
28 interactionTargetElement: Node | undefined;
29 /**
30 * The time when the user first interacted during the frame where the INP
31 * candidate interaction occurred (if more than one interaction occurred
32 * within the frame, only the first time is reported).
33 */
34 interactionTime: DOMHighResTimeStamp;
35 /**
36 * The best-guess timestamp of the next paint after the interaction.
37 * In general, this timestamp is the same as the `startTime + duration` of
38 * the event timing entry. However, since `duration` values are rounded to
39 * the nearest 8ms, it can sometimes appear that the paint occurred before
40 * processing ended (which cannot happen). This value clamps the paint time
41 * so it's always after `processingEnd` from the Event Timing API and
42 * `renderStart` from the Long Animation Frame API (where available).
43 * It also averages the duration values for all entries in the same
44 * animation frame, which should be closer to the "real" value.
45 */
46 nextPaintTime: DOMHighResTimeStamp;
47 /**
48 * The type of interaction, based on the event type of the `event` entry
49 * that corresponds to the interaction (i.e. the first `event` entry
50 * containing an `interactionId` dispatched in a given animation frame).
51 * For "pointerdown", "pointerup", or "click" events this will be "pointer",
52 * and for "keydown" or "keyup" events this will be "keyboard".
53 */
54 interactionType: 'pointer' | 'keyboard';
55 /**
56 * An array of Event Timing entries that were processed within the same
57 * animation frame as the INP candidate interaction.
58 */
59 processedEventEntries: PerformanceEventTiming[];
60 /**
61 * If the browser supports the Long Animation Frame API, this array will
62 * include any `long-animation-frame` entries that intersect with the INP
63 * candidate interaction's `startTime` and the `processingEnd` time of the
64 * last event processed within that animation frame. If the browser does not
65 * support the Long Animation Frame API or no `long-animation-frame` entries
66 * are detect, this array will be empty.
67 */
68 longAnimationFrameEntries: PerformanceLongAnimationFrameTiming[];
69 /**
70 * The time from when the user interacted with the page until when the
71 * browser was first able to start processing event listeners for that
72 * interaction. This time captures the delay before event processing can
73 * begin due to the main thread being busy with other work.
74 */
75 inputDelay: number;
76 /**
77 * The time from when the first event listener started running in response to
78 * the user interaction until when all event listener processing has finished.
79 */
80 processingDuration: number;
81 /**
82 * The time from when the browser finished processing all event listeners for
83 * the user interaction until the next frame is presented on the screen and
84 * visible to the user. This time includes work on the main thread (such as
85 * `requestAnimationFrame()` callbacks, `ResizeObserver` and
86 * `IntersectionObserver` callbacks, and style/layout calculation) as well
87 * as off-main-thread work (such as compositor, GPU, and raster work).
88 */
89 presentationDelay: number;
90 /**
91 * The loading state of the document at the time when the interaction
92 * corresponding to INP occurred (see `LoadState` for details). If the
93 * interaction occurred while the document was loading and executing script
94 * (e.g. usually in the `dom-interactive` phase) it can result in long delays.
95 */
96 loadState: LoadState;
97}
98/**
99 * An INP-specific version of the Metric object with attribution.
100 */
101export interface INPMetricWithAttribution extends INPMetric {
102 attribution: INPAttribution;
103}