1 | import type { LoadState, Metric } from './base.js';
|
2 | /**
|
3 | * An INP-specific version of the Metric object.
|
4 | */
|
5 | export 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 | */
|
14 | export 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 | */
|
101 | export interface INPMetricWithAttribution extends INPMetric {
|
102 | attribution: INPAttribution;
|
103 | }
|