Library › Book 5 › Lighthouse CI -- Enforcing Frontend Performance Budgets
Lighthouse CI -- Enforcing Frontend Performance Budgets
9.1🔒What 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…
9.2🔒Why 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…
9.3🔒Lighthouse CI ConfigurationThe core configuration lives in a lighthouserc.json file at the root of your project:
9.4🔒Understanding Core Web VitalsThe assertions in your Lighthouse CI config should be tied to Google's Core Web Vitals:
9.5🔒Per-Page Performance BudgetsNot all pages have the same performance requirements. Set per-page budgets based on business impact:
9.6🔒Bundle Size BudgetsLighthouse CI covers runtime performance. For build-time budgets, add bundle size checks:
9.7🔒Lighthouse CI Server: Tracking TrendsThe LHCI server provides historical tracking:
9.8🔒Common PitfallsCommon Mistake: Budgets too tight from day one. Start with achievable budgets and tighten them over time. A budget that fails on every PR…
9.9🔒Key Takeaways -- Chapter 91. Performance budgets treat performance like correctness -- CI fails when budgets are exceeded. 2. Lighthouse CI provides automated…
9.10🔒Exercises -- Chapter 9Exercise 9.1 (Beginner): Create a lighthouserc.json configuration for a blog site with three pages: homepage, article page, and about page…
9.11🔒Career Translation- Implemented Lighthouse CI with per-page performance budgets across 12 critical pages, catching 23 LCP regressions in PRs before they…
9.12🔒Q&AInterview Depth CheckPrompt: Your Lighthouse CI performance budget keeps failing on the checkout page after a new design was deployed. The design team says the…