Возврат результатов

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

Форматы результатов

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

  • JSON — структурированный формат, который идеально подходит для программной обработки и интеграции с другими инструментами. Основной объект содержит категории аудита (categories), подробные метрики (audits) и информацию о проведённом запуске (lhrVersion, fetchTime).

  • HTML — визуальный отчет, удобный для ручного анализа. HTML-отчёт можно сохранить на диск и открыть в браузере для просмотра всех рекомендаций.

  • CSV и другие кастомные форматы — могут быть получены путем преобразования JSON-результатов с помощью скриптов.

Пример вызова Lighthouse с указанием формата JSON через Node.js:

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

(async () => {
  const chrome = await chromeLauncher.launch({chromeFlags: ['--headless']});
  const options = {output: 'json', port: chrome.port};
  const runnerResult = await lighthouse('https://example.com', options);

  console.log(runnerResult.lhr); // JSON объект с результатами аудита
  await chrome.kill();
})();

Здесь runnerResult.lhr содержит Lighthouse Result, который является основной структурой данных для анализа.

Основная структура LHR (Lighthouse Result)

Объект lhr включает следующие ключевые разделы:

  1. categories — сводные оценки по направлениям аудита:

    • performance
    • accessibility
    • best-practices
    • seo
    • pwa (Progressive Web App)

    Каждая категория имеет оценку от 0 до 1, которую можно умножить на 100 для отображения в процентах.

  2. audits — детализированные проверки. Каждая проверка содержит:

    • id — идентификатор аудита
    • title — название проверки
    • description — описание, почему проверка важна
    • score — оценка выполнения
    • details — дополнительные данные, например список ресурсов, которые нужно оптимизировать

  3. configSettings — настройки, использованные при запуске, включая:

    • emulatedFormFactor — мобильная или десктопная эмуляция
    • throttlingMethod — метод ограничения скорости сети и CPU

  4. fetchTime — время проведения аудита.

  5. userAgent и environment — информация о среде запуска, включая версию Chrome и Lighthouse.

Сохранение и использование результатов

Результаты можно сохранить на диск и использовать для последующего анализа:

const fs = require('fs');

fs.writeFileSync('lighthouse-report.json', JSON.stringify(runnerResult.lhr, null, 2));

Для генерации HTML-отчета используется модуль lighthouse/report/html:

const reportGenerator = require('lighthouse/report/generator/report-generator');
const html = reportGenerator.generateReport(runnerResult.lhr, 'html');

fs.writeFileSync('report.html', html);

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

Программная обработка JSON-результатов

JSON-структура предоставляет возможность автоматической обработки:

  • Извлечение оценки производительности:
const performanceScore = runnerResult.lhr.categories.performance.score * 100;
console.log(`Performance: ${performanceScore}`);
  • Анализ конкретных аудитов:
const audits = runnerResult.lhr.audits;
for (const key in audits) {
  if (audits[key].score < 1) {
    console.log(`${audits[key].title}: ${audits[key].score}`);
  }
}
  • Фильтрация рекомендаций для улучшения SEO:
const seoAudits = Object.values(runnerResult.lhr.audits)
  .filter(audit => audit.id.startsWith('seo') && audit.score < 1);

seoAudits.forEach(audit => console.log(audit.title, audit.description));

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

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

  • Сравнение предыдущих и текущих результатов позволяет выявлять деградацию производительности.
  • Автоматическая генерация отчетов и отправка в Slack или электронную почту позволяет держать команду в курсе изменений.
  • Fail build по пороговым значениям для критически важных категорий помогает поддерживать высокий стандарт качества.

Пример проверки на минимальный порог:

const minScore = 0.9; // 90%
if (runnerResult.lhr.categories.performance.score < minScore) {
  throw new Error('Performance score below threshold');
}

Поддержка нескольких страниц и сценариев

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

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

for (const url of urls) {
  const runnerResult = await lighthouse(url, options);
  results.push(runnerResult.lhr);
}

Далее эти результаты можно агрегировать, строить графики и отчеты для всей веб-платформы.

Оглавление