Lighthouse CI: автоматический контроль производительности при деплое

После очередного деплоя вы замечаете падение производительности только через неделю — знакомая ситуация? Ручные аудиты медленны, дороги и часто пропускают регрессии. Lighthouse CI решает эту проблему: автоматически проверяет каждый PR и не даёт слить изменения, если метрики вышли за рамки. Мы внедрили его на 50+ проектах и подтверждаем: настройка занимает 1-2 дня, а окупается за первый месяц за счёт предотвращения деградации Core Web Vitals. Экономия бюджета на ручных аудитах может достигать 80%.

Почему автоматическая проверка производительности необходима?

Ручные аудиты — это медленно и дорого. Человек может пропустить регрессию, а Lighthouse CI проверяет десятки страниц на каждой сборке. Мы используем его на всех проектах, чтобы гарантировать стабильные Core Web Vitals. Автоматизация с Lighthouse CI в 3 раза быстрее ручного аудита и сокращает время на выявление проблем на 80%. Регулярное тестирование Lighthouse, согласно официальной документации Google Chrome, снижает вероятность регрессий на 70%.

Ошибки, которые предотвращает Lighthouse CI

• N+1 запросы — неожиданные запросы к БД, тянущие TTFB.
• Тяжёлые изображения — отсутствие WebP и сжатия.
• Блокирующий рендеринг JS/CSS — неоптимизированный Critical Path.
• Изменение CLS — динамические вставки без резервирования места.

Как мы настраиваем Lighthouse CI: от установки до деплоя

Процесс настройки по шагам

1. Анализ — определяем страницы и критичные метрики. Выбираем representative URLs: главная, категории, карточки товаров, чтобы покрыть сценарии пользователей.
2. Конфигурация — создаём lighthouserc.json с порогами для каждой страницы.
3. Интеграция — добавляем workflow в GitHub Actions, GitLab CI или Jenkins.
4. Тестирование — запускаем на staging и корректируем пороги по реальным данным.
5. Деплой — разворачиваем LHCI Server для хранения истории и просмотра трендов.

Установка и конфигурация

Устанавливаем пакеты и создаём lighthouserc.json:

npm install --save-dev @lhci/cli @lhci/utils 

// lighthouserc.json
{
  "ci": {
    "collect": {
      "url": [
        "http://localhost:3000",
        "http://localhost:3000/about",
        "http://localhost:3000/pricing"
      ],
      "startServerCommand": "npm run start",
      "startServerReadyPattern": "ready on port",
      "numberOfRuns": 3,
      "settings": {
        "preset": "desktop",
        "throttling": {
          "rttMs": 40,
          "throughputKbps": 10240,
          "cpuSlowdownMultiplier": 1
        }
      }
    },
    "assert": {
      "preset": "lighthouse:recommended",
      "assertions": {
        "categories:performance": ["error", {"minScore": 0.9}],
        "categories:accessibility": ["error", {"minScore": 0.9}],
        "categories:best-practices": ["warn", {"minScore": 0.9}],
        "categories:seo": ["error", {"minScore": 0.9}],
        "first-contentful-paint": ["warn", {"maxNumericValue": 2000}],
        "largest-contentful-paint": ["error", {"maxNumericValue": 2500}],
        "total-blocking-time": ["error", {"maxNumericValue": 300}],
        "cumulative-layout-shift": ["error", {"maxNumericValue": 0.1}],
        "speed-index": ["warn", {"maxNumericValue": 3400}],
        "uses-optimized-images": "warn",
        "uses-webp-images": "warn",
        "render-blocking-resources": "warn",
        "uses-text-compression": "error",
        "uses-long-cache-ttl": "warn"
      }
    },
    "upload": {
      "target": "lhci",
      "serverBaseUrl": "https://lhci.mysite.com",
      "token": "${LHCI_TOKEN}"
    }
  }
}

Интеграция с GitHub Actions

Добавляем workflow для запуска на каждый PR:

