Skip to main content

Measuring the Performance of User Journeys

This article explains how to use DebugBear to measure the performance of user journeys: the pages and interactions that follow the initial page load.

You get load time metrics for each page in the flow, an Interaction to Next Paint score for each interaction, and separate Core Web Vitals for single-page app navigations.

User journey performance metrics

How to set up a user journey​

You can set up user journey monitoring under the page speed monitoring feature in DebugBear:

  1. Select Page Speed
  2. Click on Add Page
  3. Click Monitor User Flow

Then click Configure User Flow to set up the steps in the user flow and then Add User Flow.

User flow setup

Scripting the user flow​

You can generate a user journey with AI or add actions manually.

Click Add Action Group to either add a new set of actions or reuse a set of actions you've already configured.

User journey configuration

Once you've generated a user flow you can use Test Flow to check that it's working as expected.

Tested user flow

You can expand individual flow actions to review them in detail.

For example, it can be helpful to check whether the CSS selectors correctly capture your intent and are expected to be stable over time.

Generated user flow actions

User flow test results​

The user flow test does not run a Lighthouse check with a Performance score. Instead the two key metrics DebugBear reports are Interaction to Next Paint and User Flow Duration.

User flow test result summary

Flow-wide vs. per-page metrics​

When looking at the whole user flow, load time metrics like the Largest Contentful Paint are averaged across navigations.

Other metrics like Total Blocking Time or page weight are summed up across the user flow.

Hover over the Average or Full Flow badges to see the per-page breakdown.

Tooltip showing a metric averaged across each page of the flow

Use the page selector at the top of the page to zoom in on a specific page of the user journey.

Page selector listing the full flow and each page in it

Events table​

The events table shows you when different steps in the user flow occurred. It includes:

  • User flow actions (e.g. a click or a navigation)
  • Page navigations
  • Largest Contentful Paint events
  • Layout shift events
  • Interactions with their Interaction to Next Paint score

You can expand each event to view more information about it, for example a request waterfall or CPU time for a specific page view or interaction.

Events table

Request waterfall​

The request waterfall shows when different network resources are loaded, along with the page rendering progress at that point and any CPU tasks that were run.

The dotted pink lines show when a URL navigation occurred. Use the navigation selector at the top of the page to filter the page weight chart and request waterfall to only look at that navigation.

Request waterfall with dotted lines marking each navigation

Interactions tab​

The Interactions tab lists any Interaction to Next Paint scores that were recorded. Click on each chart to view more detail about the interaction:

  • What element was clicked on
  • What CPU tasks ran and how did the page change visually
  • What components contributed to the interaction delay

Interactions tab with a chart for each recorded interaction

The call tree can provide additional insights into what delayed the interaction.

CPU call tree for a user interaction

Single-page app navigations​

Each SPA navigation is recorded separately, with its own Core Web Vitals metrics.

SPA navigation timings

Last updated on