What a budget actually is
A performance budget is a set of agreed limits that your site must never exceed. Instead of hoping pages stay fast, you write down numbers and fail the build when you cross them. Budgets turn a fuzzy goal into a measurable contract that everyone on the team can see.
- Quantity budgets cap totals like image bytes, script bytes, or request counts.
- Milestone budgets cap timings like first paint or interactive.
- Rule budgets cap scores from tools, such as a minimum audit score.
Why budgets work
A budget creates a forcing function. When a new feature would push the bundle over the limit, the team must remove something, split it, or load it later. This keeps growth honest because every addition has a visible cost.
- Pick a few key metrics rather than dozens so the signal stays clear.
- Base limits on a slow phone and a slow network, not your laptop.
- Wire the budget into continuous integration so regressions block merges.
A good starting point is keeping total JavaScript under a couple hundred kilobytes and the largest paint under two and a half seconds on a mid range device.
Key idea
A performance budget is a written, enforced limit on bytes and timings that makes speed a build time requirement rather than a hopeful goal.