How are the budget limits calculated?

It starts from a base set of recommendations for mobile on 4G — for example 170KB JavaScript, 50KB CSS, 200KB images, 500KB total page size, 50 HTTP requests, TTI 3500ms, FCP 1800ms, LCP 2500ms, and CLS 0.1. Size budgets are then multiplied by a network factor (3G 0.5×, 4G 1×, 5G 1.5×, WiFi 2×) and timing budgets by a device factor (mobile 1×, tablet 1.3×, desktop 1.5×), rounded to one decimal.

Why does WiFi give a larger budget than 3G?

The size budgets scale with bandwidth: a fast connection can deliver more bytes within the same perceived load time, so the allowance increases. On a slow 3G connection the size budgets are halved to keep the experience usable. Timing budgets (TTI, FCP, LCP), on the other hand, scale with the device tier rather than the network.

What do the three summary cards and the status colours mean?

Each metric you enter is classified by how much of its limit it uses. At or under 80% it is "within budget" (green), above 80% but not over the limit it is "near limit" (yellow warning), and above the limit it is "over budget" (red). The three cards count how many metrics land in each band, and the progress bar and icon on each row mirror that classification.

Which metrics are included in the budget?

Ten in total: JavaScript, CSS, Images, and Fonts sizes (KB), Total Page Size (KB), HTTP Requests (count), and four Core Web Vitals / loading metrics — Time to Interactive, First Contentful Paint, Largest Contentful Paint (all in ms), and Cumulative Layout Shift (a unitless score where lower is better).

What is in the copyable report?

The report prints the budget name (device on network) and, when you have entered values, groups metrics under FAILING, WARNINGS, and PASSING headings — each line showing current vs. limit and the percentage used. With no values entered it instead lists every limit with its description, which is handy as a starting spec for a project.

Performance Budget Calculator

Calculate performance budgets and track metrics against CI/CD thresholds — updates as you type

About this ToolHow it works, benefits & use cases

This calculator turns industry best-practice thresholds into a concrete performance budget for your site, then checks your real numbers against it. Pick a network type (3G, 4G, 5G, or WiFi) and a device class (mobile, tablet, or desktop) and it generates ten budget lines — JavaScript, CSS, Images, Fonts, total page size, HTTP request count, and the Core Web Vitals TTI, FCP, LCP, and CLS. Faster networks raise the size budgets and more powerful devices loosen the timing budgets, so the limits adjust automatically. Enter your current values directly in the table and every row updates live: a progress bar fills, a status icon flips to pass / near-limit (over 80%) / over budget, and three summary cards tally how many metrics fall in each band. The copyable report groups failing, warning, and passing metrics for dropping into CI or a performance review, and the whole configuration lives in a shareable URL.

How to Use

1Choose a Network type — 3G, 4G, 5G, or WiFi — to scale the size budgets.
2Choose a Device type — mobile, tablet, or desktop — to scale the timing budgets.
3Type your measured numbers into the "Your value" column of the budget table; rows update as you type.
4Watch the summary cards and per-row progress bars classify each metric as within budget, near limit, or over.
5Click "Load example" to see a fully populated mobile-on-4G scenario.
6Copy, download, or share the generated budget report for CI or a code review.

Key Benefits

Generates ten budget lines covering bundle sizes, request count, and Core Web Vitals
Budgets auto-scale with network speed (size) and device power (timing)
Live pass / near-limit / over-budget status as you type each value
Per-metric progress bars and a three-band summary (passing, warnings, failing)
Copyable report groups failing, warning, and passing metrics with percentages
Shareable URL captures the network, device, and all entered values
Runs entirely in the browser with no account or upload

Common Use Cases

Setting a JavaScript and total-page-size budget before starting a build
Checking measured Lighthouse / WebPageTest numbers against recommended limits
Producing a budget report to paste into a CI step or pull request
Comparing the same site’s budget on mobile-3G versus desktop-WiFi
Giving a team a shared, link-able performance target for a release

Settings

Network type

Device type

Performance Budget: Mobile on 4G

Metric	Budget	Your value
JavaScript Total JavaScript bundle size (gzipped)	170KB
CSS Total CSS file size (gzipped)	50KB
Images Total image size for initial load	200KB
Fonts Web fonts (WOFF2 format recommended)	100KB
Total Page Size Combined size of all resources	500KB
HTTP Requests Number of HTTP requests	50count
Time to Interactive (TTI) Time until page is fully interactive	3500ms
First Contentful Paint (FCP) Time to first content render	1800ms
Largest Contentful Paint (LCP) Time to largest content render	2500ms
Cumulative Layout Shift (CLS) Visual stability metric (lower is better)	0.1count

Budget report

Copyable CI/CD-ready report

Performance Budget: Mobile on 4G
==================================================

Budget Limits:
  • JavaScript: 170KB
    Total JavaScript bundle size (gzipped)
  • CSS: 50KB
    Total CSS file size (gzipped)
  • Images: 200KB
    Total image size for initial load
  • Fonts: 100KB
    Web fonts (WOFF2 format recommended)
  • Total Page Size: 500KB
    Combined size of all resources
  • HTTP Requests: 50count
    Number of HTTP requests
  • Time to Interactive (TTI): 3500ms
    Time until page is fully interactive
  • First Contentful Paint (FCP): 1800ms
    Time to first content render
  • Largest Contentful Paint (LCP): 2500ms
    Time to largest content render
  • Cumulative Layout Shift (CLS): 0.1count
    Visual stability metric (lower is better)

Was this tool helpful?

Share Your Experience

Help others discover this tool!

Share on