web-vitals

property largestShiftEntry

largestShiftEntry?: LayoutShift;

• The LayoutShiftEntry representing the single largest layout shift contributing to the page's CLS score. (Useful when you need more than just largestShiftTarget, largestShiftTime, and largestShiftValue).

property largestShiftSource

largestShiftSource?: LayoutShiftAttribution;

• The first element source (in document order) among the sources list of the largestShiftEntry object. (Also useful when you need more than just largestShiftTarget, largestShiftTime, and largestShiftValue).

property largestShiftTarget

largestShiftTarget?: string;

• A selector identifying the first element (in document order) that shifted when the single largest layout shift contributing to the page's CLS score occurred.

property largestShiftTime

largestShiftTime?: DOMHighResTimeStamp;

• The time when the single largest layout shift contributing to the page's CLS score occurred.

property largestShiftValue

largestShiftValue?: number;

• The layout shift score of the single largest layout shift contributing to the page's CLS score.

property loadState

loadState?: LoadState;

• The loading state of the document at the time when the largest layout shift contribution to the page's CLS score occurred (see LoadState for details).

property entries

entries: LayoutShift[];

property name

name: 'CLS';

property attribution

attribution: CLSAttribution;

property fcpEntry

fcpEntry?: PerformancePaintTiming;

• The PerformancePaintTiming entry corresponding to FCP.

property firstByteToFCP

firstByteToFCP: number;

• The delta between TTFB and the first contentful paint (FCP).

property loadState

loadState: LoadState;

