mPulse Boomerang

BOOMR.plugins. EventTiming

The EventTiming plugin collects interaction metrics exposed by the W3C Event Timing proposal.

This plugin calculates metrics such as:

  • First Input Delay (FID): For the first interaction on the page, how responsive was it?
  • Interaction to Next Paint (INP): Highest value of interaction latency on the page
  • Incremental Interaction to Next Paint (IINP): Highest value of interaction latency for the current navigation

Interaction Phases

Each interaction on the page can be broken down into three phases:

  • Input Latency: How long it took for the browser to trigger event handlers for the physical interaction
  • Processing Latency: How long it takes for all event handlers to execute
  • Presentation Latency: How long it takes to draw the next frame (visual update)

FID and INP/IINP measure different phases of interactions.

First Input Delay

If the user interacts with the page, the EventTiming plugin will measure how long it took for the JavaScript event handler to fire (Input Latency).

This can give you an indication of the page being otherwise busy and unresponsive to the user if the callback is delayed.

Processing Latency and Presentation Latency are not included in the First Input Delay calculation.

This time (measured in milliseconds) is added to the beacon as et.fid.

Interation to Next Paint

After every interaction on the page, the total interaction duration is measured.

The sum of the input, processing and presentation latency for each interaction is calculated as that interactions' Interaction to Next Paint.

For every page load, Boomerang will report on (one of) the longest interactions as the page's Interaction to Next Paint (INP) metric. For page with less than 50 interactions, INP is the worst interaction. For pages with over 50 interactions, INP is the 98th percentile interaction.

This time (measured in milliseconds) is added to the beacon as et.inp, on the Unload beacon.

Incremental Interation to Next Paint

Boomerang will also add the "Incremental INP" (incremental being since the last beacon) as et.inp.inc.

For MPA websites, this means the Page Load beacon will have an Incremental INP (if any interactions happened before the Page Load event). The Unload beacon's et.inp will be the "final" INP value.

For SPA websites, the SPA Hard and all SPA Soft beacons will contain an Incremental INP, which tracks any interactions since the previous Hard/Soft beacon. This way you can track INP for long-lived SPA websites, split by each route.

For information on how to include this plugin, see the Building tutorial.

Beacon Parameters

All beacon parameters are prefixed with et..

This plugin adds the following parameters to the beacon:

  • et.e: Compressed EventTiming events
  • et.fid: Observed First Input Delay
  • et.inp: Interaction to Next Paint (full page, on Unload beacon)
  • et.inp.e: INP target element
  • et.inp.t: INP timestamp that the interaction occurred
  • et.inp.inc: Incremental Interaction to Next Paint (for the Page Load and each SPA Soft nav)
  • et.inp.inc.e: Incremental INP target element
  • et.inp.inc.t: Incremental INP timestamp that the interaction occurred

See:

Members

metrics

Exported metrics

Methods

init(config)

Initializes the plugin.

Parameters:

Name Type Description
config object

Configuration

Properties
Name Type Argument Default Description
EventTiming.maxEntries boolean <optional>
 100

Maximum number of EventTiming entries to track, set to -1 for unlimited
EventTiming.durationThreshold number <optional>
 16

EventTiming duration threshold

Returns:

BOOMR.plugins.EventTiming The EventTiming plugin for chaining

is_complete()

Whether or not this plugin is complete

Returns:

Type: boolean

true if the plugin is complete

is_enabled()

Whether or not this plugin is enabled and EventTiming is supported.

Returns:

Type: boolean

true if EventTiming plugin is enabled and supported.

is_supported()

Whether or not EventTiming is supported in this browser.

Returns:

Type: boolean

true if EventTiming is supported.

stop()

Stops observing