What is a performance budget?

A performance budget is a set of constraints on performance metrics that a team commits to maintaining. Types of budgets: Timing budgets: LCP < 2.5s, INP < 200ms, CLS < 0.1. Quantity budgets: total JS < 200KB (compressed), total CSS < 50KB, total page weight < 1MB. Rule-based budgets: no images > 100KB, Lighthouse score > 90. Why budgets matter: without explicit limits, performance degrades gradually — feature additions, third-party scripts, and dependencies accumulate. A budget creates accountability. Enforcing budgets: Lighthouse CI: block PRs that exceed budget. Configure in lighthouserc.json. Bundlesize: fail CI if bundle size grows beyond threshold. webpack performance hints: warn/error in build if bundle exceeds size. Monitoring: alert when real-user data (CrUX) degrades below threshold. Setting a budget: start with current performance as a baseline, set targets at the "good" threshold for Core Web Vitals. Add new features within the budget by removing technical debt or optimizing existing code.