Performance budget — what it is and why care
Performance budget sets a hard limit on page weight. Without one, JavaScript bundles bloat by 5% every quarter.
A performance budget is a hard limit on page weight, third-party scripts and Web Vitals metrics. Set it once, enforce in CI.
Typical budgets for a content site:
- Initial HTML ≤ 50 KB
- Total JS ≤ 200 KB gzipped
- Total CSS ≤ 50 KB gzipped
- Above-fold images ≤ 300 KB
- LCP ≤ 2.5s
Tools that enforce: Lighthouse CI, bundlewatch (npm bundles), webpack-bundle-analyzer reports.
Without budgets every PR adds 5 KB. After a year that's 250 KB nobody noticed. With budgets a failed PR is a forcing function to remove dependencies.