Web Performance Budget: Metrics, Limits and CI/CD Integration

What is Performance Budget?

Performance budget is the maximum values defined for web page performance metrics. Page size, JavaScript bundle size, LCP time, etc.

Purpose: Prevent performance regressions. Prevent performance degradation when adding new features.

Budget exceedance: Build fail or warning. Performance check in CI/CD pipeline.

Example budgets: JS bundle < 200KB, CSS < 50KB, LCP < 2.5s, total page size < 1MB.

Performance Metrics

Bundle size: JavaScript and CSS file sizes. Analyze with webpack bundle analyzer.

LCP (Largest Contentful Paint): Loading time of largest content element. Target < 2.5s.

CLS (Cumulative Layout Shift): Shifts in page layout. Target < 0.1.

INP (Interaction to Next Paint): Response time to user interaction. Target < 200ms.

TTFB (Time to First Byte): Server response time. Target < 600ms.

Total page weight: Total size of page. Target < 1-2MB (for mobile).

Creating Budget

Measure current performance: Create baseline with Lighthouse, WebPageTest.

Set goals: Based on competitor analysis and user expectations. Stricter budget for mobile.

Budget file: Define metrics and limits with performance-budget.json.

Gradual tightening: Start with budget close to current performance. Tighten over time.

Team buy-in: Entire team should adopt performance budget. Performance is everyone's responsibility.

CI/CD Integration

Lighthouse CI: Lighthouse audit on every PR. Performance score threshold check. Build fail on budget exceed.

WebPageTest: WebPageTest integration into CI/CD pipeline. Filmstrip and waterfall comparison.

Bundle size check: Bundle size check with webpack-bundle-analyzer or bundlesize.

GitHub Actions: Automatic performance test with Lighthouse CI action. Result report as PR comment.

Threshold setting: Warning and error levels. Warning: 90% of budget. Error: 100% of budget.

Monitoring and Reporting

RUM (Real User Monitoring): Real user performance data. CrUX, Datadog, New Relic.

Synthetic monitoring: Periodic performance tests. WebPageTest, Pingdom, GTmetrix.

Dashboard: Visualize performance trends. Grafana, Datadog dashboard.

Alerting: Alert on budget exceed. Slack, email notification.

Reporting: Weekly/monthly performance report. Trend analysis and improvement recommendations.

Best Practices

Performance champion: Assign performance responsibility in team. Spread performance culture.

Budget review: Review budget at end of each sprint. Adjust budget for new features.

Trade-off: New feature vs performance. Every feature brings performance cost. Make conscious decision.

Documentation: Document performance budget and rationale. For team onboarding.

Continuous improvement: Gradually tighten performance budget. 10% improvement target.