Налаштування Performance Budget для веб-проекту

Настройка performance budget для сайту

Performance budget — набір обмежень на метрики продуктивності: розмір бандла, час завантаження, Core Web Vitals. CI/CD падає при перевищенні бюджету, запобігаючи деградації сайту від версії до версії.

Ключові метрики та ориєнтири

Lighthouse CI: бюджети по метриках

// .lighthouserc.json
{
  "ci": {
    "collect": {
      "url": [
        "http://localhost:3000",
        "http://localhost:3000/catalog",
        "http://localhost:3000/checkout"
      ],
      "numberOfRuns": 3,
      "settings": {
        "preset":    "desktop",
        "throttlingMethod": "simulate"
      }
    },
    "assert": {
      "assertions": {
        "categories:performance":   ["error", { "minScore": 0.85 }],
        "categories:accessibility": ["error", { "minScore": 0.90 }],
        "categories:seo":           ["warn",  { "minScore": 0.90 }],

        "largest-contentful-paint": ["error", { "maxNumericValue": 2500 }],
        "cumulative-layout-shift":  ["error", { "maxNumericValue": 0.1 }],
        "total-blocking-time":      ["warn",  { "maxNumericValue": 300 }],

        "uses-optimized-images":    ["warn"],
        "unused-javascript":        ["warn", { "maxNumericValue": 20000 }],
        "render-blocking-resources": ["warn"]
      }
    },
    "upload": {
      "target": "temporary-public-storage"
    }
  }
}

Bundlesize: бюджет на розмір JS/CSS

// bundlesize.config.json
{
  "files": [
    {
      "path": ".next/static/chunks/main-*.js",
      "maxSize": "60 kB"
    },
    {
      "path": ".next/static/chunks/pages/index-*.js",
      "maxSize": "50 kB"
    },
    {
      "path": ".next/static/chunks/pages/catalog-*.js",
      "maxSize": "80 kB"
    },
    {
      "path": ".next/static/css/*.css",
      "maxSize": "30 kB"
    }
  ]
}

npm install --save-dev bundlesize
# У package.json:
# "scripts": { "bundlesize": "bundlesize" }

Webpack Bundle Analyzer

// next.config.js
const withBundleAnalyzer = require('@next/bundle-analyzer')({
  enabled: process.env.ANALYZE === 'true',
});

module.exports = withBundleAnalyzer({
  // конфіг Next.js
});

ANALYZE=true npm run build
# Відкриває інтерактивний звіт у браузері

GitHub Actions: перевірка бюджету

# .github/workflows/performance-budget.yml
name: Performance Budget
on: [pull_request]

jobs:
  lighthouse-ci:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with: { node-version: '20' }
      - run: npm ci && npm run build
      - name: Start server
        run: npm start &
      - name: Wait for server
        run: npx wait-on http://localhost:3000

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

  bundlesize:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with: { node-version: '20' }
      - run: npm ci && npm run build
      - name: Check bundle size
        run: npm run bundlesize
        env:
          CI_REPO_OWNER: ${{ github.repository_owner }}
          CI_REPO_NAME:  ${{ github.event.repository.name }}
          CI_PULL_REQUEST: ${{ github.event.pull_request.number }}
          CI_COMMIT_SHA:   ${{ github.sha }}
          BUNDLESIZE_GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

Мониторинг в продакшені: SpeedCurve / DebugBear

Для безперервного мониторингу Core Web Vitals у реальному трафіку використовуйте RUM (Real User Monitoring):

// Збір Web Vitals з реального браузера
import { onLCP, onINP, onCLS, onFCP, onTTFB } from 'web-vitals';

function sendToAnalytics(metric: any) {
  fetch('/api/vitals', {
    method: 'POST',
    body: JSON.stringify({
      name:  metric.name,
      value: metric.value,
      id:    metric.id,
      page:  window.location.pathname,
    }),
    headers: { 'Content-Type': 'application/json' },
  });
}

onLCP(sendToAnalytics);
onINP(sendToAnalytics);
onCLS(sendToAnalytics);

-- P75 Core Web Vitals за останні 24 години
SELECT
  name,
  PERCENTILE_CONT(0.75) WITHIN GROUP (ORDER BY value) AS p75,
  COUNT(*) AS samples
FROM web_vitals
WHERE created_at >= now() - interval '24 hours'
GROUP BY name;

Терміни

Настройка performance budget в CI з Lighthouse CI та bundlesize, RUM-мониторинг: 2–3 робочих дні.