Налаштування Speed Index моніторингу для сайту

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

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

Що таке Speed Index технічно

Speed Index обчислюється за відеозаписом завантаження сторінки. Алгоритм розбиває відео на кадри та для кожного моменту часу обчислює, який відсоток видимої області вже відрисований. Підсумкове значення — інтеграл від "неповноти" по часу.

Спрощено: сторінка, яка заповнюється рівномірно, отримає кращий 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.

Настройка 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:

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

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

Що впливає на Speed Index найбільше

SI деградує коли:

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

Цінність мониторингу SI не в самому по собі, а як інтегральний сигнал: якщо SI росте — де-то з'явилася регресія в рендерингу першого екрана, потрібно дивитись filmstrip у WebPageTest, щоб знайти точний момент, де екран "встав".

Терміни

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