Time to Interactive (TTI) Monitoring Setup

The problem: page appears loaded but does not respond to clicks

Time to Interactive (TTI) is the moment when a page is not just rendered but is truly ready for interaction. The difference between "page looks ready" and "page is ready" can be 5–15 seconds on slow devices. This explains high bounce rates on mobile even with good FCP. We, a team of web engineers with 10+ years of experience in performance optimization, help set up TTI monitoring so you see the real picture and can react quickly to regressions. Our guaranteed approach ensures accurate setup and actionable insights.

How TTI affects conversion and business

Google research: a 1-second increase in TTI reduces mobile conversion by 7–12% depending on the vertical. For an e-commerce site with 1,000 mobile visits per day and an average order of $50, that's $350–600 per day in potential losses for every extra second of TTI. That's why TTI monitoring should be set up as a business metric, tied to traffic segments and conversion funnels. Starting at $500 for basic monitoring, our setup pays for itself within days.

What is TTI and how is it measured?

TTI is the moment after which there are no Long Tasks (tasks longer than 50 ms in the main thread) for 5 seconds and the network is idle (no more than 2 active requests). Lighthouse looks for the last Long Task in this quiet window and takes its end as TTI. Practical implication: TTI is directly determined by the quantity and size of JavaScript that is parsed and executed during load, and by what that JS does in the main thread. Advanced monitoring also considers First Input Delay (FID) and Total Blocking Time (TBT) to predict user-perceived responsiveness.

For mobile devices with CPU throttling 4x, multiply your desktop results by approximately 3.

Why use Lighthouse CI together with Performance Observer?

Lighthouse CI is an ideal tool for regression testing in a CI/CD pipeline, while Performance Observer provides real data from real users (field data). Combining these approaches allows you to quickly detect regressions and simultaneously track actual metrics on the site. For reliable TTI monitoring, using both methods together is 3x more effective than relying on a single source. Google recommends using both methods for a complete performance picture.

How to set up TTI monitoring: step-by-step guide

Step 1: Setting up Lighthouse CI for TTI monitoring

npm install --save-dev @lhci/cli 

Configuration .lighthouserc.json emulates Moto G4 on 3G — standard Lighthouse mobile profile:

{ "ci": { "collect": { "url": [ "your-staging-url", "your-staging-url/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": "your-lhci-server-url", "token": "$LHCI_TOKEN" } } } 

Step 2: Collecting field data for TTI monitoring through Performance Observer

The browser API does not provide TTI directly, so we use the Google 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, }); }); 

The polyfill approximates TTI using the Long Task API and Network Information API. This is sufficient for trend monitoring.

Step 3: Storing metrics and visualization

Create a table for storing 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); 

Query for a Grafana dashboard (p75 TTI trend by hour):

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; 

Set up alerts in Grafana: condition — p75 TTI in the last 24 hours exceeds p75 over the previous 7 days by more than 1 second. This filters out false positives and reacts only to sustained regressions.

Typical mistakes in TTI monitoring

• Using only desktop values — mobile TTI can be 3–4 times higher.
• Relying on single Lighthouse measurements — need statistics from at least 5 runs.
• Not segmenting field data by device type and connection type — averages hide problems.
• Ignoring Total Blocking Time (TBT) — it correlates with TTI and helps localize the issue.

What's included in the work?

• Current TTI audit (lab and field).
• Lighthouse CI setup with thresholds and CI/CD integration.
• Field data collection via Performance Observer.
• Creation of PostgreSQL database and Grafana dashboard.
• Alert configuration for regressions.
• Documentation and team training.
• 1 month of support after delivery.

Backed by 10+ years of web performance engineering, we guarantee accurate monitoring setup and actionable insights. Basic setup starts at $500; full system with alerts and segmentation is $2,000 – a fraction of potential daily losses.

Timeline and how to order

Basic Lighthouse CI setup — from 1 business day. System with field data and Grafana — from 3 to 5 business days. Full cycle with alerts and segmentation — from 1 to 2 weeks. The cost is calculated individually based on the scope of work. Contact us for a free audit and project evaluation — we will provide a proposal within 24 hours.