Performance Budgets: The Easiest Way to a Faster Site

Karolina Szczur

Karolina Szczur

September 28, 2022

Illustrated by

 Jeffrey Phillips

When it comes to site speed, many companies struggle to see the bigger picture. Instead of creating a personalised plan that intelligently reduces page speeds across their site, they focus on an individual, one-size-fits-all tactics that promise quick results. For instance, lazy loading is a tactic that speeds up page load times and is generally considered a best practice. However, if it’s indiscriminately applied to everything, including your Largest Contentful Paint element, it actually negatively impacts one of your most crucial page speed metrics.

To get real results, your team needs to take a step back and start to think holistically and company-wide about site speed. The best way to do that is with performance budgets. Performance budgets are measurable limits or goals you place on your pages in key page speed metrics. With the budget in place, you see which pages hit or miss their goals and how much. You then use that information to consider and prioritise appropriate tactics to get each page to hit your goal.

Setting personalised performance budgets lets your team speak clearly about what tactics are best suited for improving your page speed while also giving you targets to aim for. Performance budgets may not improve performance, but they help you get the most out of each page speed tactic in the constant struggle for better site performance.

What are the specific advantages of performance budgeting?

The greatest value of performance budgets is that they turn a nebulous aim like “improve page speed” into a concrete and achievable goal.

Improving page speed can be a company-wide goal, but until you set specific performance budgets, it’s not clear what specific metric you want to improve, how you’ll do it, and who’s in charge of getting it there.

Once you set that goal, you’re far more likely to hit it because the whole team can see how their actions move the needle. Saying the page doesn’t load fast enough doesn’t help; saying we need to hit a Time to First Byte of fewer than 300 milliseconds provides a target and spurs action. For instance, once that goal is set, you now can:

  • Audit your pages and focus on the ones below the target TTFB.
  • Experiment with specific tactics like cache settings to see how they get you closer to your goal.
  • Keep everyone accountable for their part in page speed.

The last point is especially crucial because improved page speed is often a trade-off. On many web pages, Google Analytics third-party scripts often slow down page speeds, but they also offer a lot of functionality to the marketing team. With a performance budget set, teams can better discuss how much these third-party scripts slow down page speed metrics and find solutions or alternatives that are a better fit for everyone.

Performance budgets are also helpful for maintaining site speed gains already won. If you’re managing a domain with hundreds of pages, you can’t be expected to manually monitor each one to ensure it continues hitting your budget. Instead, a performance budget monitoring tool like Calibre can do that for you, so if a page slips, you’ll know about it sooner rather than later.

Dashboard showing ranking of Pages tested with different conditions for Largest Contentful Paint
Check which pages meet or exceed your budget in Calibre’s Performance Budgets.

Which metrics should you track?

The best metrics to track with performance budgets are easily measurable and impact not just speed but also user experience. Some great metrics to start with include:

  • Largest Contentful Paint (LCP): How quickly users see your main content.
  • Cumulative Layout Shift (CLS): How visually stable your page is for users.
  • Total Blocking Time (TBT): How often and for how long does user input get blocked by long tasks.
  • First Input Delay (FID): How long it takes before users can interact with the page.
  • Time to First Byte (TTFB): How long users have to wait for the server to start downloading the page.
  • Number of Third-Party Providers: How many third-party providers are slowing down the loading process for the user.
  • Total JavaScript Size in Bytes: How much JavaScript a device needs to download, parse, compile, and execute to display your content; this is an excellent indicator of potentially poor experiences for users with slower devices.

Many teams also decide to track their Lighthouse Performance Score with performance budgets. This score combines several metrics (including some listed above) on a scale of 1–100. The Performance Score isn’t great for tracking page speed because it doesn’t give direct feedback and can be inaccurate.

How to set performance budgets in 4 steps

Setting your first performance budget is an intimidating prospect. Follow these four steps, and you’re ready to transform how you approach website performance.

