ꦲꦏ꧀ꦱꦫ
Back to stories
<Frontend/>
Premium CodePerformanceFrontend

Frontend Performance (Part 1): Budgets and Monitoring

PublishedUpdated AKSR
Share by

Frontend Performance (Part 1): Budgets and Monitoring

Performance regressions are easy to introduce and hard to notice without budgets and monitoring. Setting limits (bundle size, load time, Core Web Vitals) and measuring them in CI and in production keeps the app fast and makes regressions visible. This post covers how to do it.

What to budget

  • Bundle size: Total JS/CSS size (or per-route chunks). Failing the build when a PR exceeds the budget prevents silent bloat.
  • Lighthouse / Core Web Vitals: LCP, FID/INP, CLS. Run in CI on a representative page; fail or warn when scores drop.
  • Custom metrics: e.g. "time to first list item," "time to interactive" for a critical flow. Define what matters for your product and budget that.

Start with bundle size and LCP; add more as you need them.