Why it matters
Pages get slower one 'small' addition at a time: a tag manager here, a web font there. A performance budget sets the limit up front, so every new script has to fit or replace something.
This calculator works backwards from a goal, such as 'interactive in 3 seconds on 4G', to the bytes you can afford, using a simple network model it explains line by line. The result is an estimate to plan with, not a measurement, and it exports as a Lighthouse budget file for your CI.
How it works
- InputA load-time target and a network
- In your browserRound trips taken off, the rest split by type
- OutputA budget per type and a Lighthouse file
Where it fits in a designer's workflow
- Plan
- Design
- Build
- Test
- Launch
By the numbers
Show the numbers as a table
| Network | Bytes in 3 s |
|---|---|
| Slow 3G | 10,000 |
| Slow 4G (Lighthouse mobile) | 399,360 |
| Fast 4G | 2,902,500 |
| Cable / fibre | 17,875,000 |
How to use it
- Set the load-time goal and the network.
- Adjust round trips and extra hosts to match your page.
- Enter what each resource type weighs now.
- Download budget.json for Lighthouse CI.
FAQ
How accurate is the estimate?
It's a planning model: bandwidth, latency and round trips, but no CPU time or caching. Real pages need measuring with Lighthouse or field data.
Why does JavaScript get a smaller share?
Bytes of JavaScript cost more than bytes of images, because they also have to be parsed and run, which is slow on mid-range phones.
What network should I plan for?
Your users' slower devices. A mid-range Android on 4G is a common baseline for UK sites.
How do I use budget.json?
Pass it to Lighthouse with --budget-path, or use it in Lighthouse CI to fail a build that goes over.
