Although the word “budget” is typically associated with the worlds of personal or business finance, it is also used frequently when we start talking about website performance optimization. This kind of a budget—a “performance budget”—is not concerned with with dollars and cents, but about kilobytes and milliseconds and other performance metrics. So what is a performance budget? And how can it benefit us in the development of our websites? Let’s take a look…

What is a Performance Budget?

In your standard financial budget, you start with the amount you have to work with (typically your income for that time period), and then you decide how to allocate that money into your different types of expenses. The goal is to make sure that the total of all these different expenses together will be equal or less than your income. Depending on how much you have to work with, doing this could make for some difficult decisions. Since you may not be able to do everything you’d like, you have to decide what you will spend money on, and what you’ll put on hold.

A similar thing happens in a performance budget for a web project. When setting up a performance budget, you decide on a quantifiable performance target, and then you have to design and build the site in a way that stays within that target. These targets could be a number of different things, including load times, or page weights, or a Speed Index score, or other performance metrics. Tim Kadlec does a good job of explaining the various kinds of metrics that can be used in setting up the budget.

How it Helps

By having these targets in place, it not only gives you something to shoot for as you’re building the site, but also forces discussions about what the trade-offs would be for choosing a certain design or feature as opposed to another.

For instance, you may have a target of a total page weight under 1MB, but your really want to use a couple large image in the design. By having a target in place, choosing to use these images may also force you to consider dropping other elements from the page in order to come in under the target. Perhaps it’s dropping an extra web font, or stripping out some less important JS libraries. Or, perhaps you really want to have a certain group of fonts on your site, but to do so, you may need to drop the number of images or certain elements on each page.

In the end, the decision of what to keep, and what to drop, is still yours. What a performance budget does is provide constraints, which can be very helpful. These constrains can promote discussions over whether using these fonts or these design elements or these images or these JS libraries are really worth the cost.

For this to work though, it’s best to set a performance budget early, and check it regularly. As the project continues, these kinds of decisions will continue to come up. For instance, if you want to add a new feature, but it would push you over your budget, you now have a decision to make. Will you drop something else to make room for the new feature, will you ditch the new feature altogether, or will adjust it so that it still works within the given constraints?

The Goal

Ultimately the goal is to create a website that gives its users the best experience possible. And this includes both the design of the site as well as its performance. Having a lightning fast site, but one that is terribly designed, is not ideal; the same is true of a beautiful site that takes forever to load. By setting a performance budget, you set a baseline for performance, but also allow space for design decisions, with the goal of creating a well-designed site whose performance at least matches a pre-determined level.

Just like having financial budget can cause you to make tough decisions about expenses, having a performance budget can force you to do the same when building a website. In the end, though, using one can help you get what both you and your visitors want—a well-designed site that still performs well.

Further Reading