Engagement charts: See correlations between performance and user engagement

One of the best – and worst – things about real user monitoring is that it gives you unparalleled access to massive amounts of user data. The problem is when all this data leads to data indigestion. How do you know where to begin? And how do you know what to leave out in order to present a clear case for performance?

At SpeedCurve, we care about more than just showing you all your data. We want to show you the most important data. And we want to make it easy for you to share that data with people throughout your organization. That’s why we’re excited about the newest addition to our family of visualizations: engagement charts. 

What are engagement charts?

Engagement charts – which are generated by RUM data – are the first member in our new family of correlation charts. (We'll be introducing new members of the family down the road, but for today, let's focus on engagement.)

Engagement charts give you a histogram view of all your user traffic, broken out into cohorts based on start render and load time. You also get an overlay that shows you the bounce rate that correlates to each of these cohorts. This lets you see at a glance the relationship between page speed and user engagement. (Spoiler alert: The dominant trend is that as pages get slower, bounce rate gets worse.)

Why you need them

Engagement charts are a great way to communicate about performance to a business audience. These visualizations let even the most non-technical stakeholder easily see the correlation between performance and user engagement. In my experience with talking about performance to a wide variety of audiences, graphs like this (which I’ve manually created the old-fashioned way in the past) can be extremely effective in winning performance buy-in. 

But wait… there’s more! 

Spot performance-blocking trends 

We’ve created overlays that let you see the correlation between blocking JavaScript and CSS with your other metrics.

This lets you spot trends on your pages – for example, in the sample graph above, you can see that while there are fewer blocking resources on the faster pages, this number takes a sharp upturn starting with the cohort of pages that have a start render time of 1.1 seconds. If your goal is to deliver faster start render times to more users (and 1.1 seconds is a pretty good goal to shoot for), then this might trigger you to do an audit of your pages to analyze how your scripts and stylesheets are being executed. 

Get started

If you’re already a SpeedCurve RUM user: Engagement charts are available by default at the top of your Performance Dashboard. Use the arrow icon in the top right corner of the dashboard to easily share them with your team members and other folks in your organization. 

If you're a SpeedCurve Synthetic user, but haven't tried RUM yet: All you have to do is grab the RUM ID for your team (available in the Admin>Teams panel), install the RUM JS snippet on your site.

If you’re not a SpeedCurve user: Then sign up for your free trial and get these graphs for your own site.

How would you use engagement and correlation charts?

As always, we’d love to hear your feedback and suggestions for iterating on these charts. Which metrics would you love to see by default, and why? Let us know in the comments, reply to our Twitter announcement, or send us a note at support@speedcurve.com.