Lighthouse CI

Lighthouse CI — это инструмент автоматизации аудита производительности, доступности, SEO и лучших практик веб-приложений с помощью библиотеки Lighthouse. Он позволяет интегрировать проверки в процессы CI/CD, обеспечивая регулярную оценку качества страниц.

Для начала необходимо установить CLI:

npm install -g @lhci/cli

Инициализация проекта создаёт конфигурационный файл .lighthouserc.json:

lhci wizard

Этот процесс автоматически задаёт базовые параметры для запуска аудиторов, включая URL тестируемого сайта, количество запусков и типы отчётов.

Конфигурация .lighthouserc.json

Файл конфигурации содержит ключевые блоки:

  • ci.collect — настройки сбора данных:

    • url или urls — список страниц для анализа.
    • numberOfRuns — количество повторных запусков для статистической достоверности.
    • settings — опции Lighthouse, включая emulatedFormFactor, throttlingMethod и другие.

  • ci.assert — правила прохождения тестов:

    • Позволяет задавать минимальные пороги для метрик (Performance, Accessibility, Best Practices, SEO, PWA).
    • Пример:
"assert": {
  "assertions": {
    "categories:performance": ["error", {"minScore": 0.9}],
    "categories:accessibility": ["warn", {"minScore": 0.95}]
  }
}

  • ci.upload — параметры публикации результатов:

    • target может быть temporary-public-storage для быстрого тестирования или интеграция с сервером Lighthouse CI.

Сбор данных

Команда для запуска аудита:

lhci collect

Основные настройки:

  • headless — запуск Chrome без интерфейса.
  • chromeFlags — дополнительные флаги Chrome, например --no-sandbox.
  • staticDistDir — анализ локальных сборок SPA.
  • startServerCommand — возможность запускать локальный сервер перед аудитом.

Пример запуска для локального приложения:

"collect": {
  "staticDistDir": "./build",
  "numberOfRuns": 3
}

Каждая страница анализируется несколько раз для получения усреднённых метрик. Это важно, поскольку показатели могут варьироваться в зависимости от загрузки сети и ресурсов.

Настройка правил assert

Модуль assert позволяет автоматизировать контроль качества:

  • categories:performance — минимальная оценка скорости.
  • categories:accessibility — минимальная оценка доступности.
  • metrics:largest-contentful-paint — контроль конкретной метрики загрузки.
  • metrics:cumulative-layout-shift — контроль стабильности контента.

Пример расширенной настройки:

"assert": {
  "assertions": {
    "categories:performance": ["error", {"minScore": 0.9}],
    "metrics:largest-contentful-paint": ["warn", {"maxNumericValue": 2500}],
    "metrics:cumulative-layout-shift": ["error", {"maxNumericValue": 0.1}]
  }
}

Ошибки и предупреждения отображаются в отчёте CI, что позволяет блокировать слияние PR при ухудшении показателей.

Публикация и интеграция

Модуль upload управляет отправкой результатов:

  • temporary-public-storage — быстрый способ получить публичный URL отчёта.
  • lhci-server — развёртывание собственного сервера для хранения истории тестов.
  • Поддержка GitHub Actions, GitLab CI и других систем.

Пример использования:

lhci upload --target=temporary-public-storage

После загрузки можно получить URL с интерактивным отчётом, включая графики производительности, таблицы Lighthouse-метрик и рекомендации по исправлению проблем.

Интеграция с CI/CD

Применение Lighthouse CI в автоматизации включает три этапа:

  1. Collect — сбор метрик с сайта или локальной сборки.
  2. Assert — проверка соответствия метрик заранее определённым порогам.
  3. Upload — публикация результатов и хранение истории.

Пример GitHub Actions workflow:

name: Lighthouse CI
on: [push, pull_request]
jobs:
  lhci:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: '20'
      - run: npm ci
      - run: npm run build
      - run: lhci autorun

Команда lhci autorun автоматически выполняет сбор, проверку и загрузку отчётов.

Советы по оптимизации

  • Параллельные запуски: увеличение numberOfRuns снижает влияние случайных колебаний метрик.
  • Настройка throttling: имитация слабого соединения выявляет реальные проблемы для пользователей.
  • Фокус на ключевых страницах: проверка всех страниц может быть ресурсоёмкой, лучше ограничиться критически важными.
  • Использование assert: позволяет превратить Lighthouse в инструмент контроля качества, интегрированный в CI/CD, а не только инструмент ручного анализа.

Расширенные возможности

  • Сбор статистики по времени: хранение истории метрик позволяет отслеживать деградацию производительности.
  • Сравнение сборок: анализ изменений метрик между ветками.
  • Локальный запуск Chrome с профилями: эмуляция конкретных устройств и браузеров для более точного тестирования.

Lighthouse CI позволяет превратить Lighthouse из инструментa ручного анализа в полноценный компонент автоматизированного тестирования веб-продукта, обеспечивая контроль качества на всех этапах разработки.

Оглавление