by Ryan Irelan
The main reason to create a performance budget is to have a tangible starting point for conversation around a web page or website. It shouldn’t act as gospel, but it’s a thing you can measure against. It’s your frame of reference. -Dan Mall
A performance budget is a plan.
It’s a guide against which to measure your work: your design and development decisions, and feature choices. The performance budget is meant to aid you during the web design and development process and then be a data point when you deploy the new site to a staging and production server against which to measure other performance testing and metrics.
A performance budget is not a hard line that you cannot cross.
You certainly should not ignore it completely (otherwise what’s the point of having one) but treating it as a best case scenario is a pragmatic approach.
A performance budget lets you make informed decisions.
Consider the performance budget when you are:
Current knowledge is that the term “performance budget” was first mentioned in an article by Tim Kadlec in the context of web design and development teams.
Tim covered this in the context of improving the performance of responsive websites after a trend of heavier page weight sites being designed. On a fast connection the extra weight was nary a problem, but on mobile, where bandwidth is often more limited, loading a full desktop site worth of assets for a more constrained mobile device view was an issue.
You can think of a performance budget the same way you think of a budget for your personal finances. You set a limit on what you want to spend in a given month and then assign values to categories accordingly, until that limit is met.
As the month progresses, you have to make choices along the way. Do you go out to that fancy steak dinner for $200 and deplete your Eating Out budget? Or do you skip it so you can get lunch out for the next couple weeks instead of bringing a ham sandwich to the office?
It’s okay to choose either option, but if you choose both, you’ll exceed your budget.
The same approach is used for performance budgets. Instead of setting a monetary amount we can’t exceed, we set some webpage metric. This could be one of the following:
The first two are fairly straight-forward to test and shouldn’t vary much across environments.
The last one, total render time, is a bit harder to test because it could vary depending on the environment (bandwidth being the wildest variable here) and the web browser used.
I like to use the total page weight and total number of HTTP requests because I can regularly and reliably test it.
The advantage of using number of HTTP requests and page weight is that they nicely adapt to a site that is out of active design and development and in the QA/Launch phases.
This is when you are ensuring the site performance meets your expectations based on the budget you set earlier in the project. No matter which environment we’re in, the number of HTTP requests and the page weight are still good measurements. This is the case even if those environments affect the total measurements (due to extra code for analytics, A/B testing, etc); we still want to hit—or come close to—our performance budget.
A performance budget helps us make informed choices both during the site development and over the course of its life.