mPulse Feature Release - INP

By Ian Marge + Nic Jansma on

Table of Contents


The mPulse team is happy to announce full support for Interaction to Next Paint (INP) in the mPulse UI.

History

First Input Delay (FID) is one of the three original Google Core Web Vitals (CWV) metrics, and aims to measure responsiveness within a web application. On March 12, 2024, FID will be replaced by a new metric called Interaction to Next Paint (INP) as a Core Web Vital.

The reason for this change is to address some of the limitations the web performance community has identified with using FID as a CWV metric. INP also measures responsiveness, and with the experimentation Google and others have done over the last year, Google believes that INP better measures responsiveness (and reflects the user experience) than FID.

For more information, please refer to the Google write up on INP.

As of 2024-02-21, mPulse has added full support for Interaction to Next Paint within the mPulse UI (both Legacy and New UIs).

INP in the New mPulse UI

INP is now an official system timer within the mPulse UI. This means that INP data is automatically captured (via the boomerang.js library) and presented alongside all of the other system timers within the mPulse UI -- no Custom Timers are needed.

(See the notes below if you are currently using a Custom Timer to measure INP)

Within the New mPulse UI (soon out of beta!), the INP metric has been added to all of the relevant dashboards and toolsets, such as:

The Home Page

INP now appears in the main dashboard featured on the mPulse Home Page (replacing FID):

INP in the mPulse Home Page

Performance Explorer

While Google is changing the Core Web Vitals to replace FID with INP, we realize that some mPulse customers are still interested in measuring and tracking FID within their web application.

When the Core Web Vitals were first announced, mPulse provided a Core Web Vitals dashboard that focused on LCP, FID and CLS. That particular dashboard will not change, and will continue to show FID.

Instead, a new Core Web Vitals 2024 dashboard has been created, which replaces FID with INP:

INP in Performance Explorer

Waterfall Dashboard

The Waterfall dashboard has added support for INP.

If INP was captured for the beacon, it will be shown in the Perf tab as well as displayed within the Waterfall chart (its start time and duration):

INP in the Waterfall

INP Timer

Since INP is an official system timer, it can be found in the Key Performance Indicators of the Performance Explorer.

mPulse's Performance Explorer gives additional insights for every metric (such as INP) and helps you understand:

  • How that metric is distributed across your measurements (in a histogram)
  • How it has presented over time (in a chart)
  • How it is broken down by dimensions (such as Country and Page Group)
  • Other Leading Indicators that can affect this metric

INP in the Waterfall

Every metric in the Performance Explorer has a set of Leading Indicator metrics that may affect the selected metric.

For example, in the case of INP, Total Blocking Time (TBT) and JavaScript-related metrics are often a culprit of high INP:

INP in the Waterfall

INP in the Legacy mPulse UI

While we are busy focusing on adding features to the New UI (and to transition it out of Beta), we will continue to support the Legacy mPulse UI.

We have added support for INP in our Legacy UI in all of the places you would expect.

A new Core Web Vitals 2024 dashboard (replacing FID with INP):

Core Web Vitals 2024 Dashboard

As a selectable timer in all of the other dashboards:

INP in the Summary Dashboard

Broken down for each beacon in the Legacy Waterfall:

INP in the Waterfall Dashboard

Other Release Notes

In addition to INP support, this release also contains updates to Filter Templates in the New UI.

Filter Templates

Filter Templates are a powerful feature of the New mPulse UI, that allow you to define a group of filters that can be re-used within the UI.

Previously, Filter Templates were only able to be applied to Dashboards. With this release, Sections and Widgets can also receive Filter Templates.

All you need to do is drag the desired Filter Template from the left-hand navigation onto the desired area in your dashboard.

Filter Templates in Dashboard, Sections, Widgets

We will have an additional blog post that deep dives into what Filter Templates can do soon!

Enabling INP For Your mPulse Application

What version of Boomerang is needed for INP support?

mPulse depends on Boomerang.js, an open-source JavaScript Real-User Monitoring (RUM) library for collecting performance data.

Interaction to Next Paint support was added to Boomerang in version 1.785, which was released in July 2023. If your application is using an older version of Boomerang, we recommend upgrading to 1.785 or even the newer version 1.792. You can follow the 1.792 upgrade directions here if needed.

When is Boomerang collecting INP data?

Boomerang collects INP data on all Page Load beacons (for both regular and Single-Page Apps) for all browsers that support the EventTiming API. As of February 2024, Chrome, Edge, Firefox and Opera support collecting INP through the EventTiming API. INP support is not available for Safari at this time.

mPulse is configured by default to send Page Load beacon data shortly after the page's onload event, as well as for each SPA Hard and Soft navigation completion event.

As a result, this means that all INP data mPulse is collecting will be biased towards interactions that happen prior to the Page Load (and its beacon). Interactions and INP that happen after the Page Load event won't be included in the mPulse data. Since a lot of browser activity is happening prior to the Page Load event, interactions that happen pre-Page Load will often be competing for CPU more than interactions post-Page Load, so may be slower. As a result, mPulse's INP measurements may appear higher than CrUX, for example, which measures all INP interactions through the unload event.

If desired, Boomerang can be configured to "wait" longer after the Page Load event to send a beacon. The mPulse team is also working on an option to send beacon data at page Unload instead of Page Load.

Does Boomerang include attribution data for INP interactions?

For every interaction, Boomerang is capturing the duration, timestamp and the target element's CSS-selector. This raw data can be found within the mPulse Waterfall dashboard, on the Raw tab:

INP in the Waterfall Dashboard

Details on every Beacon parameter can be found in the What's in a mPulse Beacon document.

For now, this data is only available on individual beacons. In the future, we plan to give an aggregated view of INP data, and to expand INP coverage into other dashboards and make it easier to consume and diagnose INP slowdowns.

What about my Custom Timer capturing INP data?

Prior to this release, customers were able to capture INP data through the use of a Custom Timer. Those Custom Timers will continue to work, and none of that data will be affected or stopped.

The new system timer "Interaction To Next Paint" will show up alongside the Custom Timer named the same (or similarly). The official INP timer will have data beginning roughly February 15, 2024 onward.

You can choose to remove any Custom Timers capturing INP data if you would like; just note that the official INP timer will not have any data prior to February 15, 2024.

Is FID going away?

Not at all!

The mPulse team plans to keep collecting and presenting the FID metric for customers that want to use it.

Summary

Feel free to reach out to provide us feedback on this release!

You can do this either via the Contact Us button in mPulse or through your account manager.