Why Set a Performance Budget Before You Ship
First Contentful Paint (FCP) is the moment users first see something on screen, and it's one of the biggest drivers of perceived speed. Larger JS and CSS bundles take longer to download, parse, and execute, which pushes FCP later and increases the chance visitors bounce. A performance budget flips the process around: you pick a target FCP first, then work backward to figure out how much bundle size you can actually afford.
This calculator takes your target FCP, network speed, and device tier (low/mid/high-end) to estimate a total bundle budget that accounts for both download and parse/execution time. By default it splits that budget 70% to JS and 30% to CSS, since JS is far more expensive to parse and execute than CSS. Use it whenever you're about to add a new library or plan a code-splitting strategy — it's a quick way to see how much headroom you actually have left against your target.
Frequently Asked Questions
Bigger bundles take longer to download and parse, which slows down FCP. Setting a budget ahead of time helps prevent performance regressions.
JS costs much more to parse and execute than CSS, so allocating most of the budget to JS and less to CSS is a common practical rule of thumb.