SkillByAIOpen interactive version →

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, INP <200ms. Tools: bundlesize, performancebudget.io. Fail CI/CD if budgets are exceeded to prevent regressions.

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?

  • <1MB uncompressed
  • <250KB gzipped
  • >1MB is acceptable
  • <10MB per page
Answer

<250KB gzipped — A gzipped JavaScript budget near 250KB keeps parse and execution time manageable.