Extending Plumbr RUM with Web Vitals metrics

The TLDR version of today’s blog post: we are expanding the number of latency metrics that Plumbr browser agent collects to include the Web Vitals. They are not yet publicly accessible in Plumbr UI though. Let us know if you’re interested in using these metrics to help us work out the best way to offer them in the Plumbr UI and API.

Now, as the science of “how can I systematically measure and improve the technical quality of my digital services” is surprisingly complex, let us share some background into what the Web Vitals metrics are and what we plan to do with them.

An important part of the above-mentioned technical quality is latency. How can we know if our digital service is fast enough so that users feel comfortable using it? A quick answer is easy. We’ve known for more than 40 years that for users to feel in control of the interaction with a computer, the user interface should react to usage in less than 0.1 seconds. Response times of 0.1 .. 1 sec still leave the user with a feeling that they are freely navigating the process. Delays of more than 1 second “will seem intrusive on the continuity of thought” (see Miller, R. B. (1968). Response time in man-computer conversational transactions).

However, 1) we all know that web-based digital services are far from offering sub-second response times, and 2) perhaps even more importantly, what does “response time” in this context even mean? The time from user’s action to the browser receiving the first bit from the servers? Or the last bit? Or the first line of text or the first image appearing on the screen?

Web Vitals is an initiative by Google to provide unified guidance for quality signals that are essential to delivering a great user experience on the web. Currently the focus is on three performance metrics:

• Largest Contentful Paint (LCP)
• First Input Delay (FID)
• Cumulative Layout Shift (CLS)

Largest Contentful Paint measures loading performance. This metric reports the render time of the largest image or text block visible within the viewport.

First Input Delay measures page interactivity. It measures the time from when a user first interacts with a page (i.e. when they click a link, tap on a button, or use a custom, JavaScript-powered control) to the time when the browser is actually able to begin processing event handlers in response to that interaction.

Cumulative Layout Shift measures visual stability. More exactly it measures the sum total of all individual layout shift scores for every unexpected layout shift that occurs during the entire lifespan of the page. Layout shifts often occur when dynamic content like ads load and move the content of the web page.

In this great article, Google also suggests specific thresholds that you should try to meet in order to offer great user experience:

The Plumbr Browser Agent can already capture all three of the above metrics. The User Interface displaying the data is still in a beta status while we work on some of the final details. However, if you want start exploring these new metrics right now, let us know and we will include you in the beta program.

For your inspiration, here are some screenshots displaying how you will be able to monitor and use the new metrics.

Firstly, you can see the trend of all three metrics on the application level metrics page, by clicking through tabs of each metric.

Secondly, when looking at a full trace of a slow or a failed interaction, the new metrics are displayed as an annotation on the timeline:

We have a couple more ideas on how to display the data to make sure that the information is actionable for you. However, we are also looking forward to hearing about your specific use cases that you would like us to support. Contact us via support@plumbr.io or the chat widget on this very same page and our support team will make sure we can have a conversation.