Lesson 21 / 25
Performance monitoring and budgets
Set performance budgets and establish continuous monitoring to maintain performance standards.
Setting performance budgets
Define limits: JavaScript <250KB gzipped, CSS <50KB, images <500KB, LCP <2.5s, FID <100ms. Tools: bundlesize, performancebudget.io. Fail CI/CD if budgets exceeded. Prevents performance regression during development.
Continuous performance monitoring
Use services: Vercel Analytics, Sentry, New Relic, Google Analytics 4 (Web Vitals). Track metrics over time. Set alerts for regressions. Monitor real user metrics across browsers, devices, regions. Correlate performance with conversion rates.
Budget enforcement strategies
Automate checks in CI/CD pipeline. Use performance budgets as guardrails, not hard limits. Educate team on tradeoffs. Track budgets over time. Adjust budgets based on business goals and competitive analysis.
Quick check
Quick check: What is a reasonable JavaScript budget?
- <250KB gzipped
- <1MB uncompressed
- >1MB is acceptable