Dashboard создание

Lighthouse — это инструмент для автоматизированного аудита веб-страниц, разработанный Google, который позволяет анализировать производительность, доступность, SEO и лучшие практики веб-разработки. Для работы с Lighthouse в проекте на JavaScript чаще всего используется пакет lighthouse, устанавливаемый через npm:

npm install lighthouse --save-dev

После установки можно использовать Lighthouse как CLI, либо напрямую через Node.js API. Для интеграции в Dashboard чаще используется API, так как оно позволяет запускать аудиты программно и обрабатывать результаты в дальнейшем.

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

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

  console.log('Lighthouse score:', runnerResult.lhr.categories.performance.score * 100);
  await chrome.kill();
}

runLighthouse('https://example.com');

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

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

const config = {
  extends: 'lighthouse:default',
  settings: {
    onlyCategories: ['performance', 'accessibility'],
    emulatedFormFactor: 'desktop',
    throttlingMethod: 'simulate'
  }
};

const runnerResult = await lighthouse(url, {port: chrome.port}, config);

Ключевые моменты конфигурации:

  • onlyCategories — ограничение категорий аудита.
  • emulatedFormFactor — эмуляция устройства (mobile, desktop).
  • throttlingMethod — метод эмуляции сетевых и процессорных условий (simulate, devtools).

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

Lighthouse возвращает объект lhr (Lighthouse Result), который содержит детальную информацию об аудите. Основные части:

  • categories — результаты по категориям (Performance, SEO, Accessibility, Best Practices, PWA).
  • audits — полный список всех проверок с оценками и метриками.
  • fetchTime — время проведения аудита.
  • finalUrl — URL страницы, на которой выполнен аудит.

Пример обработки результатов для Dashboard:

const {categories, audits} = runnerResult.lhr;

const performanceScore = categories.performance.score * 100;
const accessibilityScore = categories.accessibility.score * 100;

const metrics = {
  firstContentfulPaint: audits['first-contentful-paint'].displayValue,
  largestContentfulPaint: audits['largest-contentful-paint'].displayValue,
  totalBlockingTime: audits['total-blocking-time'].displayValue
};

console.log({performanceScore, accessibilityScore, metrics});

Визуализация данных в Dashboard

Для отображения данных на Dashboard удобно использовать графические библиотеки, например, Chart.js или D3.js. Обычно визуализируют:

  • Категории аудита — как круговые диаграммы с процентными оценками.
  • Метрики производительности — линейные или столбчатые графики.
  • Исторические тренды — изменение показателей при каждом аудите.

Пример генерации графика для метрик:

const Chart = require('chart.js');

const ctx = document.getElementById('performanceChart').getContext('2d');
const chart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ['FCP', 'LCP', 'TBT'],
    datasets: [{
      label: 'Метрики производительности',
      data: [
        metrics.firstContentfulPaint,
        metrics.largestContentfulPaint,
        metrics.totalBlockingTime
      ],
      backgroundColor: ['#4caf50', '#2196f3', '#ff9800']
    }]
  },
  options: {
    responsive: true,
    scales: {
      y: {beginAtZero: true}
    }
  }
});

Автоматизация и планирование аудитов

Для регулярного обновления данных на Dashboard часто используют планировщик задач, например, node-cron. Это позволяет запускать Lighthouse по расписанию и сохранять результаты в базу данных:

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

cron.schedule('0 0 * * *', async () => {
  const result = await runLighthouse('https://example.com');
  saveToDatabase(result.lhr);
});

Рекомендации для Dashboard:

  • Сохранять raw данные (lhr) для последующего анализа и построения трендов.
  • Выводить как текущие показатели, так и исторические изменения.
  • Разделять визуализацию категорий и метрик для удобства анализа.
  • Использовать кэширование и асинхронную обработку для ускорения загрузки страниц Dashboard.

Настройка кастомных аудитов

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

const Audit = require('lighthouse').Audit;

class CustomAudit extends Audit {
  static get meta() {
    return {
      id: 'custom-audit',
      title: 'Проверка кастомного условия',
      description: 'Проверяет специфический критерий',
      requiredArtifacts: ['URL']
    };
  }

  static audit(artifacts) {
    const score = artifacts.URL.includes('example') ? 1 : 0;
    return {score};
  }
}

const config = {
  extends: 'lighthouse:default',
  audits: [CustomAudit]
};

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

Оглавление