Интеграция с analytics

Lighthouse — это инструмент для аудита веб-страниц, предоставляющий метрики производительности, доступности, SEO и прогрессивных веб-приложений (PWA). Интеграция с системами аналитики позволяет собирать детализированные данные о производительности страниц в реальном времени, объединять их с пользовательскими метриками и автоматизировать процесс мониторинга качества сайтов.

Получение данных Lighthouse через Node.js API

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

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

async function runLighthouse(url) {
  const chrome = await chromeLauncher.launch({chromeFlags: ['--headless']});
  const options = {logLevel: 'info', output: 'json', port: chrome.port};
  const runnerResult = await lighthouse(url, options);

  const reportJson = runnerResult.report;
  await chrome.kill();
  return JSON.parse(reportJson);
}

Ключевое здесь — получение runnerResult.report, которое содержит все метрики Lighthouse в формате JSON, пригодном для передачи в аналитические системы.

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

Отчёт Lighthouse включает следующие важные разделы:

  • categories — категории аудита (performance, accessibility, seo, best-practices, pwa), каждая с оценкой от 0 до 1.
  • audits — конкретные проверки с результатами, оценками и дополнительными данными (например, numericValue для метрик времени загрузки).
  • timing — временные показатели запуска аудита и общего времени обработки.
  • fetchTime — отметка времени создания отчёта, которая полезна для временных рядов в аналитике.

Для передачи в систему аналитики часто выбирают метрики из categories и ключевые numericValue из audits, такие как First Contentful Paint (FCP), Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS) и Time to Interactive (TTI).

Примеры интеграции с Google Analytics

Для отправки данных в Google Analytics можно использовать Measurement Protocol:

const fetch = require('node-fetch');

async function sendToGA(metrics, trackingId, clientId) {
  const payload = {
    v: '1', 
    tid: trackingId,
    cid: clientId,
    t: 'event',
    ec: 'Lighthouse',
    ea: 'Page Metrics',
    el: 'Performance Audit',
    ev: Math.round(metrics.performance * 100)
  };

  const queryString = Object.entries(payload).map(([k,v]) => `${k}=${v}`).join('&');
  await fetch(`https://www.google-analytics.com/collect?${queryString}`, { method: 'POST' });
}

Здесь важно корректно масштабировать показатели (например, умножать оценки от 0 до 1 на 100 для передачи в ev).

Автоматизация аудитов и интеграция с BI

Для крупных проектов полезно запускать Lighthouse автоматически через CI/CD:

  1. GitHub Actions / GitLab CI — запуск Lighthouse на ветках перед деплоем.
  2. Скрипты Node.js — собирают JSON отчёты и преобразуют их в CSV или напрямую в базу данных.
  3. ETL-процессы — выгрузка метрик в аналитические платформы (BigQuery, Redshift, ClickHouse) для построения дашбордов.

Пример выгрузки в базу:

const { Client } = require('pg');

async function saveMetricsToDB(metrics) {
  const client = new Client({ connectionString: process.env.DATABASE_URL });
  await client.connect();
  
  const query = `
    INS ERT IN TO lighthouse_metrics (fcp, lcp, cls, tti, audit_time)
    VALUES ($1, $2, $3, $4, $5)
  `;
  await client.query(query, [
    metrics.fcp,
    metrics.lcp,
    metrics.cls,
    metrics.tti,
    metrics.fetchTime
  ]);
  await client.end();
}

Использование пользовательских событий и тегов

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

  • Сопоставлять производительность страниц с конкретными кампаниями.
  • Анализировать опыт разных сегментов пользователей.
  • Автоматически строить A/B тесты с учётом показателей загрузки и взаимодействия.

Для этого можно добавлять в JSON отчёта дополнительные поля userSegment или campaignId, а затем передавать их в BI или системы аналитики вместе с метриками.

Важные рекомендации

  • Фильтрация и нормализация метрик — важно нормализовать показатели (например, округлять до миллисекунд или десятых долей) перед отправкой в аналитические системы.
  • Периодические аудиты — лучше запускать Lighthouse регулярно (например, раз в сутки) для построения временных рядов.
  • Сокращение объёма данных — для аналитики не требуется весь JSON отчёт, достаточно ключевых показателей, чтобы не перегружать базу или дашборд.

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

Оглавление