Atlas › 05 Performance & Chaos Engineering › Lighthouse CI: Enforcing Frontend Performance Budgets☰ Read as one page
Lighthouse CI: Enforcing Frontend Performance Budgets
7.1What Is a Performance Budget?A performance budget is a set of constraints on metrics that a page or API must meet. If the budget is exceeded, the CI pipeline fails…7.2Why Lighthouse CI?Lighthouse is Google's open-source auditing tool for web page quality. Lighthouse CI (LHCI) wraps Lighthouse in a CI-friendly package that…7.3Lighthouse CI ConfigurationThe core configuration lives in a lighthouserc.json file at the root of your project:7.4Understanding Core Web VitalsThe assertions in your Lighthouse CI config should be tied to Google's Core Web Vitals, which measure real-world user experience:7.5Setting Budgets for Different Page TypesNot all pages have the same performance requirements. Set per-page budgets based on business impact:7.6Bundle Size BudgetsLighthouse CI covers runtime performance. For build-time budgets, add bundle size checks:7.7Lighthouse CI Server: Tracking TrendsThe LHCI server provides historical tracking, allowing you to see performance trends over time and catch gradual degradation that…7.8Common Pitfalls1. Flaky results from CI environments. CI runners have variable performance. Use numberOfRuns: 3 (or 5) and assert on the median, not a…7.9Practical Advice for QA Architects- Start with three pages: homepage, one product/content page, and the most critical conversion page (checkout, signup). Expand coverage…