Online Tool Store
Page Weight Budget Tracker
List a page's assets by type and size, set a total performance budget in kilobytes, and see a running total with a visual bar showing how much budget is left.
🔒 This tool runs entirely in your browser. Your files are never uploaded to a server.
| Asset | Type | Size (KB) |
|---|
How it works
- Set your total performance budget in kilobytes.
- Add each asset with its type and transferred size — pull real numbers from your browser's Network tab.
- The progress bar and summary update live, turning red once you cross your budget.
FAQ
What's a reasonable page weight budget?
It depends on your audience, but many teams target 1-1.5MB total for a typical content page and tighter budgets (under 500KB) for pages meant to load well on slow mobile connections. There's no universal number — set your own based on real user data.
Where do I get real asset sizes to enter here?
Open your browser's DevTools Network tab on the live page, sort by size, and copy each asset's transferred size (not the uncompressed size) into this tracker for an accurate running total.
Should fonts and images count the same as JavaScript?
They all count toward total page weight, but JavaScript is typically the most expensive per KB because it also has to be parsed and executed — many performance budgets set a stricter sub-budget just for JS.
Manual tracker vs. automated CI budget checks
| Feature | This tracker | CI bundle-size gate |
|---|---|---|
| Quick manual what-if tracking | ✓ | ✗ |
| Blocks a PR automatically on overage | ✗ | ✓ |
Use this to plan a budget during design; wire up an automated bundle-size check in CI to enforce it long term.