Налаштування Time to Interactive (TTI) моніторингу для сайту

Настройка Time to Interactive (TTI) мониторингу для сайту

Time to Interactive — момент, коли сторінка не просто виглядає завантаженою, а дійсно готова реагувати на користувацький ввід. Різниця між "сторінка виглядає готовою" та "сторінка готова" може складати 5–15 секунд на повільних пристроях. Саме ця різниця пояснює високий показатель відказів на мобільних при хороших показниках FCP.

Як обчислюється TTI

TTI — момент, після якого протягом 5 секунд немає Long Tasks (задач довше 50 мс в main thread) та мережа спокійна (не більше 2 активних запитів). Lighthouse шукає останню Long Task у цьому тихому вікні та бере її кінець як TTI.

Шкала Lighthouse:

• 0–3,8 с — добре
• 3,8–7,3 с — потребує поліпшення

• 7,3 с — погано

Для мобільних пристроїв з CPU throttling 4x — умножайте свої десктопні результати приблизно на 3.

Інструменти мониторингу

Chrome User Experience Report (CrUX) — реальні дані від користувачів Chrome. TTI не публікується прямо (через складність вимірювання), але корелює з TBT та INP, які є.

Lighthouse CI — лабораторні вимірювання при кожному деплої. Стабільні, відтворювальні, ловлять регресії.

WebPageTest — детальний filmstrip + waterfall. Видно точно, який скрипт тримає main thread.

Treo / SpeedCurve — комерційні платформи з історією та алертами.

Lighthouse CI з порогами TTI

npm install --save-dev @lhci/cli

.lighthouserc.json:

{
  "ci": {
    "collect": {
      "url": [
        "https://staging.example.com/",
        "https://staging.example.com/product/example-product"
      ],
      "numberOfRuns": 5,
      "settings": {
        "formFactor": "mobile",
        "screenEmulation": {
          "mobile": true,
          "width": 390,
          "height": 844,
          "deviceScaleFactor": 3
        },
        "throttlingMethod": "simulate",
        "throttling": {
          "rttMs": 150,
          "throughputKbps": 1638.4,
          "cpuSlowdownMultiplier": 4
        }
      }
    },
    "assert": {
      "preset": "lighthouse:recommended",
      "assertions": {
        "interactive": ["error", { "maxNumericValue": 7300 }],
        "total-blocking-time": ["error", { "maxNumericValue": 300 }]
      }
    },
    "upload": {
      "target": "lhci",
      "serverBaseUrl": "https://lhci.example.com",
      "token": "$LHCI_TOKEN"
    }
  }
}

Параметри throttling імітують Moto G4 на 3G — стандартний Lighthouse mobile-профіль.

Збір TTI через Performance Observer у браузері

TTI неможливо точно вимірити через PerformanceObserver напрямки — API для цього немає. Використовуємо полісфіл від Google:

npm install tti-polyfill

import ttiPolyfill from 'tti-polyfill';

ttiPolyfill.getFirstConsistentlyInteractive().then((tti) => {
  // Відправляємо в аналітику
  if (typeof gtag !== 'undefined') {
    gtag('event', 'performance', {
      event_category: 'Web Vitals',
      event_label: 'TTI',
      value: Math.round(tti),
      non_interaction: true,
    });
  }

  // Або в свій бекенд
  fetch('/api/metrics', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      metric: 'tti',
      value: tti,
      url: window.location.href,
      userAgent: navigator.userAgent,
      timestamp: Date.now(),
    }),
    keepalive: true,
  });
});

Полісфіл не ідеальний — апроксимує TTI через Long Task API та Network Information API. Але для трендового мониторингу достатньо.

Зберігання та візуалізація метрик

Мінімальна схема таблиці в PostgreSQL для зберігання field data:

CREATE TABLE performance_metrics (
  id          BIGSERIAL PRIMARY KEY,
  url         TEXT NOT NULL,
  metric      VARCHAR(50) NOT NULL,
  value       FLOAT NOT NULL,
  connection  VARCHAR(20),
  device      VARCHAR(20),
  country     VARCHAR(2),
  recorded_at TIMESTAMPTZ DEFAULT NOW()
);

CREATE INDEX ON performance_metrics (metric, recorded_at);
CREATE INDEX ON performance_metrics (url, metric);

Запит для перцентилів:

SELECT
  url,
  percentile_cont(0.75) WITHIN GROUP (ORDER BY value) AS p75,
  percentile_cont(0.95) WITHIN GROUP (ORDER BY value) AS p95,
  COUNT(*) AS sample_count
FROM performance_metrics
WHERE metric = 'tti'
  AND recorded_at > NOW() - INTERVAL '7 days'
  AND device = 'mobile'
GROUP BY url
ORDER BY p75 DESC;

Зв'язок TTI з реальним бізнесом

Google опублікував дослідження: збільшення TTI на 1 секунду знижує конверсію мобільних користувачів на 7–12% залежно від тематики. Для e-commerce з 1 000 мобільних візитів на день та середнім чеком $50 — це $350–600 в день потенційних втрат при кожній лишній секунді TTI.

Саме тому мониторинг TTI потрібно настраювати не тільки як технічний, але й як бізнес-метрику — з прив'язкою до сегментів трафіку та конверсійних воронок.

Терміни

Настройка Lighthouse CI з TTI-порогами — 1 робочий день. Збір field data через Performance Observer + зберігання в PostgreSQL + Grafana-дашборд — 3–5 робочих днів. Повна система з алертами, сегментацією по пристроям та країнам, інтеграцією з аналітикою — 1–2 тижні.