What is Performance Budget?

A performance budget defines limits for metrics like page weight, load time, or Lighthouse scores. It helps teams maintain performance by setting clear, measurable targets.

Types of performance budgets

Quantity-based

• Maximum page weight (e.g., 500KB)
• Maximum JavaScript size (e.g., 200KB)
• Maximum number of requests (e.g., 50)

Timing-based

• LCP under 2.5 seconds
• TTI under 3.8 seconds
• Speed Index under 3.4 seconds

Score-based

• Lighthouse Performance ≥90
• All Core Web Vitals "Good"

Setting a performance budget

1. Benchmark current performance
2. Research competitors
3. Define meaningful thresholds
4. Get team buy-in
5. Integrate into CI/CD

Enforcing budgets

In CI/CD

• Lighthouse CI
• Size-limit
• bundlewatch

Example configuration

{
  "budgets": [{
    "resourceType": "script",
    "budget": 200
  }]
}

Benefits of performance budgets

• Prevents performance regression
• Creates shared accountability
• Informs feature decisions
• Maintains user experience