Grafana дашборды

Для работы с Lighthouse в среде JavaScript можно использовать пакет lighthouse, который доступен через npm. Установка выполняется командой:

npm install -g lighthouse

Для использования в проекте как зависимости:

npm install --save-dev lighthouse

После установки можно подключить библиотеку в Node.js проект:

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

Для корректного запуска необходим отдельный экземпляр Chrome, управляемый через chrome-launcher. Это позволяет Lighthouse работать в изолированном окружении и собирать метрики производительности, доступности, SEO и других категорий.

Запуск анализа страницы

Для проведения аудита необходимо:

  1. Запустить Chrome через chrome-launcher.
  2. Передать URL страницы и конфигурацию в функцию lighthouse.
  3. Обработать полученный результат.

Пример запуска:

(async () => {
  const chrome = await chromeLauncher.launch({chromeFlags: ['--headless']});
  const options = {logLevel: 'info', output: 'json', port: chrome.port};
  const runnerResult = await lighthouse('https://example.com', options);

  console.log('Lighthouse score:', runnerResult.lhr.categories.performance.score);

  await chrome.kill();
})();

Ключевые моменты:

  • chromeFlags: ['--headless'] запускает Chrome без интерфейса.
  • output: 'json' позволяет получать структурированные данные для последующего анализа.
  • runnerResult.lhr.categories содержит результаты по основным категориям: performance, accessibility, best-practices, seo, pwa.

Конфигурация аудита

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

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

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

const config = {
  extends: 'lighthouse:default',
  settings: {
    emulatedFormFactor: 'desktop',
    throttlingMethod: 'simulate',
  },
  categories: {
    performance: {enabled: true},
    accessibility: {enabled: true},
    seo: {enabled: false}
  }
};

Передача конфигурации при запуске:

const runnerResult = await lighthouse('https://example.com', options, config);

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

Lighthouse идеально подходит для сбора метрик для последующей визуализации в Grafana. Для этого необходимо:

  1. Экспортировать результаты в формате JSON или CSV.
  2. Преобразовать метрики в формат, пригодный для временных рядов.
  3. Загружать данные в базу (например, Prometheus, InfluxDB) для построения дашбордов.

Пример экспорта:

const fs = require('fs');
fs.writeFileSync('lighthouse-report.json', JSON.stringify(runnerResult.lhr, null, 2));

Метрики, которые чаще всего визуализируют:

  • Performance score — общий показатель производительности страницы.
  • First Contentful Paint (FCP) — время появления первого содержимого.
  • Largest Contentful Paint (LCP) — время появления самого крупного элемента.
  • Cumulative Layout Shift (CLS) — показатель стабильности интерфейса.
  • Accessibility score — уровень доступности.

Автоматизация сбора данных

Для регулярного мониторинга можно настроить скрипт Node.js с планировщиком (cron) или CI/CD пайплайном. Основные шаги:

  1. Запуск Lighthouse по URL целевых страниц.
  2. Сохранение отчета в базе данных.
  3. Визуализация результатов в Grafana с пороговыми триггерами.

Пример скрипта для cron:

const urls = ['https://example.com', 'https://example.org'];

urls.forEach(async (url) => {
  const chrome = await chromeLauncher.launch({chromeFlags: ['--headless']});
  const options = {port: chrome.port, output: 'json'};
  const result = await lighthouse(url, options);
  fs.writeFileSync(`reports/${url.replace(/https?:\/\//,'')}.json`, JSON.stringify(result.lhr, null, 2));
  await chrome.kill();
});

Визуализация в Grafana

После загрузки метрик в базу данных для Grafana:

  • Создаются панели с графиками времени загрузки, FCP, LCP и CLS.
  • Можно добавлять алерты при превышении пороговых значений.
  • Комбинируются разные показатели производительности и доступности на одном дашборде.

Советы по построению дашбордов:

  • Использовать агрегированные показатели за день или неделю для анализа трендов.
  • Выделять цветом критические показатели.
  • Сравнивать метрики разных страниц для выявления узких мест.
Оглавление