Фильтрация результатов

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

Структура отчёта Lighthouse

Отчёт Lighthouse представлен в виде JSON-объекта с основной структурой:

{
  "categories": {
    "performance": { "score": 0.92, "auditRefs": [...] },
    "accessibility": { "score": 0.87, "auditRefs": [...] },
    "best-practices": { "score": 0.95, "auditRefs": [...] },
    "seo": { "score": 0.80, "auditRefs": [...] },
    "pwa": { "score": 0.70, "auditRefs": [...] }
  },
  "audits": {
    "first-contentful-paint": { "score": 0.9, "details": {...} },
    "unused-css-rules": { "score": 0.2, "details": {...} },
    ...
  }
}

Основные объекты для фильтрации:

  • categories — общая оценка каждой категории аудита.
  • audits — детализированные результаты для конкретных проверок.

Фильтрация позволяет извлекать нужные категории, отдельные аудиты или только элементы, не прошедшие проверку.

Фильтрация по категории

Для получения данных только по определённой категории используется доступ через ключи categories и auditRefs. Например, фильтрация по производительности:

const performanceAudits = Object.keys(report.audits)
  .filter(auditId => report.categories.performance.auditRefs.some(ref => ref.id === auditId))
  .map(auditId => report.audits[auditId]);

console.log(performanceAudits);

Объяснение:

  1. Object.keys(report.audits) — получение списка всех аудитов.
  2. filter(...) — выбор тех, которые относятся к категории performance.
  3. map(...) — извлечение полной информации по каждому аудиту.

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

Фильтрация по порогу оценки

В некоторых случаях важны только критические ошибки или слабые показатели. Для этого используется фильтр по значению score:

const lowScoreAudits = Object.entries(report.audits)
  .filter(([_, audit]) => audit.score !== null && audit.score < 0.5)
  .map(([id, audit]) => ({ id, ...audit }));

console.log(lowScoreAudits);

Пояснение:

  • Object.entries(report.audits) — превращает объект аудитов в массив [ключ, значение].
  • Проверка audit.score < 0.5 оставляет только слабые показатели.
  • map(([id, audit]) => ({ id, ...audit })) добавляет идентификатор аудита для удобства анализа.

Фильтрация по типу аудита

Audits имеют поле scoreDisplayMode, которое позволяет различать типы результатов:

  • "numeric" — числовая оценка от 0 до 1.
  • "binary" — пройдено/не пройдено.
  • "informative" — информационные аудиты.
  • "manual" — требуют ручной проверки.

Фильтрация по типу:

const numericAudits = Object.values(report.audits)
  .filter(audit => audit.scoreDisplayMode === 'numeric');

console.log(numericAudits);

Это особенно полезно, когда требуется агрегировать метрики для графиков или отчетов.

Комбинированная фильтрация

Для более сложных сценариев можно сочетать фильтры:

  • по категории
  • по порогу оценки
  • по типу аудита
const filteredAudits = Object.entries(report.audits)
  .filter(([id, audit]) =>
    report.categories.performance.auditRefs.some(ref => ref.id === id) &&
    audit.score !== null &&
    audit.score < 0.7 &&
    audit.scoreDisplayMode === 'numeric'
  )
  .map(([id, audit]) => ({ id, ...audit }));

console.log(filteredAudits);

Результат — массив критических аудитов производительности, имеющих числовую оценку ниже 0.7.

Сортировка после фильтрации

Для удобства анализа фильтрованные результаты часто сортируют по значению score:

const sortedLowScoreAudits = lowScoreAudits.sort((a, b) => a.score - b.score);

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

Автоматизация фильтрации с Node.js

При работе с большим количеством сайтов удобно автоматизировать процесс с использованием скриптов на Node.js:

import fs from 'fs';

const report = JSON.parse(fs.readFileSync('lighthouse-report.json', 'utf-8'));

const criticalAudits = Object.entries(report.audits)
  .filter(([_, audit]) => audit.score !== null && audit.score < 0.5)
  .map(([id, audit]) => ({ id, title: audit.title, score: audit.score }));

fs.writeFileSync('critical-audits.json', JSON.stringify(criticalAudits, null, 2));

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

Вывод

Фильтрация результатов в Lighthouse обеспечивает:

  • Быстрый доступ к критическим метрикам.
  • Сокращение объёма данных до необходимых.
  • Возможность автоматизированного анализа и генерации отчётов.
  • Гибкость в настройке фильтров по категории, типу и порогу оценки.

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

Оглавление