Performance Budget Setter

Performance Budget Setter

Set and enforce performance budgets to maintain fast user experiences.

Performance Budget Template

# Performance Budget: E-Commerce Website

## Bundle Size Budget

| Asset Type             | Budget     | Current    | Status |
| ---------------------- | ---------- | ---------- | ------ |
| Initial JS             | 200 KB     | 185 KB     | ✅     |
| Initial CSS            | 50 KB      | 48 KB      | ✅     |
| Vendor JS              | 150 KB     | 145 KB     | ✅     |
| Fonts                  | 100 KB     | 95 KB      | ✅     |
| Images (above fold)    | 300 KB     | 320 KB     | ❌     |
| **Total Initial Load** | **800 KB** | **793 KB** | ✅     |

## API Latency Budget

| Endpoint       | p50    | p95    | p99     |
| -------------- | ------ | ------ | ------- |
| GET /products  | 4.0s  | 300ms | 0.25  | 2.5s for >5% of users
- API p95 >500ms
- Any metric exceeds budget

Optimization Strategies

Reduce Bundle Size

// Code splitting
const ProductPage = lazy(() => import("./ProductPage"));

// Tree shaking
import { specific } from "library"; // ✅
import * as library from "library"; // ❌

// Dynamic imports
if (featureFlag) {
  const module = await import("./feature");
}

Optimize API Calls

// Parallel requests
const [user, orders] = await Promise.all([fetchUser(id), fetchOrders(id)]);

// Caching
const cachedData = await redis.get(key);
if (cachedData) return cachedData;

// Pagination
const products = await db.products
  .find()
  .limit(20)
  .skip((page - 1) * 20);

Optimize Database Queries

-- Add indexes
CREATE INDEX idx_orders_user_created ON orders(user_id, created_at);

-- Limit columns
SELECT id, name FROM products; -- ✅
SELECT * FROM products;        -- ❌

-- Use EXPLAIN
EXPLAIN ANALYZE SELECT ...;

Budget Violation Response

When Budget Exceeded

1. Immediate:

• Block PR from merging
• Notify team in Slack
• Create ticket

1. Within 24 hours:

• Investigate cause
• Identify optimization opportunities
• Propose fix or budget increase

1. Decision:

• Fix code (preferred)
• Increase budget (requires justification)

Budget Increase Request Template

## Budget Increase Request

**Component:** Main JS bundle
**Current Budget:** 200 KB
**Requested Budget:** 250 KB
**Reason:** Added critical feature X

**Impact Analysis:**

- Load time increase: +0.5s
- User impact: Medium
- Revenue impact: Unknown

**Alternatives Considered:**

1. Code splitting: Reduces to 210 KB (preferred)
2. Remove feature Y: Reduces to 195 KB (rejected)
3. Lazy loading: Complex, 3 weeks effort

**Recommendation:** Implement code splitting

Best Practices

1. Set realistic budgets: Based on user data
2. Enforce in CI: Automated checks
3. Monitor continuously: RUM + synthetic
4. Review quarterly: Adjust as needed
5. Prioritize UX: User-centric metrics
6. Document exceptions: Why budget increased
7. Celebrate wins: When under budget

Output Checklist

• [ ] Bundle size budgets defined
• [ ] API latency targets set
• [ ] Database query budgets
• [ ] Core Web Vitals targets
• [ ] Page-specific budgets
• [ ] CI/CD enforcement configured
• [ ] Monitoring dashboard
• [ ] Alert thresholds set
• [ ] Violation response process
• [ ] Regular review schedule

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: patricio0312rev
• Source: patricio0312rev/skillset
• License: MIT

Install and usage instructions live in the source repository linked above.