• The loading state of the document at the time when FCP `occurred (see LoadState for details). Ideally, documents can paint before they finish loading (e.g. the loading or dom-interactive phases).

property navigationEntry

navigationEntry?: PerformanceNavigationTiming;

• The navigation entry of the current page, which is useful for diagnosing general page load issues. This can be used to access serverTiming for example: navigationEntry?.serverTiming

property timeToFirstByte

timeToFirstByte: number;

• The time from when the user initiates loading the page until when the browser receives the first byte of the response (a.k.a. TTFB).

property entries

entries: PerformancePaintTiming[];

property name

name: 'FCP';

property attribution

attribution: FCPAttribution;

property eventEntry

eventEntry: PerformanceEventTiming;

• The PerformanceEventTiming entry corresponding to FID.

property eventTarget

eventTarget: string;

• A selector identifying the element that the user interacted with. This element will be the target of the event dispatched.

property eventTime

eventTime: number;

• The time when the user interacted. This time will match the timeStamp value of the event dispatched.

property eventType

eventType: string;

• The type of the event dispatched from the user interaction.

property loadState

loadState: LoadState;

• The loading state of the document at the time when the first interaction occurred (see LoadState for details). If the first interaction occurred while the document was loading and executing script (e.g. usually in the dom-interactive phase) it can result in long input delays.

property entries

entries: PerformanceEventTiming[];

property name

name: 'FID';

property attribution

attribution: FIDAttribution;

call signature

(entry: FirstInputPolyfillEntry): void;

property inputDelay

inputDelay: number;

• 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.

property interactionTarget

interactionTarget: string;

• 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.

property interactionTargetElement

interactionTargetElement: Node | undefined;

• 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.

property interactionTime

interactionTime: DOMHighResTimeStamp;

• 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).

property interactionType

interactionType: 'pointer' | 'keyboard';

• 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".

property loadState

loadState: LoadState;

• 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.

property longAnimationFrameEntries

longAnimationFrameEntries: PerformanceLongAnimationFrameTiming[];

• 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.

property nextPaintTime

nextPaintTime: 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.

property presentationDelay

presentationDelay: 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).

property processedEventEntries

processedEventEntries: PerformanceEventTiming[];

• An array of Event Timing entries that were processed within the same animation frame as the INP candidate interaction.

property processingDuration

processingDuration: 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.

property entries

entries: PerformanceEventTiming[];

property name

name: 'INP';

property attribution

attribution: INPAttribution;

property element

element?: string;

• The element corresponding to the largest contentful paint for the page.

property elementRenderDelay

elementRenderDelay: number;

• The delta between when the LCP resource finishes loading until the LCP element is fully rendered. See [Optimize LCP](https://web.dev/articles/optimize-lcp) for details.

property lcpEntry

lcpEntry?: LargestContentfulPaint;

• The LargestContentfulPaint entry corresponding to LCP.

property lcpResourceEntry

lcpResourceEntry?: PerformanceResourceTiming;

• The resource entry for the LCP resource (if applicable), which is useful for diagnosing resource load issues.

property navigationEntry

navigationEntry?: PerformanceNavigationTiming;

• The navigation entry of the current page, which is useful for diagnosing general page load issues. This can be used to access serverTiming for example: navigationEntry?.serverTiming

property resourceLoadDelay

resourceLoadDelay: number;

• The delta between TTFB and when the browser starts loading the LCP resource (if there is one, otherwise 0). See [Optimize LCP](https://web.dev/articles/optimize-lcp) for details.

property resourceLoadDuration

resourceLoadDuration: number;

• The total time it takes to load the LCP resource itself (if there is one, otherwise 0). See [Optimize LCP](https://web.dev/articles/optimize-lcp) for details.

property timeToFirstByte

timeToFirstByte: number;

• The time from when the user initiates loading the page until when the browser receives the first byte of the response (a.k.a. TTFB). See [Optimize LCP](https://web.dev/articles/optimize-lcp) for details.

property url

url?: string;

• The URL (if applicable) of the LCP image resource. If the LCP element is a text node, this value will not be set.

property entries

entries: LargestContentfulPaint[];

property name

name: 'LCP';

property attribution

attribution: LCPAttribution;

property delta

delta: number;

• The delta between the current value and the last-reported value. On the first report, delta and value will always be the same.

property entries

entries: PerformanceEntry[];

• Any performance entries relevant to the metric value calculation. The array may also be empty if the metric value was not based on any entries (e.g. a CLS value of 0 given no layout shifts).

property id

id: string;

• A unique ID representing this particular metric instance. This ID can be used by an analytics tool to dedupe multiple values sent for the same metric instance, or to group multiple deltas together and calculate a total. It can also be used to differentiate multiple different metric instances sent from the same page, which can happen if the page is restored from the back/forward cache (in that case new metrics object get created).

property name

name: 'CLS' | 'FCP' | 'FID' | 'INP' | 'LCP' | 'TTFB';

• The name of the metric (in acronym form).

property navigationType

navigationType:
    | 'navigate'
    | 'reload'
    | 'back-forward'
    | 'back-forward-cache'
    | 'prerender'
    | 'restore';

• The type of navigation.

  This will be the value returned by the Navigation Timing API (or undefined if the browser doesn't support that API), with the following exceptions: - 'back-forward-cache': for pages that are restored from the bfcache. - 'back_forward' is renamed to 'back-forward' for consistency. - 'prerender': for pages that were prerendered. - 'restore': for pages that were discarded by the browser and then restored by the user.

property rating

rating: 'good' | 'needs-improvement' | 'poor';

• The rating as to whether the metric value is within the "good", "needs improvement", or "poor" thresholds of the metric.

property value

value: number;

• The current value of the metric.

call signature

(metric: MetricType): void;

property durationThreshold

durationThreshold?: number;

property reportAllChanges

reportAllChanges?: boolean;

property cacheDuration

cacheDuration: number;

• The total time spent checking the HTTP cache for a match. For navigations handled via service worker, this duration usually includes service worker start-up time as well as time processing fetch event listeners, with some exceptions, see: https://github.com/w3c/navigation-timing/issues/199

property connectionDuration

connectionDuration: number;

• The total time to create the connection to the requested domain.

property dnsDuration

dnsDuration: number;

• The total time to resolve the DNS for the requested domain.

property navigationEntry

navigationEntry?: PerformanceNavigationTiming;

• The navigation entry of the current page, which is useful for diagnosing general page load issues. This can be used to access serverTiming for example: navigationEntry?.serverTiming

property requestDuration

requestDuration: number;

• The total time from when the request was sent until the first byte of the response was received. This includes network time as well as server processing time.

property waitingDuration

waitingDuration: number;

• The total time from when the user initiates loading the page to when the page starts to handle the request. Large values here are typically due to HTTP redirects, though other browser processing contributes to this duration as well (so even without redirect it's generally not zero).

property entries

entries: PerformanceNavigationTiming[];

property name

name: 'TTFB';

property attribution

attribution: TTFBAttribution;