Обработка результатов

Библиотека Lighthouse в JavaScript позволяет не только запускать аудит веб-страниц, но и гибко обрабатывать полученные результаты для интеграции в CI/CD процессы, генерации отчетов и аналитики. Основной объект, возвращаемый при запуске аудита, — это JSON-структура, содержащая все данные по метрикам, категориям и аудитам.

Основные свойства объекта результатов

  • categories – объект, где ключами являются идентификаторы категорий (performance, accessibility, best-practices, seo, pwa), а значениями – объекты с метрикой score и списком связанных аудитов.

  • audits – детальный список проверок, каждая из которых содержит следующие свойства:

    • id – уникальный идентификатор аудита.
    • title – читаемое название проверки.
    • description – описание, что проверяется и почему это важно.
    • score – оценка проверки в диапазоне 0–1.
    • numericValue – числовое значение метрики (если применимо).
    • details – объект с дополнительной информацией, часто используется для создания кастомных отчетов.

Примеры обработки JSON

Для извлечения основных метрик удобно использовать деструктуризацию и методы работы с объектами:

const { categories, audits } = results;

// Извлечение оценки производительности
const performanceScore = categories.performance.score * 100;

// Получение списка всех аудитов с оценкой ниже порога
const failingAudits = Object.values(audits)
    .filter(audit => audit.score !== null && audit.score < 0.9)
    .map(audit => ({
        id: audit.id,
        title: audit.title,
        score: audit.score
    }));

Генерация HTML и других форматов отчетов

Lighthouse поддерживает несколько форматов отчетов через модуль report-generator. Можно получать отчеты в HTML, JSON или CSV для интеграции в внешние системы. Пример генерации HTML-отчета:

import lighthouse from 'lighthouse';
import { writeFileSync } from 'fs';
import ReportGenerator from 'lighthouse/report/generator/report-generator';

const reportHtml = ReportGenerator.generateReport(results, 'html');
writeFileSync('lighthouse-report.html', reportHtml);

Для CI/CD важно сохранять отчеты в формате JSON, чтобы можно было автоматически проверять метрики:

import { writeFileSync } from 'fs';
writeFileSync('lighthouse-report.json', JSON.stringify(results, null, 2));

Работа с метриками и threshold

Автоматическая проверка соответствия метрик допустимым порогам позволяет строить «красные» и «зелёные» статусы для сборок:

const thresholds = {
    performance: 0.9,
    accessibility: 0.95,
    'best-practices': 0.9,
    seo: 0.9
};

const status = Object.entries(categories).every(([key, category]) => {
    return category.score >= thresholds[key];
});

console.log(status ? 'Сборка прошла проверки' : 'Сборка не прошла проверки');

Детализация и визуализация проблем

details у аудитов могут содержать таблицы, списки ресурсов и скриншоты. Это позволяет строить на основе результатов графики или интерактивные дашборды:

const opportunities = Object.values(audits)
    .filter(audit => audit.details && audit.details.type === 'opportunity');

opportunities.forEach(opportunity => {
    console.log(opportunity.title);
    opportunity.details.items.forEach(item => console.log(item.url || item.nodeLabel));
});

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

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

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

function compareScores(prevResults, newResults) {
    const prev = prevResults.categories.performance.score;
    const next = newResults.categories.performance.score;
    return ((next - prev) * 100).toFixed(2);
}

console.log(`Изменение производительности: ${compareScores(oldResults, newResults)}%`);

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

Выводы

Правильная обработка результатов Lighthouse включает:

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

Эти практики позволяют не только выявлять текущие проблемы сайта, но и создавать долгосрочные стратегии по повышению качества, доступности и производительности веб-продукта.

Оглавление