Performance Budget Enforce Workflow
Define and enforce performance budgets for page weight, load time, and runtime metrics to prevent performance regression.
Objective
Establish and enforce performance budgets to prevent regressions.
Environment
- A web application with performance monitoring
- Lighthouse or WebPageTest for measurement
- CI pipeline for enforcement
Steps
1. Define budgets
Set performance budgets for JavaScript size, image size, LCP, and CLS.
Expected state: Performance budgets are documented.
2. Measure baseline
Run Lighthouse to measure current performance and compare against budgets.
Expected state: Current metrics are recorded as the baseline.
3. Add CI check
Add a Lighthouse CI step that fails if any budget is exceeded.
Expected state: CI enforces the performance budgets on every push.
4. Fix violations
Address any current budget violations before enabling the CI gate.
Expected state: All current metrics are within budget.
5. Monitor trends
Set up monitoring to track performance trends over time.
Expected state: Performance trends are visible in dashboards.
Decision points
Hard fail or warn?
- Hard fail for critical metrics
- Warn for non-critical
Hard fail on LCP and CLS; warn on total bundle size to allow flexibility.
Expected outcome
Performance budgets are defined, enforced in CI, and monitored for trends.
Verification
Run Lighthouse in CI and confirm the build fails if a budget is exceeded; verify current metrics are within budget.
Cleanup
Temporarily relax budgets if a critical feature requires it; track the debt and tighten budgets later.
Budgets prevent death by a thousand cuts
Without budgets, each small addition seems harmless. Budgets force the team to make tradeoffs consciously.
Implementation Notes
This workflow provides a structured approach to ensure consistent results across team members and environments.
Common Pitfalls
Skipping verification steps or rushing through the process can lead to incomplete results. Always follow each step in order and verify before proceeding.
Quick Reference
# Execute the workflow steps as documented above
echo "Workflow completed successfully"