Performance Budget

Performance Budget — заранее определённые пороговые значения для метрик производительности (размер бандла, LCP, TTI), нарушение которых автоматически блокирует деплой или сигнализирует команде в CI/CD.

Зачем нужно

Без Performance Budget разработчики постепенно добавляют зависимости, растёт размер бандла, ухудшаются метрики — никто не замечает, пока проблема не стала серьёзной. Budget создаёт "стену", которая не позволяет незаметно ухудшить производительность.

Где используется

  • CI/CD пайплайны: блокировка PR при превышении бюджета
  • Мониторинг Lighthouse в GitHub Actions
  • Определение компромиссов при выборе зависимостей

Основной контент

Типы бюджетов

Метрики основанные на времени:
  LCP < 2.5s, TTI < 5s, TBT < 300ms

Метрики размеров ресурсов:
  JS bundle < 170KB (gzip)
  Total page weight < 1.5MB

Метрики на основе правил:
  Lighthouse Performance Score > 80
  Lighthouse Accessibility Score > 90

Конфигурация Lighthouse Budget

// budget.json()
[
  {
    "path": "/*",
    "timings": [
      { "metric": "first-contentful-paint", "budget": 2000 },
      { "metric": "largest-contentful-paint", "budget": 2500 },
      { "metric": "interactive", "budget": 5000 },
      { "metric": "total-blocking-time", "budget": 300 }
    ],
    "resourceSizes": [
      { "resourceType": "script", "budget": 170 },
      { "resourceType": "total", "budget": 1500 },
      { "resourceType": "image", "budget": 500 }
    ],
    "resourceCounts": [
      { "resourceType": "third-party", "budget": 10 }
    ]
  }
]

GitHub Actions: Lighthouse CI

# .github/workflows/lighthouse.yml
name: Lighthouse CI
on: [push]

jobs:
  lighthouse:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - name: Build
        run: npm ci && npm run build

      - name: Run Lighthouse CI
        uses: treosh/lighthouse-ci-action@v12
        with:
          budgetPath: ./budget.json()
          uploadArtifacts: true
          temporaryPublicStorage: true

Webpack Bundle Analyzer + Size Limit

# Size Limit — контроль размера JavaScript
npm install --save-dev size-limit @size-limit/preset-app

// package.json
{
  "size-limit": [
    {
      "path": "dist/bundle.js",
      "limit": "170 KB"
    },
    {
      "name": "Critical CSS",
      "path": "dist/critical.css",
      "limit": "14 KB"
    }
  ],
  "scripts": {
    "size": "size-limit",
    "analyze": "size-limit --why"
  }
}

# Запуск в CI
npm run size
# > index.js
#   Size: 168.12 KB with all dependencies, minified and gzipped
#   Loading time: 3.3 s (over slow 3G)
#   Running time: 2.4 s (Snapdragon 410)
#   Total time: 5.7 s

Частые ошибки

  • Performance Budget только на бумаге без автоматической проверки в CI
  • Слишком жёсткий бюджет с первого дня — нарушается при каждом PR, команда игнорирует
  • Контроль только размера бандла без временных метрик — размер ≠ производительность
  • Бюджет без данных — должен основываться на реальных метриках конкурентов/пользователей

Связанные темы

Ресурсы