Форматы отчетов

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

JSON-формат

JSON является основным форматом для машинной обработки отчетов. Он содержит полную информацию об аудите, включая:

  • Метрики производительности (performance, firstContentfulPaint, speedIndex и другие).
  • Детализированные рекомендации (auditRefs с описанием ошибок и предупреждений).
  • Информацию о категории аудита (accessibility, best-practices, seo, pwa).

JSON-отчет удобен для автоматизации:

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

(async () => {
  const chrome = await chromeLauncher.launch({ chromeFlags: ['--headless'] });
  const options = { port: chrome.port, output: 'json' };
  const runnerResult = await lighthouse('https://example.com', options);
  
  console.log(runnerResult.report); // JSON-строка с полным отчетом
  await chrome.kill();
})();

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

HTML-формат

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

  • Визуализация ключевых показателей (Performance Score, Accessibility Score).
  • Раскрываемые панели для каждой аудиторской проверки.
  • Интерактивные графики и сравнительные диаграммы.

Пример генерации HTML-отчета:

const options = { port: chrome.port, output: 'html' };
const runnerResult = await lighthouse('https://example.com', options);
require('fs').writeFileSync('report.html', runnerResult.report);

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

CSV-формат

CSV используется для интеграции в табличные инструменты и системы аналитики. В этом формате отчет обычно содержит следующие колонки:

  • Название аудита (auditTitle).
  • Статус (pass, fail, notApplicable).
  • Баллы (score).
  • Дополнительные данные (numericValue, displayValue).

CSV-формат подходит для:

  • Сравнения нескольких запусков Lighthouse по времени или версии сайта.
  • Импорта данных в Excel, Google Sheets или BI-системы.
  • Построения отчетности для регулярного мониторинга ключевых метрик.

Пример экспорта в CSV:

const csv = require('json2csv').parse;
const fs = require('fs');

const runnerResult = await lighthouse('https://example.com', { output: 'json', port: chrome.port });
const audits = Object.values(JSON.parse(runnerResult.report).audits);
const csvData = csv(audits, { fields: ['id', 'title', 'score', 'displayValue'] });

fs.writeFileSync('report.csv', csvData);

PDF-формат

Нативной поддержки PDF в Lighthouse нет, но HTML-отчет можно конвертировать в PDF с помощью инструментов вроде Puppeteer. Этот подход полезен для формирования формальных отчетов для руководства или клиентов.

Пример конвертации HTML в PDF:

const puppeteer = require('puppeteer');
const fs = require('fs');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  const htmlContent = fs.readFileSync('report.html', 'utf8');
  
  await page.setContent(htmlContent, { waitUntil: 'networkidle0' });
  await page.pdf({ path: 'report.pdf', format: 'A4' });
  
  await browser.close();
})();

PDF-отчеты позволяют сохранить визуальное оформление HTML и передавать отчеты в статическом виде, без необходимости открывать браузер.

Настройка форматов в Lighthouse CLI

Lighthouse CLI поддерживает указание нескольких форматов сразу через флаг --output:

lighthouse https://example.com --output json --output html --output-path ./report
  • --output может принимать json, html или csv.
  • --output-path задает путь и имя файла отчета.

Комбинированный экспорт позволяет одновременно сохранять машинно-обрабатываемый JSON и визуально понятный HTML.

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

Выбор формата отчета напрямую влияет на возможности автоматизации:

  • JSON — для парсинга и построения графиков на CI/CD.
  • CSV — для интеграции с BI и Excel.
  • HTML/PDF — для отчетности и презентаций.

Использование нескольких форматов одновременно обеспечивает максимальную гибкость: аналитика в JSON, визуальный контроль в HTML, документирование в PDF.

Форматы отчетов в Lighthouse обеспечивают удобное хранение, передачу и обработку результатов аудита, делая инструмент универсальным для разработчиков, QA и менеджеров проектов.

Оглавление