Performance Budget
Free online performance budget tracker, monitor resource sizes
What is a Performance Budget?
A performance budget sets limits on the size and timing of web resources (JavaScript bundles, images, fonts, CSS). Tracking these budgets helps prevent performance regression as a project grows. Common budgets include total page weight under 1MB and JavaScript under 200KB.
How to Track Resource Budgets
Add resources with their actual sizes and set budget limits. The tool tracks total size and flags any resources that exceed their budgets. Use this during development to catch performance issues early.
▶What is a good performance budget?
Common recommendations: Total page weight < 1MB, JavaScript < 200KB (compressed), CSS < 50KB, Images < 500KB, Time to Interactive < 5 seconds on 3G.
▶How do I measure actual resource sizes?
Use Chrome DevTools Network tab to see transfer sizes. For bundled applications, use webpack-bundle-analyzer or similar tools to inspect bundle composition.