Should I use minified or gzipped sizes?

Use gzipped (or Brotli-compressed) transfer sizes, not raw minified sizes. Browsers download the compressed file over the network; that is what counts toward your performance budget. Gzip typically reduces minified JS by 60–70%.

What is a good total JS budget for a fast page?

Google recommends keeping total JavaScript under 300 KB (gzipped) for mobile devices. For optimal LCP on a 4G connection, aim for under 150 KB. Budget-sensitive pages like landing pages should target under 100 KB.

How do I find my framework's gzipped size?

Check bundlephobia.com for any npm package. React 18 + ReactDOM is about 45 KB gzipped. Vue 3 is about 22 KB. Preact is about 4 KB. Solid is about 7 KB. Svelte adds near-zero runtime.

Does this include CSS and images?

No — this calculator focuses on JavaScript transfer size only. CSS and images have separate budgets. JavaScript is the most expensive resource per byte because the browser must parse and execute it, not just decode it.

What counts as "third-party" scripts?

Any script loaded from an external domain or npm package not part of your framework: analytics (GA4, Segment), customer support widgets (Intercom, Crisp), A/B testing (Optimizely), maps (Google Maps), payment forms (Stripe.js), and so on.

Bundle Size Budget Calculator

Name: Bundle Size Budget Calculator
Availability: InStock
Author: Nham Vu

Enter your total transfer budget, framework overhead, and third-party scripts — get the remaining app code budget instantly with CWV benchmarks.

Total JS Transfer Budget

KB gzipped

Google recommends <300 KB for mobile. Target <150 KB for fast LCP.

Framework Baseline

KB gzipped

Third-Party Libraries

Quick add:

No third-party libraries added.

Budget Breakdown

Framework Third-party App code budget Over budget

Total Budget

—

KB gzipped

Fixed Costs

—

KB (framework + 3rd-party)

App Code Budget

—

KB remaining

Utilization

—

% of budget used by fixed costs

Core Web Vitals JS Benchmarks

Transfer sizes are gzipped. Your app code budget is compared against each threshold.

What fits in your app budget?

Calculate to see estimates.

Summary

Enter your total transfer budget, framework overhead, and third-party scripts — get the remaining app code budget instantly with CWV benchmarks.

How it works

Enter your total JavaScript transfer size budget in kilobytes.
Input your framework baseline size (e.g. React + ReactDOM ~45 KB gzipped).
Add sizes for each third-party library you load on the page.
The calculator subtracts all fixed costs from your total budget.
The remaining budget is what you have for application-specific code.
Compare your budget against Core Web Vitals transfer-size benchmarks.

Use cases

Setting performance budgets before starting a new project.
Auditing an existing app to see how much room is left for new features.
Comparing React vs. Preact vs. Solid framework cost tradeoffs.
Justifying removal of a heavy library to stakeholders.
Planning a performance sprint to hit a target Lighthouse score.
Evaluating third-party script impact before adding analytics or chat widgets.

Frequently Asked Questions

Last updated: 2026-07-01 · Reviewed by Nham Vu