Time to Interactive TTI monitoring for website

Setting Up Time to Interactive (TTI) Monitoring

Time to Interactive is the moment when page is not just visually loaded, but truly ready to respond to user input. Difference between "page looks ready" and "page is ready" can be 5–15 seconds on slow devices. This difference explains high bounce rate on mobile despite good FCP.

How TTI is Calculated

TTI is the moment after which for 5 seconds there are no Long Tasks (tasks longer than 50 ms on main thread) and network is calm (max 2 active requests). Lighthouse finds last Long Task in this quiet window and takes its end as TTI.

Lighthouse scale:

• 0–3.8 s — good
• 3.8–7.3 s — needs improvement

• 7.3 s — poor

For mobile with 4x CPU throttling—multiply desktop results by approximately 3.

Monitoring Tools

Chrome User Experience Report (CrUX) — real data from Chrome users. TTI not published directly (due to complexity), but correlates with TBT and INP which are available.

Lighthouse CI — lab measurements on each deploy. Stable, reproducible, catch regressions.

WebPageTest — detailed filmstrip + waterfall. See exactly which script holds main thread.

Treo / SpeedCurve — commercial platforms with history and alerts.

Lighthouse CI with TTI Thresholds

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 params simulate Moto G4 on 3G—standard Lighthouse mobile profile.

TTI Collection via Performance Observer

TTI cannot be precisely measured via PerformanceObserver directly—no API for this. Use Google's polyfill:

npm install tti-polyfill

import ttiPolyfill from 'tti-polyfill';

ttiPolyfill.getFirstConsistentlyInteractive().then((tti) => {
  // Send to analytics
  if (typeof gtag !== 'undefined') {
    gtag('event', 'performance', {
      event_category: 'Web Vitals',
      event_label: 'TTI',
      value: Math.round(tti),
      non_interaction: true,
    });
  }

  // Or to own backend
  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,
  });
});

Polyfill not ideal—approximates TTI via Long Task API and Network Information API. Good for trend monitoring.

Metrics Storage and Visualization

Minimal schema for 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);

Query for percentiles:

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 Business Impact

Google published research: 1 second TTI increase reduces mobile conversion by 7–12% depending on category. For e-commerce with 1,000 mobile visits/day and $50 average—$350–600/day potential loss per extra TTI second.

Monitor TTI not just technically, but as business metric—linked to traffic segments and conversion funnels.

Timeframe

Lighthouse CI setup with TTI thresholds — 1 business day. Field data collection via Performance Observer + PostgreSQL storage + Grafana dashboard — 3–5 business days. Full system with alerts, device/country segmentation, analytics integration — 1–2 weeks.