HTML отчеты

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

Генерация HTML отчета

Для создания HTML отчета через Lighthouse можно использовать Node.js API или командную строку. Основной метод через Node.js выглядит следующим образом:

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

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

  const runnerResult = await lighthouse(url, options);

  // Получение HTML отчета
  const reportHtml = runnerResult.report;
  fs.writeFileSync('lighthouse-report.html', reportHtml);

  await chrome.kill();
})();

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

  • Параметр output: 'html' определяет формат отчета. Lighthouse поддерживает также json и csv.
  • runnerResult.report содержит готовый HTML, который можно сразу открыть в браузере.
  • chromeFlags: ['--headless'] позволяет запускать Chrome в безголовом режиме, что удобно для CI/CD.

Структура HTML отчета

HTML отчет состоит из нескольких основных компонентов:

  1. Header Содержит название сайта, дату проведения аудита и краткую сводку по категориям: Performance, Accessibility, Best Practices, SEO, PWA.

  2. Категории аудита Каждая категория представлена в виде интерактивного блока с общим баллом и списком проверок:

    • Performance: метрики загрузки страницы, оценка скорости взаимодействия и визуального отображения.
    • Accessibility: ошибки и предупреждения по доступности, с указанием элементов DOM.
    • Best Practices: рекомендации по современным стандартам веб-разработки.
    • SEO: анализ метатегов, структуры HTML и индексации.
    • PWA: проверки прогрессивного веб-приложения, если применимо.

  3. Листы аудита Внутри каждой категории выводятся отдельные проверки с оценкой, описанием проблемы и ссылкой на документацию. Например, для Performance это могут быть:

    • First Contentful Paint (FCP)
    • Largest Contentful Paint (LCP)
    • Cumulative Layout Shift (CLS)
    • Time to Interactive (TTI)

  4. Подробные рекомендации Для каждого выявленного нарушения Lighthouse предоставляет конкретные шаги по исправлению. Эти рекомендации интегрированы в отчет и интерактивно подсвечивают соответствующие элементы DOM.

Настройка и кастомизация HTML отчета

Lighthouse позволяет настраивать содержание отчета и внешний вид с помощью конфигурации:

const config = {
  extends: 'lighthouse:default',
  settings: {
    onlyCategories: ['performance', 'seo'],
    maxWaitForLoad: 45000
  }
};
  • onlyCategories — выбор конкретных категорий для отчета.
  • maxWaitForLoad — максимальное время ожидания загрузки страницы.
  • Можно создавать полностью кастомные отчеты, добавляя собственные аудиторы и категории, что полезно для внутренних метрик компании.

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

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

npx lighthouse https://example.com --output html --output-path ./reports/lighthouse.html

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

Взаимодействие с JSON отчетами

HTML отчет часто генерируется совместно с JSON, чтобы сохранить данные для дальнейшей аналитики:

const options = {output: ['html', 'json']};
  • HTML предназначен для визуального анализа.
  • JSON подходит для автоматической обработки метрик и построения графиков в сторонних инструментах.

Практические рекомендации

  • Всегда проверять HTML отчет в актуальной версии браузера, чтобы корректно отображались интерактивные элементы.
  • Использовать комбинацию HTML и JSON для CI/CD процессов и ручного аудита.
  • Настраивать категории и аудиторы под конкретные цели проекта, чтобы отчет был максимально релевантным.

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

Оглавление