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

Проблема: сторінка виглядає завантаженою, але не реагує на кліки

Time to Interactive (TTI) — момент, коли сторінка не просто відмальована, а дійсно готова до взаємодії. Різниця між «сторінка виглядає готовою» та «сторінка готова» може сягати 5–15 секунд на повільних пристроях. Саме це пояснює високий показник відмов на мобільних при хороших FCP. Ми, команда веб-інженерів з 10+ річним досвідом в оптимізації продуктивності, допомагаємо налаштувати моніторинг TTI, щоб ви бачили реальну картину та могли швидко реагувати на регресії.

Як TTI впливає на конверсію та бізнес?

Дослідження Google: збільшення TTI на 1 секунду знижує конверсію мобільних відвідувачів на 7–12% залежно від тематики. Для e-commerce з 1 000 мобільних візитів на день і середнім чеком $50 — це $350–600 на день потенційних втрат при кожній зайвій секунді TTI. Наші сертифіковані фахівці з веб-продуктивності (5+ років на ринку) допомогли інтернет-магазину з щоденним трафіком 2000 мобільних користувачів скоротити TTI з 12 до 5 секунд, що підвищило конверсію на 18%, а економія на рекламі склала $2000 на місяць. Саме тому моніторинг TTI потрібно налаштовувати як бізнес-метрику, з прив'язкою до сегментів трафіку та конверсійних воронок.

Що таке TTI і як його вимірюють?

TTI — момент, після якого протягом 5 секунд немає Long Tasks (задач довше 50 мс в main thread) і мережа спокійна (не більше 2 активних запитів). Lighthouse шукає останню Long Task в цьому тихому вікні та бере її кінець як TTI. Практичний наслідок: TTI безпосередньо визначається кількістю та розміром JavaScript, який парситься та виконується при завантаженні, і тим, що цей JS робить в main thread. Для розуміння впливу на event loop ми рекомендуємо аналізувати CPU-bound tasks.

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

Чому варто використовувати Lighthouse CI у парі з Performance Observer?

Lighthouse CI — ідеальний інструмент для регресійного тестування в CI/CD pipeline, а Performance Observer дає реальні дані від реальних користувачів (field data). Комбінація цих підходів дозволяє швидко помічати регресії та одночасно відстежувати фактичні показники на сайті. Lighthouse CI кращий за WebPageTest для автоматизації в CI, оскільки вбудований у Node.js, а Performance Observer точніше за PageSpeed Insights відображає польові дані з урахуванням реальних умов мережі. Google рекомендує використовувати обидва методи для повної картини продуктивності.

Як налаштувати моніторинг TTI: покрокове керівництво

npm install --save-dev @lhci/cli 

{ "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" } } } 

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, }); }); 

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); 

SELECT date_trunc('hour', recorded_at) AS time, percentile_cont(0.75) WITHIN GROUP (ORDER BY value) AS p75_tti FROM performance_metrics WHERE metric = 'tti' AND recorded_at BETWEEN $__timeFrom() AND $__timeTo() GROUP BY 1 ORDER BY 1;