Performance budget defined for JS bundle size, CSS, images, LCP, FID, and CLS

Without a performance budget enforced in CI, bundle size, LCP, and CLS regressions go undetected until users report slowness (ISO-25010 capacity). A JavaScript bundle that grew from 150 KB to 500 KB over six months — one dependency upgrade at a time — produces no build error and no alert. Performance budgets create an automated gate: the build fails when the bundle exceeds the limit, turning performance regression into a first-class CI failure alongside type errors and test failures. Without this gate, performance optimization is reactive rather than preventive.

Define and enforce performance budgets in your build pipeline using size-limit:

// package.json
{
  "scripts": {
    "size": "size-limit"
  },
  "size-limit": [
    { "name": "main bundle", "path": ".next/static/chunks/main-*.js", "limit": "200 KB" },
    { "name": "styles",      "path": ".next/static/css/**.css",        "limit": "50 KB" }
  ]
}

Add to CI (.github/workflows/ci.yml):

- name: Check bundle sizes
  run: npm run size

For Core Web Vitals budgets, add Lighthouse CI:

- name: Lighthouse CI
  run: lhci autorun
  env:
    LHCI_GITHUB_APP_TOKEN: ${{ secrets.LHCI_GITHUB_APP_TOKEN }}

Set initial budget limits from your current measured baselines — then tighten by 10% each quarter. The goal is regression prevention, not aspirational targets that immediately fail every build.