OneTaskBy Tim King · Updated
Performance Budget Calculator
Page Weight Budget From a Load-Time Target, Including the 14KB Critical Path
OneTask is free, with no sign-up, and built by one person.
If this tool saved you time, a coffee helps keep new ones coming.
How the Performance Budget Calculator works
This performance budget calculator sets byte limits per resource. A performance budget turns "the page should feel fast" into a number the whole team can check against: this many kilobytes, and no more. This works backwards from a load-time target on a chosen connection. It subtracts the time that goes on round trips — connecting, waiting for the server, and the queueing that many requests cause — and converts what is left into bytes at the connection's speed. Then it splits that into a suggested budget per asset type.
Performance budget calculator: from time to bytes
Why round trips come first. On a phone, latency matters more than bandwidth. Before a single byte of the page arrives the browser has done a DNS lookup, a TCP handshake and a TLS handshake — three round trips, so 450 ms on slow 4G and over a second on slow 3G — and then waited for the server to think. Each further request costs at least one more round trip, and browsers only run about six at a time per host on HTTP/1.1, so thirty requests queue into five waves. HTTP/2 and 3 remove the six-connection limit but not the latency. The calculator takes all of this off the top before it counts bytes; with a slow enough connection and enough requests, nothing is left, and that is the real answer: cut requests before you shrink files.
The transfer budget is the remaining time multiplied by throughput. It is a budget for compressed bytes on the wire, which is what the network sees, not the uncompressed size in your build folder. The Gzip / Brotli comparison and the CSS and JavaScript size calculators on this site measure the compressed figure.
The split uses typical proportions from the HTTP Archive: images are usually the biggest slice at around 40 percent, then JavaScript at just under 30. They are a starting point, not a rule. A documentation site can give images almost nothing and JavaScript very little; a photo portfolio is nearly all images. The point of the split is to make the trade-off visible: every kilobyte of tracking script is a kilobyte not spent on the hero image.
JavaScript costs more than its bytes. Images decode quickly and off the main thread. Script has to be parsed, compiled and executed on the main thread, and on a mid-range phone that takes roughly as long again as downloading it. The JavaScript budget is the one to guard most closely, which is why the output calls out its uncompressed equivalent.
The critical path. TCP starts cautiously: the first round trip carries around 14 KB, the next 28, then 56, doubling as the connection proves itself. If the HTML and the CSS needed for the first paint fit in 14 KB compressed, the browser can render something after one round trip; if they need 40 KB, that is three. The critical-path figure shows how much can arrive within the target given this slow start, and the practical goal is to keep the HTML plus inlined critical CSS under the first window.
FAQ
What target should I pick?
Three seconds on slow 4G is a common choice because it roughly corresponds to a "good" Largest Contentful Paint at the 75th percentile. Two seconds is ambitious; five is where users start leaving. Pick the connection your analytics say your slowest quarter of visitors have, not the one on your desk.
Why is the budget zero?
The round trips alone exceeded the target. Thirty requests over slow 3G is 400 ms to connect three times, plus five waves of 400 ms — 3.2 seconds before bytes are counted. Reduce requests, fix the server time, or accept a longer target.
Is this the same as the Lighthouse throttling?
Lighthouse's "slow 4G" profile is 1.6 Mbps with 150 ms RTT, which is the default here. Its results will not match exactly because it simulates CPU throttling and resource priorities too, but the budget is in the right range.
Does HTTP/2 change the numbers?
It removes the six-at-a-time queue, so the request overhead drops, but each request still costs latency and the connection setup is the same (HTTP/3 saves one round trip). The calculator's request wave model is conservative for HTTP/2 sites.
How do I enforce a budget?
Lighthouse CI and bundler plugins can fail a build that exceeds a byte limit per asset type. Put
the numbers from here into a budget.json and let the CI say no.
See also: all Dev Utilities tools, Formatters & Validators, Data & Encoding, Security & Identifiers, SEO, Accessibility, AI.
Related tools
Page Weight Calculator
Add up page resources, see the breakdown and load time on each connection.
JavaScript Size Calculator
See what a script bundle costs to download and to parse on a phone.
CSS Size Calculator
Measure a stylesheet's real transfer size and see whether it blocks first paint.
Image Size Calculator
Estimate image file size and see how oversized it is for its slot.
Lighthouse Score Explainer
See exactly where your Lighthouse performance score comes from.