Custom analytics платформы

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

Lighthouse работает по принципу запуска аудитов в браузере или через Node.js. Для Node.js доступен пакет lighthouse, который предоставляет API для программного вызова всех функций.

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

async function runLighthouse(url, options = {}, config = null) {
    const chrome = await chromeLauncher.launch({ chromeFlags: ['--headless'] });
    options.port = chrome.port;
    const results = await lighthouse(url, options, config);
    await chrome.kill();
    return results.lhr; // Lighthouse Result
}

Ключевой момент: результат аудита (lhr) содержит структурированные данные по всем категориям и метрикам, включая детальные рекомендации.

Структура результата

Объект lhr имеет следующие важные свойства:

  • categories — основные категории аудита:

    • performance
    • accessibility
    • best-practices
    • seo
    • pwa (если применимо)

  • audits — детальные проверки с оценками, описанием проблем и рекомендациями.

  • fetchTime — время создания отчёта.

  • finalUrl — URL, который был проанализирован.

Каждый элемент audits содержит:

  • id — уникальный идентификатор проверки.
  • title — название проверки.
  • description — подробное описание проблемы.
  • score — оценка от 0 до 1.
  • details — дополнительные данные, например, список медленных ресурсов.

Настройка пользовательской аналитики

Для создания кастомной аналитической платформы на основе Lighthouse используется возможность кастомизации конфигурации. Конфигурация задаётся объектом, который определяет:

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

Пример конфигурации:

const config = {
  extends: 'lighthouse:default',
  settings: {
    onlyCategories: ['performance', 'seo'],
    maxWaitForFcp: 15000,
    emulatedFormFactor: 'mobile'
  },
  audits: [
    'first-contentful-paint',
    'largest-contentful-paint',
    'seo-meta-description'
  ]
};

Важная особенность — можно отключать ненужные проверки, чтобы ускорить аудит и уменьшить объём данных для последующего анализа.

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

Для аналитической платформы важна не только оценка сайта, но и сбор метрик в удобном формате. Например, можно преобразовать lhr.audits в JSON-структуру с ключевыми метриками:

function extractMetrics(lhr) {
    const metrics = {
        performanceScore: lhr.categories.performance.score,
        fcp: lhr.audits['first-contentful-paint'].numericValue,
        lcp: lhr.audits['largest-contentful-paint'].numericValue,
        seoScore: lhr.categories.seo.score
    };
    return metrics;
}

Эти данные можно сохранять в базу данных, отображать на дашборде или использовать для генерации регулярных отчётов.

Интеграция с другими инструментами

Lighthouse легко сочетается с:

  • CI/CD для автоматических проверок производительности при деплое;
  • Системами мониторинга (Prometheus, Grafana) для визуализации исторических данных;
  • Node.js-сервисами, где отчёты могут агрегироваться и анализироваться с помощью кастомных алгоритмов.

Пример интеграции с базой данных:

import { MongoClient } from 'mongodb';

async function saveMetrics(metrics) {
    const client = new MongoClient('mongodb://localhost:27017');
    await client.connect();
    const db = client.db('analytics');
    await db.collection('lighthouse_reports').insertOne(metrics);
    await client.close();
}

Расширенные возможности кастомизации

  1. Пользовательские аудиты Можно создавать собственные проверки, реализуя интерфейс Audit с методами meta и audit(). Это позволяет отслеживать нестандартные показатели, специфичные для проекта.

  2. Логирование и трассировка Lighthouse собирает данные о производительности сети, JavaScript и рендеринга страницы, которые можно использовать для детального анализа проблемных точек.

  3. Форматы отчётов

    • HTML — удобен для визуального анализа.
    • JSON — для автоматической обработки в системах аналитики.
    • CSV — для интеграции с BI-инструментами.

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

  • Для регулярного мониторинга лучше запускать Lighthouse через Node.js в headless-режиме.
  • Оптимизировать конфигурацию под задачи платформы: включать только необходимые категории и аудиты.
  • Собранные данные агрегировать и визуализировать для выявления трендов и проблемных областей.
  • Пользовательские аудиты позволяют учитывать бизнес-метрики, которые стандартный набор Lighthouse не покрывает.
Оглавление