GitLab CI

Для начала необходимо установить Lighthouse как npm-пакет. Это делается командой:

npm install -g lighthouse

Или в локальном проекте:

npm install --save-dev lighthouse

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

Пример подключения в Node.js:

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

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

Основные возможности Lighthouse

Аудит производительности – измерение скорости загрузки, времени до интерактивности, оценки времени отклика. SEO-анализ – проверка корректности метатегов, заголовков, мобильной оптимизации. Accessibility – проверка доступности элементов для людей с ограниченными возможностями. Best Practices – выявление проблем безопасности, использования устаревших технологий, ошибок в JavaScript. Progressive Web App (PWA) – оценка соответствия приложения требованиям PWA.

Настройка конфигурации

Lighthouse поддерживает кастомные конфигурации через объект config. Пример:

const config = {
  extends: 'lighthouse:default',
  settings: {
    onlyCategories: ['performance', 'seo'],
    throttling: {
      rttMs: 100,
      throughputKbps: 10240,
      cpuSlowdownMultiplier: 2
    }
  }
};

Ключевые настройки:

  • onlyCategories – запуск проверок только по выбранным категориям.
  • throttling – эмуляция сетевых условий и производительности устройства.
  • emulatedFormFactor – выбор типа устройства: mobile или desktop.

Интеграция в GitLab CI

Для автоматического запуска Lighthouse в пайплайне GitLab CI необходимо добавить соответствующий job в .gitlab-ci.yml.

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

stages:
  - audit

lighthouse_audit:
  stage: audit
  image: node:20
  script:
    - npm ci
    - npm install -g lighthouse
    - lighthouse https://example.com --output=json --output-path=./lighthouse-report.json --quiet
  artifacts:
    paths:
      - lighthouse-report.json
    expire_in: 1 week

Особенности интеграции:

  • Использование Docker-образа с Node.js упрощает установку зависимостей.
  • Генерация отчётов в формате JSON позволяет автоматически анализировать результаты.
  • artifacts обеспечивает сохранение отчётов для последующего просмотра или публикации.

Автоматический анализ отчётов

После генерации отчёта можно автоматически проверять метрики, чтобы при падении показателей сборка CI завершалась с ошибкой.

Пример Node.js-скрипта для проверки Performance Score:

const fs = require('fs');

const report = JSON.parse(fs.readFileSync('./lighthouse-report.json', 'utf-8'));
const score = report.categories.performance.score * 100;

if (score < 90) {
  console.error(`Performance score too low: ${score}`);
  process.exit(1);
}

Преимущества автоматической проверки:

  • Отслеживание регрессий производительности.
  • Контроль SEO и доступности в рамках CI.
  • Возможность интеграции с уведомлениями (Slack, email).

Продвинутые возможности

  1. Параллельные проверки нескольких URL Использование асинхронного запуска для ускорения анализа сайта:
const urls = ['https://example.com', 'https://example.org'];

await Promise.all(urls.map(url => runLighthouse(url)));

  1. Настройка аудитов под конкретные сценарии Можно отключать отдельные аудиты или менять их пороговые значения через кастомные конфиги.

  2. Интеграция с отчётами CI/CD JSON-отчёты можно конвертировать в HTML для визуального отображения прямо в GitLab Pages.

Логирование и отладка

  • --quiet уменьшает количество логов в CI.
  • --chrome-flags="--no-sandbox" необходимо для запуска в Docker без прав администратора.
  • Отладка проблем с запуском в CI часто требует проверки доступности сети и корректной работы headless Chrome.

Заключение практического подхода

Lighthouse в сочетании с GitLab CI позволяет создавать полностью автоматизированный процесс проверки качества веб-приложений. Важнейшие элементы — генерация отчётов, автоматическая проверка метрик и интеграция в пайплайн, что обеспечивает стабильный контроль качества, предотвращает деградацию производительности и поддерживает соответствие современным стандартам веб-разработки.

Оглавление