Page Speed Budget Calculator

A performance budget sets a hard ceiling on how many bytes a page is allowed to use, split across resource types, so that it loads within a target time on a given connection. This calculator works backward from the load time and connection speed you choose to a total byte budget, then splits that budget across images, JavaScript, CSS, fonts and everything else using percentages you can adjust.

How the budget is calculated

The math is straightforward: your target load time, minus the time reserved for the server to respond and the connection to establish, leaves the time actually available for transferring bytes. Multiply that available time by the connection's throughput, converted from megabits to bytes per second, and you get a total byte budget. That total is then split across resource categories using the percentages you set, which default to a common starting allocation of roughly 40% images, 35% JavaScript, 10% CSS, 10% fonts and 5% HTML and other resources.

Why a byte budget beats a vague target

"Make the page faster" is not actionable on its own. A byte budget per resource type is: it tells a designer exactly how much room a hero image has, tells a developer exactly how much JavaScript a feature can ship with, and turns performance from an afterthought review into a constraint checked at build time, the same way a print designer works within a fixed page size.

Adjusting the defaults for your site

The default split favors image-heavy content sites. A JavaScript-heavy web app should shift more of the budget toward the JavaScript row and less toward images; a documentation or blog site with few scripts can push more of the budget into images and fonts. There is no universally correct split, only what fits the kind of page you are building, so treat the defaults as a starting point to edit, not a fixed rule.