Skip to main content

Project Performance Overview

The DebugBear project overview lists the pages that you've monitored, and visualizes site speed metrics and other performance data.

Views​

There are three different display modes for the overview. These can be selected with the cog icon in the top right corner of the dashboard.

View selection

Standard view​

By default, the overview shows a trendline with data for the last 10 days. See Date Range Selection below to change the amount of time covered.

The bars show the median value for each period, for example each day. The number below the bar chart shows the most recent test result.

Standard view

This value can be changed to show the average for the selected period by using the cog icon.

Value to show

Narrow view​

The narrow view shows more pages, with trendline graphs to help spot regressions or improvements.

Narrow view

Detailed view​

The detailed view shows more information, including location, test configuration, and tags.

Detailed view

Filmstrip​

The filmstrip tab lets you compare the rendering behavior of different pages.

Rendering filmstrips

Bulk Edit​

The bulk edit view lets you edit multiple pages at once. For example, you can add and remove tags, or change how often tests are run.

Bulk Edit view

Selecting Performance Metrics​

The default view is Summary, which shows the following metrics:

Summary metrics view

The Performance Score view includes Total Blocking Time (TBT) and Google Lighthouse's performance score.

Performance metrics

The Web Vitals view shows both data from Google's Chrome User Experience Report (CrUX) and lab data collected by DebugBear.

Note that CrUX values reported by Google are always aggregated over a 28-day rolling window.

Core Web Vitals metrics

The Lab Overview shows the 6 main metrics from the lab test.

Lab overview metrics

The Rendering view shows all metrics related to page load speed, including Speed Index and Visually Complete.

Rendering metrics

The Page Weight view provides a breakdown of the heaviest categories of a page, including JavaScript, fonts, and images.

Page weight metrics

The CrUX view shows the most recent CrUX data for the page.

CrUX metrics

The Lighthouse view shows Lighthouse scores for Performance, Accessibility, Best Practices, and SEO.

Lighthouse scores

The Errors view shows metrics like the number of console errors and invalid resource hints.

Error metrics

Metrics can be added or removed at the bottom of the metrics view. The dropdown contains additional metrics, including User Timings. These can be saved for future use by creating a new metric group.

Metric selections

Date Range Selection​

For the overview trendlines, you can select from the following options:

  • Daily: show median daily data for the last 10 days
  • Weekly: show median weekly data for the last 10 weeks
  • Monthly: show median monthly data for the last 10 months
  • Last 10: show data for the last 10 test results
  • Custom date range: show data for a custom range

Date selection

Compare Date Ranges​

Comparing date ranges shows the median metric value between two periods.

Compare date range results

Filters​

Clicking Add Filter lets you quickly find all pages with a certain tag, domain, URL, or device.

Filters

These settings can be used as Saved Filters for future use.

The text search lets you filter based on a range of page properties, including:

Use brackets to search for tags specifically, for example [my-tag].

Search Operators​

The search input supports NOT and OR operators.

  • !discord will match all pages that don't match discord
  • discord or squarespace will match pages that match either discord or squarespace

Sorting​

Click on the metric column headers to identify your slowest pages.

Sort order

Triggering tests​

You can trigger page tests on demand, for example, after a recent website deployment. Click the Test N pages now button in the sidebar.

After tests are complete, any normal alerts will be sent, for example, via email or Slack.

Test pages button

Last updated on