01Аудит

Performance budget по типам страниц

Бюджеты JS/CSS/images для разных типов страниц, целевые Web Vitals, enforcement в CI с конкретными порогами.

Действуй как performance lead. Сайт: {{site_type}}. Типы страниц: {{page_types}}. Стек: {{framework}}. CI: {{ci}}.

Цель — performance budget, который НЕ метафора, а конкретные числа, проверяемые автоматически на каждом PR. Бюджет, который никто не нарушает по случайности.

Шаг 1 — Базовые принципы бюджета

По типу страницы, не по сайту. Home может быть тяжелее, dashboard — лёгкая, docs — критично быстрая.
Mobile-first: бюджет рассчитываем на 4G / Moto G4-class устройство.
3 уровня: target (ideal), threshold (PR fail), poison (red alert in production).
Привязка к бизнесу: каждый параметр объясняется через конверсию / engagement.

Шаг 2 — Метрики и пороги

Для каждого типа страницы:

Веб-витал

Метрика	Target	Threshold (PR fail)	Poison (alert)
LCP	≤ 2.0s	≤ 2.5s	> 4.0s
INP	≤ 100ms	≤ 200ms	> 500ms
CLS	≤ 0.05	≤ 0.10	> 0.25
TTFB	≤ 400ms	≤ 600ms	> 1500ms
FCP	≤ 1.2s	≤ 1.8s	> 3.0s

Ресурсы (per page type)

home / marketing:
  total transfer:  ≤ 800 KB (target) / ≤ 1.2 MB (threshold)
  JS:              ≤ 150 KB / ≤ 250 KB (compressed)
  CSS:             ≤ 50 KB / ≤ 80 KB
  images:          ≤ 400 KB / ≤ 600 KB (above-the-fold only)
  fonts:           ≤ 80 KB / ≤ 120 KB
  requests:        ≤ 40 / ≤ 60

dashboard / app:
  total:           ≤ 600 KB / ≤ 900 KB
  JS:              ≤ 200 KB / ≤ 350 KB
  CSS:             ≤ 60 KB / ≤ 100 KB
  images:          ≤ 200 KB / ≤ 300 KB
  fonts:           ≤ 60 KB / ≤ 100 KB

e-commerce listing:
  total:           ≤ 1 MB / ≤ 1.5 MB
  JS:              ≤ 180 KB / ≤ 280 KB
  images:          ≤ 600 KB / ≤ 1 MB (with lazy)

article / docs:
  total:           ≤ 400 KB / ≤ 600 KB
  JS:              ≤ 80 KB / ≤ 150 KB
  CSS:             ≤ 40 KB / ≤ 60 KB

checkout:
  total:           ≤ 500 KB / ≤ 800 KB
  JS:              ≤ 150 KB / ≤ 250 KB
  no third-party (only payment provider)

Шаг 3 — Enforcement в CI ({{ci}})

Lighthouse CI на каждый PR

name: lighthouse-ci
on: [pull_request]
jobs:
  lhci:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: '20'
      - run: npm ci
      - run: npm run build
      - run: npm install -g @lhci/cli@latest
      - run: lhci autorun
        env:
          LHCI_GITHUB_APP_TOKEN: ${{ secrets.LHCI_GITHUB_APP_TOKEN }}

lighthouserc.json

{
  "ci": {
    "collect": {
      "url": [
        "https://staging.example.com/",
        "https://staging.example.com/pricing",
        "https://staging.example.com/dashboard"
      ],
      "numberOfRuns": 3,
      "settings": { "preset": "desktop" }
    },
    "assert": {
      "assertions": {
        "categories:performance": ["error", { "minScore": 0.9 }],
        "first-contentful-paint": ["error", { "maxNumericValue": 1800 }],
        "largest-contentful-paint": ["error", { "maxNumericValue": 2500 }],
        "interactive": ["error", { "maxNumericValue": 3500 }],
        "cumulative-layout-shift": ["error", { "maxNumericValue": 0.1 }],
        "total-byte-weight": ["warn", { "maxNumericValue": 1200000 }],
        "resource-summary:script:size": ["error", { "maxNumericValue": 250000 }]
      }
    }
  }
}

Bundle size check (size-limit)

{
  "size-limit": [
    { "path": ".next/static/chunks/main-*.js", "limit": "120 KB" },
    { "path": ".next/static/chunks/pages/_app-*.js", "limit": "80 KB" },
    { "path": ".next/static/chunks/pages/dashboard-*.js", "limit": "200 KB" }
  ]
}