New Core Web Vitals widgets in mPulse
By Philip Tellis on
Table of Contents
In a couple of days, a new version of the mPulse Data Science widgets will become available to all customers. We've been playing with this version in staging for a few weeks and I wanted to give you a preview of some of the new widgets available. In particular, widgets to understand your site's Core Web Vitals.
Nic previously posted about the LCP Metrics and INP Metrics available in mPulse. The three widgets I'll talk about today cover LCP, INP, and CLS with a focus on identifying the parts of your page that are in play.
Largest Contentful Paint (LCP)
We have three widgets that look at your page's Largest Contentful Paint timer, split by dimensions not typically exposed in the mPulse UI. These widgets let us look at LCP split by object URL, split by screen size, and split by the element on page that caused the LCP.
LCP By Element
The LCP By Element widget splits LCP values by the element that caused the Largest Contentful Paint. These elements are then categorized as Images, Headings, Content, Containers, Objects, and Other. Elements themselves are identified by a normalized and de-duplicated selector. This may not map exactly to the selectors used on your page or sent on the beacon, but they will be close. The LCP element will always be listed in upper case, while all other components will be in lower case.
Within each category, elements are ordered by beacon volume with the most impactful ones being at the top. Each of the bars is also colored based on beacon volume with more popular elements having a more intense color. This helps you to quickly focus on only the most important elements within each category.
This is a theme that is consistent across all the new Core Web Vitals widgets.
The background of the chart contains colored bands to show you what the thresholds for Good, Needs Improvement and Poor are for the metric - LCP in this case. The length of each bar indicates the absolute value of the metric.
The thresholds are defined at the 75th percentile, so if you choose to view a different percentile of your data - say the median, or 95th percentile, then the thresholds will scale up or down to match your chosen percentile. This can look weird at first if you focus on the numbers, but it makes it easier to ignore the actual values and focus on which band they end up in.
In this particular chart, we see that nothing goes into the "Poor" range.
Within each bar, we have a series of numbers that give us more information about each LCP value. In all there are 5 possible metrics that can appear here, though not all will show up for all elements. The metrics are:
- Download size in bytes or Kilobytes: This metric only exists for downloadable assets like Images.
- % of viewport covered: This metric tells us how much of the viewport was covered by the LCP object. This can often surface unexpected LCP objects, like, "why is something that only covers 2% of the viewport being marked as the LCP?", or, "why do I have an object covering 95% of my viewport?". Note that this is the intersection of the element size and the viewport size, so if an element is partially off-screen, only the on-screen component is considered.
- LCP time: This is the value that maps to the length of the bar and is the actual LCP value.
- Number of views: This is the value that maps to the color of the bar and can help with prioritization.
- Correlation: The correlation column is only available if you select an alternate timer (something other than LCP) in your dashboard filters. In this case we've chosen Page Load Time, so it tells us how strongly the LCP is correlated with Page Load Time using Pearson's correlation.
We believe that these metrics, when looked at together, can help you prioritize where you want to focus development efforts if you identify a potential problem.
LCP By Url
The LCP By Url widget is very similar to LCP By Element. The only difference being that Urls are categorized by object domain, and each item is aggregated to the Url path under that domain. Note that this widget shows the Url of a resource within the page and not the Url of the page itself.
LCP By Url is only defined for downloaded resources, which are mainly Images. We strip out any query string, hash, and credential components of the Url.
Inline images, typically represented as data:uri show up without the full encoded image content.
LCP By Screen Size
LCP By Screen Size was released as a beta widget in our previous release. The latest release adds the threshold bands to the background color.
Interaction to Next Paint (INP)
The INP By Element widget is very similar to the LCP By Element widget with a few differences. For starters, it shows the INP value rather than LCP. Secondly, there isn't a download size since INP deals with paints rather than downloads.
In the chart above, we're looking at the 95th percentile INP values, so the thresholds are scaled up to about 250ms & 625ms.
Since INP is only measured on pages where the user interacts, chances are that there will be far fewer page views with INP than with LCP. Our analysis shows that only about 20% of page view beacons measured by mPulse include an INP time. The remaining page views probably had interactions after the beacon was sent, or had no interaction at all (or perhaps the interaction resulted in the page unloading).
Not all interactions have a specific target on the page, and they may roll up to BODY. These can be simple clicks on the page, or other misc interactions.
Cumulative Layout Shift (CLS)
The CLS By Element widget is similar to the INP By Element widget. CLS is measured in unitless values.
In this case we're looking at the median cumulative layout shift, so thresholds are scaled down to 0.054 & 0.154.
Other things to note
Correlations
INP and CLS typically do not have any effect on other timers on the page, so you're unlikely to see a strong correlation with most page timers, but things like Long Task Time, which reflect the execution time of JavaScript on the page might have a stronger correlation.
In the INP chart above, we see a fairly strong correlation (84%) between INP and Long Task Time.
LCP vs INP
LCP measurement stops at the first user interaction, including scrolls, whereas INP, by definition, requires an interaction. As a result, INP should always happen after LCP. This fact may not always be reflected in aggregate data like medians because the number of data points used to calculate LCP and INP are different.
mPulse doesn't typically report the start time of the INP interaction, but you can see it in the Aggregate Waterfall dashboard.
Availability of these widgets
With the release of DSWB v98.7, these widgets are available to all users using the legacy UI. Data Science widgets cannot currently be used in the new UI, so you will need to switch to the legacy UI to see this data.
In the dashboard editor, select Data Science from the widget selector on the left, and choose the widgets of your choice. For best results, set each widget to a minimum height of 800px as the text can get a little too cramped at smaller sizes.
That's it for this update. We hope these new widgets provide useful insights into your site's Core Web Vitals.