New Web Vitals Responsive Metric Appears in the Wild

Normally I prepare newsletter content a few days ahead of time. This week I’m writing on Friday morning, just a few hours before hitting send!

I’ve been super busy these last couple of weeks. Between ongoing client work, playing Pokemon, and watching Rugby, I’ve also started building a small service to help designers improve the performance and sustainability of sites built in Webflow. I’ll probably be providing this as a paid subscription service, so if you build sites with Webflow and would be interested in learning more about what I’m building then drop me a line.

This week’s issue will just be a short note about one of the potentially new Web Vital metrics that has begun to experimentally appearing in CrUX data.


In a blog post last June, Google tabled some of the ways it was looking to improve capturing and reporting on website responsiveness. Last November they put forward details of a new responsiveness metric that would go beyond what is currently measured by First Input Delay (FID).

Now, in March 2022, experimental reporting of this new responsiveness metric has become available in the Chrome User Experience (CrUX) dataset. Data is available starting from February, 2022.

What is the new responsiveness metric?

To summarise it down to a few short points, the new responsiveness metric aims to:

  • Capture the full duration of interaction events.
  • Group events into interaction types. For example, a keypress would consist of a keydown and keyup event.
  • Aggregate all events for a page visit.

The blog posts linked to in the previous paragraph go into much more depth on this.

How does it differ from FID?

FID measures the time the browser takes to begin responding to a user interaction event. It’s very much an “under the hood” metric, as it deals with main-thread responsiveness. As the Google team acknowledge:

FID does not include the time spent running those event handlers, nor any work done by the browser afterwards to update the screen. Towards a better responsiveness metric

Good FID does not guarantee good responsiveness scores, as is highlighted by the data for edition.cnn.com below.

Treo web vitals report for the CNN website, showing the new responsiveness metric.

Treo web vitals report for the CNN website, showing the new responsiveness metric.

How can I start checking my site’s responsiveness?

If you want to query the CrUX BigQuery dataset, you can surface responiveness data with experimental.responsiveness (release notes). The team at Treo have also updated their free Site Speed report to show the new metric.

Resources


The next issue of Optimised will be in your inbox on April 1st (no joke). The website has an archive of all previous emails. It's a good place to recap on anything we've covered, and also handy to share with friends or colleagues.

Keep well, stay safe.

Fershad