Performance Budget Explained
Defining a Performance Budget
A performance budget is a set of limits that a website must stay within, such as a maximum page weight or a target for when the main content appears. Like a financial budget, it sets a fixed amount to spend and forces trade-offs when something new wants a share of it.
The purpose is to make speed a deliberate decision. Without limits, each new feature, script or image seems harmless on its own, yet many small additions can slowly make a site much heavier. A budget makes that cumulative cost visible.
Types of Performance Budgets
Budgets come in several forms:
- Resource budgets limit size or count, such as the total kilobytes of JavaScript or the number of requests to outside domains. They are easy to measure.
- Timing budgets set targets for when things happen, such as when the main content becomes visible or when the page responds to input. These reflect what visitors notice, and Core Web Vitals are a common reference point.
- Score budgets require a lab test score to stay above a chosen value, such as a Lighthouse performance score.
- Rule-based budgets set policies, such as requiring a review before any new third-party script is added.
Teams often combine these. A size limit is simple to check, while a timing limit shows the experience people actually have. Budgets work best when they are set from current measurements, so they are realistic, and then tightened as the site improves.
Setting and Enforcing a Budget
A budget works best when it is written down, measured the same way each time and checked before changes reach visitors. Many teams run automated checks during development, so a change that breaks a limit is caught while it is still easy to fix.
Limits should match the site's purpose and audience. A content-heavy article site and an online store with product galleries need different numbers. Competitor sites and the site's own history give useful reference points, and field data from real visitors shows whether the budget reflects the experience people actually have. For the difference between the two kinds of measurement, see field data vs lab data.
A Team Adds a Chat Widget
A marketing team wants a chat widget on a product page. For this example, assume the widget's script adds about 180 kilobytes of JavaScript. The site's budget allows 300 kilobytes of JavaScript on that template, and the existing scripts already use 200.
The budget shows that the widget does not fit as planned. The team can load the widget later, remove an older tag, or approve a deliberate, reviewed exception. The budget does not forbid the feature; it makes the cost visible before the decision is made.
Frequently asked questions
What is a good performance budget?
There is no universal number. A good budget reflects your audience, your competitors and your current measured performance, and the team can keep it. Start from what the site already does, then tighten the limit gradually. Limits set far away from reality tend to be ignored.
Who should own a performance budget?
Responsibility is shared. Developers usually enforce size and timing limits, while content, marketing and product teams should agree to them before adding new scripts, images or embeds. A budget with a named owner is more likely to be respected than one that exists only on paper.