Performance Budget Calculator
Set a target load time and connection speed, then allocate your page weight budget across asset categories.
About This Tool
The Performance Budget Calculator is a free browser-based tool that helps frontend developers and performance engineers plan and visualize how much weight each asset category can consume on a web page. A performance budget is a set of limits on page resources (HTML, CSS, JavaScript, images, fonts, and third-party scripts) that ensures your site loads within an acceptable time frame on a given connection speed.
You start by selecting a target connection speed (Slow 3G, 3G, 4G, Fast 4G, WiFi, or a custom value) and a target load time (e.g., 3 seconds). The tool calculates the total transfer size budget in KB based on the formula: speed (Mbps) x time (s) x 125. You then distribute that budget across HTML, CSS, JavaScript, Images, Fonts, and Other using sliders or number inputs. A real-time SVG pie chart visualizes the distribution, and a remaining-budget indicator warns you when you exceed the limit.
If you need a quick starting point, the built-in presets for Blog, E-commerce, SPA, Landing Page, and Dashboard provide sensible defaults tailored to each site type. Once you are happy with your allocation, export the budget as a JSON config file you can feed into CI tools like bundlesize or size-limit, or as a Markdown table for documentation.
All processing happens entirely in your browser. No data is transmitted to any server, so you can freely plan budgets that reference internal project details. If you are also interested in checking the compressed size of individual assets, try the Code Minifier. For understanding real user performance metrics, see the Bandwidth Calculator.
How to Use
- Choose a connection speed by clicking one of the preset buttons (Slow 3G, 3G, 4G, Fast 4G, WiFi) or enter a custom Mbps value.
- Adjust the target load time with the slider or type a value (e.g., 3 seconds).
- Review the Total Budget displayed in the summary bar — this is the maximum transfer size for your page.
- Allocate weight to each category (HTML, CSS, JavaScript, Images, Fonts, Other) using the sliders or number inputs.
- Watch the pie chart update in real time to visualize your budget distribution.
- If you go over budget, a red warning appears with the overage amount.
- Click a Preset button (Blog, E-commerce, SPA, Landing Page, Dashboard) to load recommended allocations.
- Export your budget as JSON or Markdown by clicking the Copy or Download buttons. Use Ctrl+Shift+C to quickly copy as JSON.
Performance Budget Examples
FAQ
Is my data safe when using this tool?
Yes. All calculations run entirely in your browser using JavaScript. No data is sent to any server. You can safely use this tool with internal project details.
How is the total budget calculated?
The total budget in KB equals the connection speed in Mbps multiplied by the target load time in seconds, multiplied by 125. This converts megabits per second into kilobytes transferred over the specified duration. For example, at 1.6 Mbps over 3 seconds: 1.6 x 3 x 125 = 600 KB.
What is a good performance budget for mobile users?
For a typical 3G connection (1.6 Mbps) with a 3-second load target, the total budget is about 600 KB. A reasonable split might be: HTML 30 KB, CSS 50 KB, JS 200 KB, Images 250 KB, Fonts 50 KB, Other 20 KB. Keep JavaScript especially lean for mobile — it requires parsing and execution time on top of download time.
What are the presets based on?
The presets reflect industry conventions for different site types. Blog favors light JS and moderate images. E-commerce allows larger images and more JS for product interactions. SPA allocates heavily to JavaScript. Landing Page keeps everything minimal. Dashboard prioritizes JS while keeping images small.
Can I use the exported JSON in my CI/CD pipeline?
Yes. The JSON export follows a straightforward structure you can integrate with tools like bundlesize, size-limit, or custom webpack plugins that enforce bundle size limits. You can add the exported file to your repository and reference it in your build process.
Does this account for compression (gzip/brotli)?
The budget values represent transfer sizes, which typically means compressed sizes. When allocating your budget, think in terms of what the browser actually downloads over the network (after gzip or brotli compression), not the uncompressed source size.
What does the estimated load time show?
The estimated load time is calculated by dividing your total allocated weight by the effective connection speed. If this exceeds your target load time, the value turns red to indicate you need to reduce asset sizes or adjust your target.
Related Tools
Gzip Size Calculator
Calculate gzip and deflate compressed size of text, code, or files instantly. See compression ratios and visual size comparisons.
Preload / Prefetch Generator
Generate HTML preload, prefetch, preconnect, and dns-prefetch link tags with best practice validation.
Code Minifier
Minify and beautify JavaScript, CSS, and HTML code with size comparison stats.
Network Bandwidth Calculator
Calculate file transfer times based on file size and bandwidth. Compare speeds across 4G, 5G, WiFi 6, Ethernet, and USB connections.
Web Vitals Reference
Interactive reference for Core Web Vitals (LCP, INP, CLS) and supplementary metrics (FCP, TTFB, TBT) with threshold checks and optimization tips.