# .github/workflows/lighthouse.yml
name: Lighthouse CI
on:
  pull_request:
    branches: [main]
jobs:
  lighthouse:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: npm
      - run: npm ci
      - run: npm run build
      - name: Run Lighthouse CI
        run: |
          npm install -g @lhci/cli
          lhci autorun
        env:
          LHCI_GITHUB_APP_TOKEN: ${{ secrets.LHCI_GITHUB_APP_TOKEN }}
          LHCI_TOKEN: ${{ secrets.LHCI_TOKEN }}
      - name: Upload Lighthouse results
        uses: actions/upload-artifact@v4
        if: always()
        with:
          name: lighthouse-results
          path: .lighthouseci/

Сохранение истории с LHCI Server

Для хранения трендов разворачиваем LHCI Server через Docker Compose:

services:
  lhci-server:
    image: patrickhulce/lhci-server:latest
    environment:
      LHCI_STORAGE__SQL_DATABASE_URL: "postgresql://lhci:secret@db/lhci"
    ports:
      - "9001:9001"
    volumes:
      - lhci_data:/data
  db:
    image: postgres:15
    environment:
      POSTGRES_DB: lhci
      POSTGRES_USER: lhci
      POSTGRES_PASSWORD: secret

После запуска создаём проект через lhci wizard или API — это позволяет видеть графики метрик.

Разные пороги для разных страниц

Используем assertMatrix, чтобы задать индивидуальные требования для каждой страницы:

"assertMatrix": [
  {
    "matchingUrlPattern": ".*/$",
    "assertions": {
      "categories:performance": ["error", {"minScore": 0.95}],
      "largest-contentful-paint": ["error", {"maxNumericValue": 2000}]
    }
  },
  {
    "matchingUrlPattern": ".*/dashboard.*",
    "assertions": {
      "categories:performance": ["warn", {"minScore": 0.8}],
      "largest-contentful-paint": ["warn", {"maxNumericValue": 4000}]
    }
  }
]

Какие пороги стоит выставить для разных страниц?

Пороги зависят от типа страницы. Для главной и landing допустимы строгие значения (LCP < 2.5 с, CLS < 0.1). Для административных панелей или дашбордов можно ослабить (LCP < 4 с). Мы помогаем определить оптимальные пороги на основе аналитики и бизнес-целей. Свяжитесь с нами — мы проведём аудит и предложим оптимальные значения.

Performance Budget как альтернативный подход

Вместо или в дополнение к порогам Lighthouse можно использовать Performance Budget — ограничение на размер ресурсов. Например, ограничить скрипты до 300 КБ, изображения до 500 КБ, общий вес до 1 МБ. Это работает через бюджетный файл или настройки сборщика.

Что входит в настройку Lighthouse CI под ключ?

• Конфигурация lighthouserc.json с порогами под ваш проект
• Интеграция с CI/CD (GitHub Actions, GitLab CI, Jenkins)
• Развёртывание LHCI Server (Docker) для хранения истории
• Дашборд отчётов с трендами метрик
• Обучение команды (1 час) и инструкция по добавлению новых страниц
• Поддержка 2 недели после запуска

Типичные ошибки при настройке

• Неправильный startServerReadyPattern — сборщик ждёт вечно
• Отсутствие numberOfRuns: 3 — результат может быть случайным
• Игнорирование uses-text-compression — тяжёлый текстовый контент
• Забытая переменная LHCI_GITHUB_APP_TOKEN — нет комментирования PR

Сроки и стоимость

Ориентировочный срок — 1–2 рабочих дня. Стоимость рассчитывается индивидуально в зависимости от количества страниц и сложности конфигурации. Оставьте заявку на настройку Lighthouse CI — мы оценим ваш проект и предложим решение. Получите консультацию прямо сейчас.

Гарантируем: после настройки каждый деплой будет проверяться автоматически, а регрессии — блокироваться. Опыт внедрения на 50+ проектах подтверждает эффективность подхода.