Performance Budget Calculator

A performance budget is a set of limits on metrics that affect website performance, such as page weight, load time, or Core Web Vitals scores. It helps teams make deliberate decisions about what to include on a page and ensures performance stays within acceptable thresholds.

This calculator helps you:

• Set data-driven budgets — Based on your target connection speed and Core Web Vitals goals
• Estimate page weight limits — How many KB of HTML, CSS, JS, images, and fonts you can afford
• Assess your targets — See how your chosen thresholds compare against Google's recommended thresholds
• Export as JSON — Use the generated JSON with tools like Lighthouse CI or bundler plugins

1. Select connection type — Choose the target network speed (e.g., 4G for mobile users) or set a custom speed.
2. Set Core Web Vitals targets — Adjust LCP, FID, CLS, TTI, and TBT targets based on your project requirements.
3. Calculate — Click Calculate Budget to see the recommended page weight budget by resource type.
4. Review assessment — Check how your targets grade against Google's recommended thresholds.
5. Export — Copy the generated JSON to use with Lighthouse CI, webpack performance hints, or custom tooling.