Skip to main content

Performance Budgets

A web performance budget helps you avoid gradual performance regressions. It allows you to set a maximum threshold for site performance metrics.

If you set up a performance budget in DebugBear you'll get an alert when a page starts going over budget. You can also set up performance budgeting for your CI builds.

Performance budget in the Lighthouse report

What metrics can you set a budget for?​

Right now these metrics are supported:

  • Page weight (Total, HTML, JavaScript, CSS, Images)
  • Lighthouse scores (Performance, Best Practices, Accessibility, SEO)
  • Web Vitals (Largest Contentful Paint, Total Blocking Time, Cumulative Layout Shift)
  • Other metrics (Speed Index, Time to Interactive)

We'll add more metrics in the future, please contact support if you want to set a budget for a specific metric.

How to set up a performance budget​

When creating or editing a monitored page click Show Advanced and the expand the Performance Budgets section.

Configuring web performance budgets on DebugBear

Select an existing budget or click Create budget to set up a new performance budget.

List of website performance budgetse

You can then add metric thresholds to your budget. There are two types of threshold:

  • absolute thresholds – budget failed if metric goes above or below a certain value
  • relative thresholds – metric changes based on a percentage increase to the previous test result

Budgets can apply to all tests or only to scheduled tests or API builds. For example, if your preview deployments are blocked from indexing their SEO score will be lower, and you might want to set a different SEO budget for them. A custom environment test is a test that uses a different URL from the main monitored page.

Editing performance budget metrics

Impact on CI builds​

After setting up a budget API/CI builds will fail if a budget threshold is exceeded. If you've set up the GitHub integration the build will also fail on GitHub.

Failing and passing API builds