Уявіть: ви викотили нову фічу, а Speed Index зріс на 40%. Користувачі йдуть, конверсія падає, а команда дізнається про це через тиждень за скаргами в підтримку. Щоб такого не траплялося, ми налаштовуємо безперервний моніторинг Speed Index з алертами при деградації — це дозволяє зловити регресію в перші хвилини після викладки. Наш досвід показує, що навіть одноразові заміри не дають повної картини, тому ми завжди пропонуємо систему з історією та трендами.
Speed Index — метрика, яку рідко оптимізують цілеспрямовано, хоча вона безпосередньо відображає користувацьке сприйняття завантаження. На відміну від LCP, яка фіксує момент появи одного елемента, Speed Index вимірює, як швидко візуально заповнюється весь видимий екран. Значення 0–3,4 секунди вважається хорошим за шкалою Lighthouse, але реальні цілі залежать від конкурентного оточення.
Що таке Speed Index технічно
Speed Index обчислюється за відеозаписом завантаження сторінки. Алгоритм (спочатку з WebPageTest) розбиває відео на кадри і для кожного моменту часу обчислює, який відсоток видимої області вже відмальовано. Підсумкове значення — інтеграл від «неповноти» за часом.
Спрощено:
SI = сума за всіма інтервалами (1 - візуальна_заповненість) * тривалість_інтервалу Це означає: сторінка, яка заповнюється рівномірно, отримає кращий SI, ніж сторінка, яка довго стоїть порожньою і потім різко відмальовується.
Чому Speed Index — метрика, яку не можна ігнорувати?
Дослідження показують, що збільшення SI на 1 секунду знижує конверсію в середньому на 12%. При цьому SI більш чутливий до змін у рендерингу, ніж LCP: наприклад, додавання render-blocking CSS може погіршити SI на 25%, а LCP — лише на 10%. Тому моніторинг SI — це ранній сигнал проблем із сприйнятою продуктивністю.
Які інструменти для моніторингу обрати?
Вибір інструменту залежить від необхідної точності та бюджету. Порівняємо основні варіанти:
| Інструмент | Точність | Вартість | Час налаштування |
|---|---|---|---|
| WebPageTest (self-hosted) | Висока (відеозапис) | Безкоштовно (сервер) | 3-5 днів |
| Lighthouse CI | Середня (достатньо для регресій) | Безкоштовно | 1-2 дні |
| SpeedCurve | Висока | Платний (від $99/міс) | 1-2 дні |
| Calibre | Середня | Платний (від $49/міс) | 1-2 дні |
| Sitespeed.io | Середня | Безкоштовно | 2-4 дні |
Lighthouse CI налаштовується в 3 рази швидше за WebPageTest, але поступається в точності на 10-15% для складних сторінок. WebPageTest виграє в точності, але складніший у підтримці. Для команд, які не бажають возитися з інфраструктурою, підійдуть комерційні сервіси.
Як налаштувати алерти в Slack за 5 хвилин
- Створіть Webhook у Slack (Apps → Incoming Webhooks).
- У конфігурації CI додайте крок надсилання сповіщення, якщо Speed Index перевищує поріг.
- Перевірте: при деплої з регресією в Slack прийде повідомлення з посиланням на звіт.
Як ми налаштовуємо моніторинг: стек і конфігурація
Ми віддаємо перевагу комбінувати Lighthouse CI для щоденних прогонів і WebPageTest для глибинного аналізу. Розглянемо налаштування кожного.
WebPageTest self-hosted
Розгортаємо сервер та агента через Docker:
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 з трекінгом SI
Встановлюємо та конфігуруємо @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 }} Алертинг і пороги
Одиничне вимірювання SI ненадійне — метрика залежить від мережевих умов. Ми використовуємо медіану з 3–5 запусків і алерт при перевищенні ковзного середнього за 7 днів більш ніж на 20%. Приклад запиту для Grafana:
SELECT moving_average(mean("speed_index"), 7) FROM "lighthouse_metrics" WHERE time > now() - 30d GROUP BY time(1d), "page" Типові помилки при моніторингу Speed Index
- Запуск одного тесту: через флуктуації ви отримаєте хибне спрацьовування в 30% випадків. Використовуйте медіану з 3 прогонів.
- Ігнорування впливу серверної відповіді: TTFB може сильно викривляти SI. Переконайтеся, що бекенд стабільний.
- Відсутність контролю умов: throttling має бути однаковим для всіх тестів, інакше тренд буде шумним.
Що найбільше впливає на Speed Index
Speed Index деградує, коли:
- Render-blocking ресурси затримують першу відмальовку (CSS без
media, синхронний JS) - Шрифти завантажуються без
font-display: swap— текст не відображається до завантаження - Above-the-fold зображення без явних розмірів викликають layout shift
- Важкі inline-скрипти в
<head>блокують парсер
Моніторинг Speed Index цінний як інтегральний сигнал: якщо SI зростає — з'явилася регресія в рендерингу першого екрану, і потрібно дивитися filmstrip у WebPageTest.
Що входить у налаштування
При замовленні послуги «під ключ» ми надаємо:
| Компонент | Результат |
|---|---|
| Вибір інструменту та інфраструктури | Рекомендація з обґрунтуванням |
| Розгортання та конфігурація | Працюючий стенд моніторингу |
| Налаштування алертів (Slack/email) | Сповіщення при деградації |
| Інтеграція в CI/CD | Автоматичні прогони при деплої |
| Документація та навчання команди | Зрозумілі інструкції та дашборд |
Ми гарантуємо, що після налаштування ви будете отримувати сповіщення про проблеми зі Speed Index не пізніше ніж через 15 хвилин після деплою.
Строки орієнтовно
Базова налаштування Lighthouse CI з трекінгом SI — 1–2 робочих дні. Self-hosted LHCI сервер з Grafana та Slack — 3–5 робочих днів. Повний стек з WebPageTest та автоматизацією через API — 1–2 тижні.
Оцінимо ваш проект безкоштовно — зв'яжіться з нами для консультації. Замовте налаштування і забудьте про раптові падіння продуктивності. Отримайте контроль над продуктивністю вже сьогодні.