Интеграция в workflow

Для работы с Lighthouse в JavaScript используется пакет lighthouse, который можно установить через npm:

npm install -g lighthouse

Для локальной интеграции в проект:

npm install --save-dev lighthouse

После установки библиотека доступна как из командной строки, так и через Node.js API. Для автоматизации аудита в workflow предпочтительно использовать Node.js API, так как это позволяет гибко управлять конфигурацией, обработкой результатов и интеграцией с системами CI/CD.

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

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

Настройка параметров запуска

Lighthouse поддерживает множество опций, которые влияют на аудиты:

  • onlyCategories – позволяет запускать проверку только выбранных категорий (performance, accessibility, best-practices, seo, pwa).
  • output – формат отчёта: html, json, csv.
  • throttling – настройки сетевого и процессорного эмулятора для имитации различных условий.
  • emulatedFormFactor – определяет тип устройства для анализа: mobile или desktop.
  • maxWaitForFcp и maxWaitForLoad – ограничения по времени ожидания первой визуальной отрисовки и полной загрузки страницы.

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

const options = {
  onlyCategories: ['performance', 'seo'],
  output: 'json',
  emulatedFormFactor: 'mobile',
  throttling: {
    rttMs: 150,
    throughputKbps: 1638,
    cpuSlowdownMultiplier: 4,
  }
};

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

Lighthouse легко интегрируется в автоматизированные пайплайны. Для этого создаются скрипты, которые выполняются в процессе сборки:

  1. GitHub Actions:
name: Lighthouse Audit

on:
  push:
    branches: [main]

jobs:
  audit:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - name: Install Node.js
        uses: actions/setup-node@v3
        with:
          node-version: 20
      - run: npm ci
      - run: npx lighthouse https://example.com --output=json --output-path=./lighthouse-report.json
  1. GitLab CI/CD:
stages:
  - audit

lighthouse-audit:
  image: node:20
  stage: audit
  script:
    - npm ci
    - npx lighthouse https://example.com --output=json --output-path=./lighthouse-report.json
  artifacts:
    paths:
      - lighthouse-report.json

Использование CI/CD позволяет автоматически отслеживать регрессии в производительности, SEO и доступности.

Автоматическая генерация отчетов и уведомлений

Для интеграции в workflow важно не только запускать Lighthouse, но и обрабатывать результаты:

const fs = require('fs');

async function saveReport(url, options) {
  const report = await runLighthouse(url, options);
  fs.writeFileSync('lighthouse-report.json', JSON.stringify(report, null, 2));

  if (report.categories.performance.score < 0.9) {
    console.warn(`Производительность ниже 90%: ${report.categories.performance.score * 100}%`);
  }
}

saveReport('https://example.com', options);

Можно настроить отправку уведомлений в Slack, email или другие системы мониторинга, используя JSON-отчет Lighthouse как источник данных.

Пакетная проверка нескольких страниц

Для проектов с большим количеством страниц удобно запускать Lighthouse через цикл:

const urls = [
  'https://example.com',
  'https://example.com/about',
  'https://example.com/contact'
];

(async () => {
  for (const url of urls) {
    const report = await runLighthouse(url, options);
    fs.writeFileSync(`reports/${url.replace(/https?:\/\//, '').replace(/\//g, '_')}.json`, JSON.stringify(report, null, 2));
  }
})();

Это позволяет создавать централизованный набор отчетов для анализа всей веб-страницы или приложения.

Кастомизация и расширения

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

module.exports = {
  audits: [
    {
      audit: require('lighthouse-plugin-custom-audit/my-audit'),
      name: 'my-custom-audit'
    }
  ],
  categories: {
    customCategory: {
      title: 'Custom Category',
      description: 'Аудиты, разработанные специально для проекта',
      auditRefs: [
        {id: 'my-custom-audit', weight: 1}
      ]
    }
  }
};

Использование кастомных аудитов позволяет расширять возможности Lighthouse под специфические требования проекта и интегрировать их в workflow для непрерывной проверки.

Заключение по workflow-интеграции

Lighthouse, интегрированный в CI/CD, позволяет:

  • автоматизировать аудит производительности и SEO;
  • отслеживать регрессии и своевременно реагировать на снижение показателей;
  • формировать отчеты для аналитики и уведомлений;
  • адаптировать проверки под специфические требования проекта через кастомные аудиты и плагины.

Эта комбинация делает Lighthouse мощным инструментом для систематического контроля качества веб-приложений.

Оглавление