1. Pick a metric and the pages it applies to

Ideally, you’ll want to set multiple performance budgets that track all of the metrics recommended above. However, some smaller teams may struggle to track and optimise across seven metrics. In this case, start with the Core Web Vitals (LCP, CLS, and TBT) because they improve the user experience, boost web performance, and are a direct ranking factor for Google.

Once you’ve chosen a metric, you’ll also want to consider which pages this budget will apply to. Ideally, your budget should apply to your entire website. However, if you are a small team, start by tracking your most important pages, like your homepage, landing pages, and most visited pages.

2. Consider the best baseline for that metric

The baseline you pick is either defensive or aspirational. A defensive baseline aims to keep pages above the bare minimum that your website has already achieved. Your goal here isn’t to make significant gains; it’s to stop yourself from unknowingly backsliding. Determine a defensive baseline by measuring several of your pages and picking an achievable average.

The second kind of baseline is aspirational and encourages you to progress toward a much faster website. In this case, most of your pages should not initially reach your performance budget, but more and more should get there over time. Pick an aspirational budget by researching your and your competitors’ current speeds and aiming a little higher. If, after a year, you find your goal hasn’t been reached, and that progress has slowed, consider revising downward to something more realistic.

Another way to set the baselines for your performance budgets is with a tool like Calibre. Calibre automatically suggests an appropriate budget metric based on your pages’ past performance. This way, you always set realistic goals based on actual site performance without needing detailed research.

Chart showing historical measurements for Total Blocking Time with a suggestion to select a fast goal of 300ms
When you create a budget, Calibre will suggest an appropriate value for each metric.

With this data at your fingertips, it’s easy to choose effective baselines that make sense for your website.

3. Track across multiple conditions

Website performance changes a lot based on the device and internet speed of the person trying to access your site. Your performance budgets should consider these variances as best as possible with tests that occur under many conditions.

Tracking multiple conditions like this isn’t easy without a dedicated tool like Calibre. With Calibre, you can set up multiple Test Profiles, so you can have one test that simulates a Motorola Moto G4 on a 3G connection and another on a Chrome Desktop with a cable connection.

Three options for Test Profiles setting including Chrome Desktop and Motorola Moto G4

With multiple Test Profiles, you can easily simulate how your target markets reach your website, no matter who they are or how they’re likely to do that.

4. Set up scheduling and responsibilities

The last and most crucial step is to confirm how often you’ll run the tests and what you’ll do with the data you get back. You should run tests at least daily to see how specific optimisations impact your performance metrics. More consistent testing makes it more likely you’ll spot performance issues earlier.

With a schedule set, you need to decide how you’ll act on your results. One of the best ways to make sure you get the most out of your budgets is to set up a Speed Team in charge of improving website performance. This team should meet regularly to review the most recent results, plan new optimisations, and gradually work toward a faster site experience.

Tracking your site’s performance over time isn’t easy

It requires a lot of time, concerted effort, and data to make your site as quick and responsive as possible. Anything you can do to take some of the work off your team and automate it is money and effort well spent. Calibre offers a full-fledged performance budget feature that makes it easy to create and monitor budgets for improved site speed.

With our 15-day free trial, you can start setting up your performance budget and see how easy it is to stay on top of your performance budgets. Plus, with other features like automated tests, budget alert notifications, and in-depth metrics, you’ll be able to set up your team for site speed victory.

Karolina Szczur

Karolina Szczur

Karolina is a Co-founder and Product Design Lead at Calibre. With years of design experience under her belt, she’s responsible for the comprehensive user experience spanning over product, visuals and content. Find her on Mastodon or LinkedIn.

Become a site speed expert

Join thousands of subscribers keeping up-to-date with web performance news and advice.

The best performance newsletter I’ve come across. Highly recommended.

Addy Osmani

Addy Osmani

Engineering Manager at Google Chrome