What is a page weight budget?

A page weight budget is a set of size limits for each resource type on a page (HTML, CSS, JS, images, fonts). Staying within budget helps ensure fast load times and good Core Web Vitals scores.

What total size should I target?

Google recommends keeping pages under 1.6 MB for good performance. For excellent mobile performance on slow 3G connections, aim for under 500 KB. The "Fast" preset uses 500 KB; "Good" uses 1 MB; "Acceptable" uses 1.6 MB.

Should I use compressed or uncompressed sizes?

Enter transferred (compressed) sizes — the bytes the browser actually downloads over the network. These are typically shown in browser DevTools under the Network tab as "transferred" size.

Why are JavaScript budgets so strict?

JavaScript is the most expensive resource per byte: it must be downloaded, parsed, compiled, and executed. A 300 KB JS bundle costs far more in CPU time than a 300 KB image that only needs decoding.

How do I measure my current page weight?

Open Chrome DevTools, go to the Network tab, hard-refresh the page, and look at the total transferred size at the bottom. You can filter by resource type to get per-category sizes.

Page Weight Budget Calculator

Name: Page Weight Budget Calculator
Availability: InStock
Author: Nham Vu

Set size budgets for each resource type (HTML, CSS, JS, images, fonts) and instantly see whether your page fits within your performance target.

Budget Settings

Performance Preset

Total Page Budget (KB)

Resource Sizes (KB, transferred)

HTML KB

CSS KB

JavaScript KB

Images KB

Fonts KB

Other KB

Total Used

0 KB

Budget

1000 KB

Remaining

1000 KB

Budget Used 0%

Resource Breakdown

Enter sizes to see breakdown.

Summary

Set size budgets for each resource type (HTML, CSS, JS, images, fonts) and instantly see whether your page fits within your performance target.

How it works

Choose a performance preset or set a custom total page budget.
Enter the actual or estimated size for each resource type (HTML, CSS, JS, images, fonts, other).
The calculator computes used budget, remaining budget, and per-category status instantly.
Review the bar chart to spot which resource categories are over-budget.
Adjust sizes until everything fits within your chosen budget.

Use cases

Enforce Lighthouse performance budgets during development.
Audit a page before launch to ensure fast load times.
Communicate size limits to team members and designers.
Compare resource weights across multiple page versions.
Set budgets aligned with Core Web Vitals targets (LCP, FID).
Plan asset optimization priorities for CSS and JS bundles.

Frequently Asked Questions

Related tools

Image Budget Calculator Css Min Html Min

Last updated: 2026-05-23 · Reviewed by Nham Vu