Find us at BrightonSEO 25/26 April - STAND 18! Fill your swag bag!

Performance budgets

Performance optimization has evolved over recent years to become much more user-centric, with the Web Vitals initiative enabling us to collect more meaningful data, and Google's push towards improving 'page experience.'

However, it is naive to assume that the user is the only important player in this game, and performance optimization also needs to be balanced with ensuring that the website is still able to perform its function.

As an example, consider a news site that is monetized by running ads. You could easily improve the user experience by removing all the ads and tracking scripts, which would almost definitely improve Core Web Vitals metrics and thus the 'page experience' signal for Google.

But now the website is unable to make any money! It turns a consistent loss, all the staff get fired, who then default on their mortgages and end up homeless.

This is not really the desired outcome, and it is where performance budgets can come in. They allows companies to prioritize user experience improvements without sacrificing too much in terms of website functionality.

Table of contents

What is a performance budget?

A performance budget is a collection of page-level thresholds for various website metrics or page resources. The idea is that you set these limits, and aim to keep every single URL under all of the limits, or at least under the total budget.

There are two different ways this can be done:

  1. Timing based (e.g. Time to Interactive, First Contentful Paint)
  2. Quantity-based (e.g. amount of JS files/total image size).

If you think about #1, this is basically what we have with the Web Vitals data - each datapoint is scored (Good/Needs Improvement/Poor) based on a set of thresholds divined by our Google overlords.

In Sitebulb, this element is taken care of with the lab data collection in the Performance Overview:

Lab data

However, Sitebulb also allows you to set quantity-based performance budgets for the following page resources:

  • Document (Kb)
  • Script (Kb)
  • Style Sheet (Kb)
  • Image (Kb)
  • Font (Kb)
  • Media (Kb)
  • Other (Kb)
  • Third Party (Kb)
  • Total (Kb)

As Sitebulb crawls all the pages on your site, it will check and store the values for each of these datapoints, then confirm for each metric either 'pass' or 'fail', based on the budget set. So if you set 70Kb as the Style Sheet budget, but actually 100Kb of Style Sheets were loaded in for a specific URL, this URL would be a 'fail' for the Style Sheet budget.

The bottom option (total) allows you to utilise some flexibility in your budget analysis. So in the example above where the Style Sheets failed staying below budget, it might be the case that the rest of the page is really lean, and in fact the total page weight came in under budget. At this point you can decide if that is 'good enough', or you want to put in extra work to get the Style Sheets down.

When to use a performance budget

In general, performance budgets are designed to help out with ongoing optimization (or website re-builds). They are not the sort of thing you would include in a technical website audit, or even a one-off performance audit, if you have been given no prior information about the budget itself.

So if you are working on those sort of deliverables, this should not be an area of concern for you.

Performance budgets are useful in situations where:

  • You are an agency involved in ongoing and regular optimization work with a client.
  • You are a solo consultant working closely with a client on ongoing performance optimization.
  • You are an in-house SEO working closely with the development team on performance.

In general, it requires a level of buy-in from both the client and the development team, who may need convincing that this is important...

And if you do not have access to or contact with the development team, being able to determine a sensible performance budget will be almost impossible.

This may sound like I'm trying to put you off, and that's because I am. Performance budgets are very useful in specific situations, but if you are not in one of those situations, then don't worry about using them.

How to set a performance budget in Sitebulb

There's two elements to this;

  1. How to determine what the budgets should be in the first place.
  2. How to physically set up Sitebulb to record the budgets you want.

I can help you with #2, but not really with #1. This is where you need to sit down with the development team, get their feedback and agree with them what the budgets should be. You will likely need to come up with an initial set of budgets, then review and iterate over time as you better understand what elements of the site you can and can't change.

Here's some resources that may help with this endeavour:

Onto #2:

Setting performance budgets in Sitebulb

First things first, you need to set up a performance audit, which can only be done with the Chrome Crawler - so start a new project and make sure to select the Chrome Crawler.

Chrome Crawler

Then, mark the checkbox to switch on Performance:

Turn on Performance

The advanced settings box will automatically open up. Scroll down past the main performance options, and you will see the Performance Budgets section:

Performance Budgets setup

This is where you can now define the budgets you determined in step #1. Simply over-write the default values (in Kb) and this is what Sitebulb will check against.

Once you have set up your limits, go ahead and run the audit.

Accessing performance budget data

Once the audit has completed running, navigate to the Performance report using the left hand menu, then select the Performance Budget tab.

Performance Budget tab

This will show you a bar chart of the results, which represent the number of URLs passed (green) and failed (red) for each of the different resource types:

Performance Budgets Chart

To explore the individual URLs that failed, click any of the red segments on the chart, which will take you through to a URL List. For example, clicking the red segment for 'Image' in the chart above takes me through to a filtered list of URLs, all of which contain images which exceed the budget I set (1000Kb):  

Images too big

Underneath the bar chart you will find a table which works in exactly the same way - simply click on the linked values under the 'Passed' or 'Failed' column headings to jump into a filtered URL List.

Performance Budgets table

Further investigation

One thing it is important to note - and perhaps not immediately obvious - is that the performance budgets are set (and judged) at a URL level. So if a URL fails for a particular resource type, say fonts, then this means that the total weight of all the fonts loaded on the page exceed the maximum size (120Kb in my example above).

As per the method described above, you can click through the linked '88' value in the table to see the list of URLs that failed, and then to explore further, click the Performance Data button.

Explore performance data further

This will open up the URL Details view, which will instantly show you all the performance budget data for this specific URL:

Single URL Performance Budget

As you can see from the highlighted rows, there are 4 font files which total 151Kb, which exceeds the 120Kb limit - therefore this URL fails the fonts budget. It also fails the Third Party budget, a couple of rows down. But in actual fact when you look at the bottom row I have also highlighted, you can see that it is way under the total page budget.

This is where you can use your discretion, and choose to ignore the fact that the fonts are slightly over budget, since the page is much leaner in other areas.

If you do decide you want to do something about the fonts, you will need to dig further down into the data for this URL. Start by clicking the Resource URLs tab on the left:

Resource URLs tab

Then you'll end up on a view listing all the page resource URLs that get loaded in for this specific page. To filter this down further to only the resources you are interested in, add an advanced filter like this:

Apply advanced filter

This then brings you to the 'problem' resource files, which are causing the page to go over budget.