Interactive Tool
Performance Budget Calculator
Set your Core Web Vitals targets and connection speed. The calculator will determine the maximum resource sizes your pages can afford to stay within budget.
Your targets
What is a performance budget?
A performance budget sets maximum limits on the resources your web pages can load. Instead of hoping your site is fast enough, a budget gives you hard constraints that prevent performance regressions over time.
Performance budgets work because they make trade-offs explicit. When your JavaScript budget is 150 KB and a new analytics library costs 35 KB, your team must decide whether to include it, find a lighter alternative, or remove 35 KB of existing code. Without a budget, resources accumulate unchecked until the site becomes noticeably slow.
How this calculator works
The calculator uses your Core Web Vitals targets and connection speed to determine how many bytes can be transferred within your performance window. The algorithm accounts for:
- TTFB allocation -- Your server response time consumes part of the LCP budget before any resources begin downloading.
- Connection throughput -- The selected network profile determines download speed and round-trip time, which directly limits how much data can arrive before the LCP deadline.
- Parse and compile time -- JavaScript requires additional CPU time beyond download. On mid-range mobile devices, each KB of JavaScript costs approximately 2-4ms of parse time (after decompression).
- Critical rendering path -- CSS and fonts are render-blocking by default. Their budgets are tighter because they must arrive before the browser can paint any content.
- INP headroom -- Your INP target constrains the total JavaScript that can be on the main thread during interactions, capping the JavaScript budget independently of LCP.
How to enforce your budget
A budget is only useful if you enforce it. Here are the most effective approaches:
- Lighthouse CI -- Add Lighthouse CI to your CI/CD pipeline with budget assertions. Builds that exceed the budget fail automatically.
- bundlewatch -- Tracks JavaScript and CSS bundle sizes across builds. Integrates with GitHub PRs to show size diffs.
- webpack-bundle-analyzer / rollup-plugin-visualizer -- Visual tools that show exactly what is in your bundles, making it easier to identify bloated dependencies.
- Performance monitoring -- Use real user monitoring (RUM) tools like SpeedCurve, Calibre, or web-vitals library to track field data against your budget targets.
Budget benchmarks by site type
These are typical compressed page weight budgets for sites that pass Core Web Vitals on 4G connections:
| Site Type | JS Budget | Total Budget | Typical LCP |
|---|---|---|---|
| Static blog / docs | 50 KB | 400 KB | 1.2s |
| Marketing site | 100 KB | 600 KB | 1.8s |
| E-commerce | 170 KB | 900 KB | 2.4s |
| SaaS dashboard | 250 KB | 800 KB | 2.8s |
Frequently asked questions
What is a performance budget?
A performance budget is a set of limits on resource sizes (JavaScript, CSS, images, fonts) that a web page should not exceed in order to meet its target loading speed. Performance budgets help teams make informed decisions about what to include on a page and prevent performance regressions over time.
How do you calculate a JavaScript budget from an LCP target?
The JavaScript budget is derived by subtracting the estimated server response time (TTFB) and render time from your LCP target, then calculating how much JavaScript can be downloaded and parsed within the remaining time window based on the target connection speed. On a 4G connection at roughly 1.6 MB/s throughput, each 100 KB of JavaScript adds about 60ms of download time plus 50-100ms of parse time on mobile devices.
What connection speed should I use for my performance budget?
Use the connection speed that represents your target audience's typical experience. Google uses a 4G connection (approximately 1.6 MB/s download, 150ms RTT) for Lighthouse mobile audits. For global audiences, slow 3G (400 KB/s, 400ms RTT) provides a more conservative and inclusive budget. For desktop-focused B2B applications, broadband (5 MB/s+) may be appropriate.
How often should I review my performance budget?
Review your performance budget quarterly or whenever you add significant new features. Integrate budget checks into your CI/CD pipeline using tools like Lighthouse CI, bundlewatch, or webpack-bundle-analyzer to catch regressions before they reach production. The budget should be treated as a living constraint that evolves with your application.
What happens if my site exceeds its performance budget?
Exceeding your performance budget means your site will likely miss its Core Web Vitals targets, which can impact search rankings, user experience, and conversion rates. When you hit budget limits, you need to either optimize existing resources (code splitting, compression, lazy loading) or remove lower-priority features to make room for new additions.