GitHub Actions

Lighthouse — это инструмент для аудита производительности, доступности, SEO и прогрессивных веб-приложений. Он предоставляется как CLI, Node.js-библиотека и интеграция в Chrome DevTools. Для использования в проектах с автоматизацией через GitHub Actions чаще применяется Node.js API.

Установка производится через npm:

npm install -g lighthouse
npm install --save-dev lighthouse

Для работы через Node.js создается скрипт, который импортирует модуль Lighthouse:

const lighthouse = require('lighthouse');
const chromeLauncher = require('chrome-launcher');

async function runLighthouse(url, options, config) {
    const chrome = await chromeLauncher.launch({chromeFlags: ['--headless']});
    options.port = chrome.port;
    
    const results = await lighthouse(url, options, config);
    
    await chrome.kill();
    return results.lhr; // Lighthouse Result Object
}

Ключевые моменты:

  • Использование chrome-launcher позволяет запускать Chrome в безголовом режиме, что необходимо для CI/CD.
  • lhr содержит полную информацию по аудитам, включая категории: Performance, Accessibility, Best Practices, SEO, PWA.

Конфигурация аудита

Lighthouse поддерживает кастомные конфигурации. Файл конфигурации задает:

  • категории аудита (categories)
  • отдельные проверки (audits)
  • настройки сборки данных (settings)

Пример конфигурации:

const config = {
    extends: 'lighthouse:default',
    settings: {
        emulatedFormFactor: 'desktop',
        throttling: {
            rttMs: 40,
            throughputKbps: 10240,
            cpuSlowdownMultiplier: 1
        },
        maxWaitForFcp: 30000
    },
    audits: ['first-meaningful-paint', 'interactive']
};

Особенности:

  • emulatedFormFactor может быть mobile или desktop.
  • throttling влияет на метрики загрузки, критичные для Performance.
  • Можно исключать или добавлять аудиты для более точного анализа.

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

Для автоматизации анализа на каждом коммите или pull request используется GitHub Actions. Создается workflow-файл .github/workflows/lighthouse.yml:

name: Lighthouse CI

on:
  push:
    branches: [main]
  pull_request:

jobs:
  lighthouse:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      
      - name: Set up Node.js
        uses: actions/setup-node@v3
        with:
          node-version: 20

      - name: Install dependencies
        run: npm ci

      - name: Run Lighthouse audit
        run: node scripts/run-lighthouse.js

Ключевые моменты автоматизации:

  • Скрипт run-lighthouse.js использует Node.js API для запуска аудита.
  • Результаты можно сохранять в формате JSON или HTML для последующего анализа:
const fs = require('fs');
const results = await runLighthouse('https://example.com', {output: 'html'});
fs.writeFileSync('report.html', results.report);

Обработка результатов

Объект lhr предоставляет доступ к метрикам и деталям каждого аудита. Основные свойства:

  • categories.performance.score — числовая оценка производительности (0–1).
  • audits['first-contentful-paint'].displayValue — текстовое отображение времени FCP.
  • audits['largest-contentful-paint'].numericValue — числовое значение LCP в миллисекундах.

Можно использовать результаты для условного завершения CI-пайплайна:

if (results.categories.performance.score < 0.9) {
    console.error('Performance score below threshold!');
    process.exit(1);
}

Генерация отчетов в CI

Lighthouse поддерживает несколько форматов отчетов:

  • html — удобный визуальный отчет для открытия в браузере
  • json — машинно-читаемый для интеграции с другими инструментами
  • csv — таблица метрик для аналитики

Пример сохранения нескольких форматов:

const reportHtml = results.report[0];
const reportJson = JSON.stringify(results, null, 2);

fs.writeFileSync('lighthouse-report.html', reportHtml);
fs.writeFileSync('lighthouse-report.json', reportJson);

Оптимизация для CI

  • Использовать headless Chrome для минимизации потребления ресурсов.
  • Ограничить число одновременных запусков на CI-агентах.
  • Сохранять результаты и артефакты для отслеживания динамики производительности.
  • Настроить пороговые значения для автоматического уведомления о деградации.

Эти практики делают Lighthouse частью непрерывного контроля качества веб-приложения и позволяют интегрировать аудиты напрямую в GitHub Actions без ручного вмешательства.

Оглавление