Getting up to speed on Core Web Vitals seems to be at the top of everyone's to-do list these days. Just in time for the holidays, we are happy to bring you our new Vitals dashboard to help you get a huge jumpstart.
We love to visualize performance data (in case you haven't heard). We love it even more when we can be true to one of our biggest motivations at SpeedCurve: leveraging both RUM and Synthetic data to help you take action on what matters most.
Each vital metric is represented in its own section of the dashboard, with a current view of where you stand relative to the recommended thresholds. This summary view is designed to be a quick snapshot easily digested by those who are simply looking to see where they stand. Expanding each section unlocks a bit more detail around each metric, leveraging the best parts of each dataset and hopefully educating you along the way.
The first vital in the dashboard is Largest Contentful Paint (LCP). When each section is expanded, thresholds taken from the vitals bar are included in the histogram and time series charts. Seeing the distribution alongside the time series helps to identify anomalies or perhaps pockets of users that have different performance characteristics.
Visualizing paint events with just RUM is not possible. In order to do this, we need to examine the before and after frames around LCP taken from a synthetic test. While the accuracy of LCP continues to improve, identifying the element introduced between the two frames shown helps you validate the accuracy of the metric as well as the element attributed to LCP. (If you want to learn more, Joseph has done some great analysis of how paint timing metrics align with filmstrips in this post.)
If you've seen Tammy's recent post on CLS, as well as the new visualizations introduced by Mark, you'll know we've been spending A LOT of time thinking about how to help you understand and debug CLS. That work has been included here to help you understand your score and identify the layout shifts that drive it.
Don't fret. If you have RUM with someone else, that's great! We still love you. (If not, feel free to try our RUM.) Just make sure you're using RUM somewhere, as it's crucial for understanding Vitals. But if you're not using our RUM tool, we still want you to get use out of this dashboard, so we'll default to showing you synthetic data.
By default, we'll make attempts to match up your RUM and Synthetic data. To ensure we get this right – and to give you more flexibility as you dive into Vitals – it is REALLY important that you set your page labels in RUM and Synthetic to match. More on this here and here.