Настройка Speed Index мониторинга для сайта

Настройка Speed Index мониторинга для сайта

Speed Index — метрика, которую редко оптимизируют целенаправленно, хотя она напрямую отражает пользовательское восприятие загрузки. В отличие от LCP, которая фиксирует момент появления одного элемента, Speed Index измеряет, как быстро визуально заполняется весь видимый экран. Значение 0–3,4 секунды считается хорошим по шкале Lighthouse, но реальные цели зависят от конкурентного окружения.

Что такое Speed Index технически

Speed Index вычисляется по видеозаписи загрузки страницы. Алгоритм (исходно из WebPageTest) разбивает видео на кадры и для каждого момента времени вычисляет, какой процент видимой области уже отрисован. Итоговое значение — интеграл от «неполноты» по времени.

Упрощённо:

SI = сумма по всем интервалам (1 - визуальная_заполненность) * длительность_интервала

Это означает: страница, которая заполняется равномерно, получит лучший SI, чем страница, которая долго стоит пустой и потом резко отрисовывается.

Инструменты для мониторинга

WebPageTest — наиболее точный инструмент. Запускает реальный браузер, снимает видео, вычисляет SI по кадрам. Доступен как публичный сервис и как self-hosted через Docker.

Self-hosted WebPageTest:

docker run -d -p 4000:80 \
  -e AGENTS=1 \
  --name wpt-server \
  webpagetest/server

docker run -d \
  --network host \
  -e SERVER_URL=http://localhost:4000 \
  -e LOCATION=Test \
  --cap-add=SYS_ADMIN \
  webpagetest/agent

Lighthouse CI — встраивается в CI/CD, фиксирует SI при каждом деплое. Не такой точный как WebPageTest, но достаточный для трекинга регрессий.

SpeedCurve — коммерческий инструмент для непрерывного мониторинга. Запускает Lighthouse и WebPageTest по расписанию, строит графики трендов, умеет алертить в Slack.

Calibre — аналог SpeedCurve, удобен для командного использования.

Настройка Lighthouse CI для трекинга SI

Устанавливаем:

npm install --save-dev @lhci/cli

.lighthouserc.js:

module.exports = {
  ci: {
    collect: {
      url: ['https://staging.example.com/', 'https://staging.example.com/catalog/'],
      numberOfRuns: 3,
      settings: {
        preset: 'desktop',
        throttlingMethod: 'simulate',
        throttling: {
          rttMs: 40,
          throughputKbps: 10240,
          cpuSlowdownMultiplier: 1,
        },
      },
    },
    assert: {
      assertions: {
        'speed-index': ['warn', { maxNumericValue: 3400 }],
        'first-contentful-paint': ['error', { maxNumericValue: 2000 }],
      },
    },
    upload: {
      target: 'lhci',
      serverBaseUrl: 'https://lhci.internal.example.com',
      token: process.env.LHCI_TOKEN,
    },
  },
};

В GitHub Actions:

- name: Run Lighthouse CI
  run: |
    npm install -g @lhci/cli
    lhci autorun
  env:
    LHCI_GITHUB_APP_TOKEN: ${{ secrets.LHCI_GITHUB_APP_TOKEN }}
    LHCI_TOKEN: ${{ secrets.LHCI_TOKEN }}

Self-hosted LHCI сервер

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

npm install -g @lhci/server

# С PostgreSQL для продакшн-использования
DATABASE_URL=postgres://user:pass@localhost/lhci \
PORT=9001 \
LHCI_STORAGE__SQL_DIALECT=postgres \
lhci server

Или через Docker Compose:

services:
  lhci-server:
    image: patrickhulce/lhci-server
    ports:
      - "9001:9001"
    environment:
      LHCI_STORAGE__SQL_DIALECT: sqlite
      LHCI_STORAGE__SQL_DATABASE_PATH: /data/lhci.db
    volumes:
      - lhci-data:/data

WebPageTest API для автоматизации

WebPageTest предоставляет REST API для запуска тестов из CI:

# Запуск теста
curl "https://www.webpagetest.org/runtest.php?url=https://example.com&f=json&k=${WPT_API_KEY}&runs=3&video=1" \
  | jq '.data.testId'

# Получение результатов
curl "https://www.webpagetest.org/jsonResult.php?test=${TEST_ID}" \
  | jq '.data.median.firstView.SpeedIndex'

Через npm-пакет webpagetest:

const WebPageTest = require('webpagetest');
const wpt = new WebPageTest('www.webpagetest.org', process.env.WPT_API_KEY);

wpt.runTest('https://example.com', {
  runs: 3,
  video: true,
  location: 'Dulles:Chrome',
  connectivity: 'Cable',
}, (err, data) => {
  const si = data.data.median.firstView.SpeedIndex;
  console.log(`Speed Index: ${si}ms`);
  if (si > 3400) process.exit(1);
});

Алертинг и пороги

Одиночное измерение SI ненадёжно — метрика зависит от сетевых условий, загрузки сервера, случайных флуктуаций. Правильный подход: медиана из 3–5 запусков, алерт при превышении скользящего среднего за последние 7 дней.

Пример логики алерта в Grafana (если данные сливаются в InfluxDB):

SELECT moving_average(mean("speed_index"), 7)
FROM "lighthouse_metrics"
WHERE time > now() - 30d
GROUP BY time(1d), "page"

Порог алерта: если текущее значение превышает 7-дневное скользящее среднее более чем на 20% — уведомление в Slack.

Что влияет на Speed Index больше всего

Speed Index деградирует когда:

• Render-blocking ресурсы задерживают первую отрисовку (CSS в <head> без media, синхронный JS)
• Шрифты загружаются без font-display: swap — текст не отображается до загрузки шрифта
• Above-the-fold изображения без явных размеров — layout shift задерживает «заполнение» экрана
• Тяжёлые inline-скрипты в <head> блокируют парсер

Мониторинг Speed Index ценен не сам по себе, а как интегральный сигнал: если SI растёт — где-то появился регрессия в рендеринге первого экрана, и нужно смотреть filmstrip в WebPageTest, чтобы найти именно тот момент, где экран «встал».

Сроки

Базовая настройка Lighthouse CI с трекингом SI в существующий пайплайн — 1–2 рабочих дня. Self-hosted LHCI сервер с PostgreSQL, Grafana-дашбордом и Slack-алертами — 3–5 рабочих дней. Полный стек с WebPageTest self-hosted + автоматизацией через API — 1–2 недели с учётом настройки агентов в нужных географических локациях.