Set a performance budget before the build gets away from you
Set limits for page weight, request count, and load time, then check a build against them before it ships. The result is only as good as the budget you set, so treat it as a check, not a verdict.
Turning a performance target into a page weight and request budget
A performance budget calculator turns a vague goal like 'keep the site fast' into hard limits for page weight, request count and load time, worked out from your target metric and connection speed. This is for whoever sets that budget: a designer scoping a new build, or a developer trying to stop a site drifting slower release by release. Work through it once and you come out with numbers you can actually hand to a team, plus a sense of where the calculator's estimate and a real device will part company.
-
Set your target and connection
Pick the metric you're budgeting against, such as Largest Contentful Paint (LCP), and the connection speed you want the page to hit it on.
-
Read the weight and request limits
See how that target converts into a maximum page weight and request count, broken down across images, scripts, fonts and third-party code.
-
Turn the numbers into a working budget
Split the total budget across your asset types and check the result against a real build, since the calculator's output is a starting figure and not a fixed law.
Performance Budget Calculator
Work backwards from a target load time to a page-weight budget, then split that budget across JavaScript, images and CSS with fonts. Pick a network, set your target, and adjust the three allocation sliders.
What is a performance budget? It is a byte ceiling you set in advance for a page, worked out from how long it should take to load on a given network, so that design and engineering decisions have a concrete number to check against instead of a vague sense of "too slow".
Formula: Time = Latency + Size ÷ Bandwidth. Rearranged: Size = (Time − Latency) × Bandwidth.
We then reserve roughly 15% for HTTP and TCP protocol overhead, so the usable budget shown below is 0.85 × that raw size.
Results
Teaching note: a kilobyte of JavaScript costs more CPU time than a kilobyte of images, because it must be parsed, compiled and executed rather than just decoded. Keep JavaScript budgets tight even when the total budget looks generous.
Set a performance budget, then hold the build to it
The calculator lets you set a hard limit on page weight, request count, or load timing, then checks a build against it before launch. It suits anyone shipping to production, from a solo front-end developer to a team briefing a client on why a hero video needs to go. Numbers on their own don't stop scope creep; a budget agreed in advance does.
No account needed, works on any device, free to use
Popular Tools
CSS Variable Architect
An interactive CSS Variable Architect, free to run in the browser. The companion guide sets out the method behind it, so you can check the working.
Tools / CSS Variable Architect
True-Contrast Smart Palette
An interactive True-Contrast Smart Palette, free to run in the browser. The companion guide sets out the method behind it, so you can check the working.
Tools / True-Contrast Smart Palette
CSS Unit Converter (px / rem / em / vw / vh)
An interactive CSS Unit Converter (px / rem / em / vw / vh), free to run in the browser. The companion guide sets out the method behind it, so you can check the working.
Tools / CSS Unit Converter (px / rem / em / vw / vh)
Aspect Ratio Calculator
An interactive Aspect Ratio Calculator, free to run in the browser. The companion guide sets out the method behind it, so you can check the working.
Tools / Aspect Ratio CalculatorCSS Grid Architect
An interactive CSS Grid Architect, free to run in the browser. The companion guide sets out the method behind it, so you can check the working.
Tools / CSS Grid ArchitectCSS Specificity Calculator
An interactive CSS Specificity Calculator, free to run in the browser. The companion guide sets out the method behind it, so you can check the working.
Tools / CSS Specificity Calculator