Сравнение отчетов

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

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

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

  • HTML – человекочитаемый формат с визуализацией, графиками и детальными рекомендациями. Подходит для презентаций и проверки изменений вручную.
  • JSON – машинно-читаемый формат, идеален для автоматизированного анализа и построения сравнительных дашбордов.
  • CSV – удобен для обработки в табличных редакторах и интеграции с BI-системами.

Для сравнения отчетов JSON является оптимальным, так как предоставляет доступ ко всем метрикам и деталям аудитов без потери информации.

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

Каждый JSON-отчет Lighthouse содержит следующие ключевые секции:

  1. categories – группы аудитов по направлениям (Performance, Accessibility, Best Practices, SEO, PWA). Каждая категория имеет score от 0 до 1.
  2. audits – отдельные проверки с подробными данными: title, description, score, numericValue, details.
  3. configSettings – параметры запуска Lighthouse (эмуляция устройства, таймауты, настройки сети).
  4. fetchTime – временная метка анализа.
  5. environment – сведения о среде выполнения: версия браузера, версия Lighthouse, операционная система.

Для корректного сравнения важно учитывать как метрики категорий (categories), так и отдельные аудиты (audits).

Методы сравнения

  1. Сравнение категорий Основной способ — вычисление разницы между score одинаковых категорий из разных отчетов:

    const diffScore = (reportA, reportB, category) => {
    return (reportB.categories[category].score - reportA.categories[category].score) * 100;
};

    Результат отображает динамику улучшения или ухудшения, например, увеличение производительности на 15%.

  2. Сравнение отдельных аудитов При необходимости детального анализа можно сопоставлять конкретные аудиты по их id:

    const diffAudits = (reportA, reportB, auditId) => {
    const auditA = reportA.audits[auditId];
    const auditB = reportB.audits[auditId];
    return {
        scoreDiff: (auditB.score - auditA.score) * 100,
        numericDiff: auditB.numericValue - auditA.numericValue
    };
};

    Это позволяет выявить, какие именно элементы страницы повлияли на изменения категорий.

  3. Визуальное сравнение Для презентаций удобно строить графики изменений по категориям и ключевым аудитам. Например, библиотека chart.js или d3.js позволяет создавать интерактивные линейные графики и гистограммы.

  4. Сравнение исторических данных При регулярной проверке страниц можно хранить JSON-отчеты в базе и строить сравнительные дашборды, рассчитывая динамику по дням или версиям сайта. Это полезно для DevOps и SEO-специалистов.

Автоматизация процесса

Сравнение отчетов можно полностью автоматизировать с использованием Node.js и Lighthouse как модуля:

import lighthouse from 'lighthouse';
import chromeLauncher from 'chrome-launcher';

async function runLighthouse(url) {
    const chrome = await chromeLauncher.launch({ chromeFlags: ['--headless'] });
    const options = { port: chrome.port, output: 'json' };
    const result = await lighthouse(url, options);
    await chrome.kill();
    return JSON.parse(result.report);
}

После получения нескольких отчетов можно использовать функции diffScore и diffAudits для генерации сравнительных данных.

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

  • Для точного сравнения следует использовать одинаковые конфигурации configSettings. Любые отличия, например, скорость сети или эмуляция устройства, могут искажать результаты.
  • При анализе производительности ориентироваться не только на общий score, но и на numericValue критических метрик (FCP, LCP, CLS, TBT).
  • Хранение отчетов в формате JSON облегчает интеграцию с CI/CD-процессами и мониторингом качества сайта.
  • Автоматическая генерация сравнительных графиков помогает быстро визуализировать улучшения после оптимизации.

Систематическое сравнение отчетов Lighthouse позволяет не просто фиксировать изменения, но и выявлять ключевые узкие места страницы, отслеживать эффективность оптимизаций и строить прозрачную историю улучшений сайта.

Оглавление