Adding analytics is always a bit like switching on the lights in a previously dark room. We start to see patterns and problems that had not even been considered before. These highlights can lead the way to better and smarter optimisations.

That said, analytics should be both informative and actionable. Often, analytics give us incredibly informative with information with aggregations, but leave a large gap toward the actionable aspect of analysis.

This gap is usually left to be filled by you, the interpretor of the analysis. While there is nothing intrinsically wrong with this approach: some level of knowledge is assumed on the part of the observer, the problem is that you, the observer, will far too often perform a very robotic set of tasks to figure out the actions.

It is this robotic set of tasks that ultimately transform the information into action. Now if only we had some kind of magic, wondrous “computing device” that was very good at repetitive and robotic tasks. Yes, joking aside, our goal here at BytesMatter is to dig deep into the analysis, surfacing more and more actionable data, leaving you more time to get on with the actual optimisations!

As an example from our journey on this vision, we built the ability to

  • surfacing page load metrics and web vitals, and then
  • break this down by page, country, device type, browser, and then
  • group aggregations by these filters so that you can immediately spot outliers and pain points

Page load chart grouped by browser

Each step does a bit more of the work for you. To use the light analogy from above, each step lights up a torch in a new corner of the room!

More lights please

Yes, as mentioned our goal is to dig deeper and deeper into the analysis. With that in mind it is great that we can introduce our latest feature: Resource Analysis

Resource analysis can be found under the Take Action menu. On navigating to the page, you are presented with 3 charts, each surfacing different information to help you figure out where to optimise effectively. These charts all represent a median aggregation of all RUM data for the currently selected date range.

Chart 1. Timings: Slowest vs Median

Chart showing slowest individual resource vs median of each resource type

Here we see, for each resource type (javascript, stylesheets, etc), the slowest individual download time vs the median for all resources of the same type. In this particular case we can see there is a call aptly named “ajax-long-wait” that takes much longer than other async HTTP requests on this page, thus representing an effective place to target effort to optimise.

Chart 2. Total wait times

Doughnut chart showing relative total timings spent downloading various resource types

This is NOT your standard resource WEIGHTS chart. Weights don’t actually matter in terms of user experience: Wait times matter. Of course there is a relationship between the two but, for example a larger file served via a CDN might actually be downloaded faster than a comparatively lighter file served outside of the CDN. The user experience does not take weight into account! (Be aware that weight may be a primary factor when cost of internet usage is high, but that is out of scope in this case).

In the case of this chart, we can quickly see there will be very little gain optimising delivery of stylesheets (css) and javascript, as they take up far less time in the page load than the document and async requests. Again, a simple and clear indicator of where to spend effort!

Chart 3. Aggregated Waterfall

Waterfall chart with aggregated times for resources

Waterfalls charts showing individual page loads are incredibly powerful tools (Hello, WebpageTest) and should be used heavily as part of your web development. That said, they are stil snapshots from controlled environments. This chart here represents an aggregated waterfall of all page loads. The power here is that it gives an immediate and crystal clear view of what a median load looks like for all users.

A quick plug for our other use of waterfall charts for individual real user loads, which help diagnose individual or outlier problems. Read more about waterfalls made of RUM

The superpower of filters

Of course all these charts can be filtered with the various options for country, browser, device type, and page group. This makes the resource analysis page an incredibly powerful tool in helping you figure out where to start optimising most effectively.

Thanks so much for reading. We hope you use these new features and are as excited about them as we are!

Tags: #frontend #tools