SpeedCurve

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

Основные возможности Lighthouse

Lighthouse позволяет оценивать:

Производительность: анализ скорости загрузки страницы, времени до интерактивности и других критических показателей.
Доступность: проверка элементов интерфейса на соответствие стандартам доступности WCAG.
SEO: базовый аудит оптимизации под поисковые системы.
Прогрессивные веб-приложения (PWA): проверка внедрения современных технологий веб-приложений.
Лучшие практики: выявление потенциальных проблем в коде и структуре сайта.

Lighthouse предоставляет отчеты в формате JSON, которые можно использовать для визуализации и глубокого анализа через SpeedCurve.

Интеграция Lighthouse с SpeedCurve

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

Основные шаги интеграции:

Установка Lighthouse:

npm install -g lighthouse

или локально в проекте:

npm install --save-dev lighthouse

Запуск аудита через Node.js:

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

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

  const results = await lighthouse(url, opts, config);
  await chrome.kill();
  return results.lhr;
}

runLighthouse('https://example.com').then(results => {
  console.log('Performance score:', results.categories.performance.score);
});

Здесь lhr (Lighthouse Result) — объект с полным отчетом в JSON, который можно передавать в SpeedCurve.

Форматирование результатов для SpeedCurve:

SpeedCurve API принимает данные о производительности в формате, включающем ключевые метрики: First Contentful Paint (FCP), Largest Contentful Paint (LCP), Time to Interactive (TTI), Speed Index, Cumulative Layout Shift (CLS).

Пример формирования метрик:

function extractMetrics(lhr) {
  return {
    fcp: lhr.audits['first-contentful-paint'].numericValue,
    lcp: lhr.audits['largest-contentful-paint'].numericValue,
    tti: lhr.audits['interactive'].numericValue,
    speedIndex: lhr.audits['speed-index'].numericValue,
    cls: lhr.audits['cumulative-layout-shift'].numericValue
  };
}

Отправка данных в SpeedCurve:

SpeedCurve предоставляет REST API для загрузки метрик. Пример POST-запроса через axios:

const axios = require('axios');

async function sendToSpeedCurve(metrics, url, apiKey) {
  await axios.post('https://api.speedcurve.com/v1/custom-metrics', {
    page_url: url,
    metrics: metrics
  }, {
    headers: {
      'Authorization': `Bearer ${apiKey}`,
      'Content-Type': 'application/json'
    }
  });
}

Автоматизация мониторинга

Для систематического сбора данных можно использовать CI/CD пайплайн:

Настройка nightly build для запуска Lighthouse на всех страницах.
Сбор метрик и отправка их в SpeedCurve для построения графиков трендов.
Генерация оповещений при ухудшении ключевых показателей.

Работа с кастомными конфигурациями Lighthouse

Lighthouse позволяет настраивать аудит через кастомные конфиги:

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

Использование кастомного конфига позволяет:

Ограничивать аудит только нужными категориями.
Эмулировать различные устройства и сетевые условия.
Подстраивать анализ под реальные сценарии пользователей.

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

SpeedCurve строит графики на основе метрик Lighthouse:

Исторические тренды: отслеживание динамики FCP, LCP и TTI.
Сравнение версий сайта: анализ изменений после деплоя.
Определение узких мест: выявление страниц с высокой нагрузкой или медленным рендером.

Использование визуализаций упрощает приоритизацию оптимизаций и позволяет быстро обнаруживать регрессии.