TTI (Time To Interactive): Understanding the Metric

Publication date: 14 Apr 2025

TTI (Time To Interactive) is a key performance metric that measures how many seconds it takes for a page to become fully responsive after loading: users can click, scroll, and interact with elements without delays.

Why TTI Matters

1. Impact on User Experience:

• If a site “freezes” after loading, 53% of users will close it (Google data);
• The optimal TTI is under 3.5 seconds (Lighthouse recommendation). Exceeding this value increases bounce rates.

2. Indirect SEO Influence

While TTI isn’t part of Core Web Vitals, it’s closely related to:

• INP (Interaction to Next Paint) – should be ≤200ms (the key responsiveness metric since 2024);
• LCP (Largest Contentful Paint) – critical for SEO, should be ≤2.5 seconds;
• High TTI often indicates JavaScript issues that degrade INP and LCP.

3. Reveals True Performance

• A page might display content quickly (good LCP) but remain “unclickable” due to long JS tasks. TTI exposes this issue.

By the way, if you work with PWAs (Progressive Web Apps), optimizing TTI is a key success factor. Learn more in our article «PWA in 2025: Boosting Conversions Without Mobile Apps».

How TTI Is Calculated

The metric is determined in three stages:

1. FCP (First Contentful Paint) – when the first content element appears.
2. Long Tasks Analysis – detects JS tasks blocking the main thread (>50ms).
3. 5-second stability window – if no long tasks occur for 5 seconds after FCP, TTI is recorded.

Recommended Values (per Lighthouse):

Note: For SEO, prioritize INP and LCP, but optimizing TTI helps improve them.

How to Improve TTI?

1. JavaScript Optimization:

• Code splitting + tree shaking (removing unused code);
• Async/defer script loading (`async`/`defer`).

2. Reduce Code Execution Time:

• JS/CSS minification (Webpack, Terser);
• Lazy-loading non-critical scripts (`lazy-load`).

3. Server Optimization:

• Caching (CDN, `Cache-Control`);
• Resource preloading (`<link rel=”preload”>`).

4. Third-Party Script Control

• Analytics, chats, and widgets often slow TTI. Load them after main content.

How to Measure TTI (Time To Interactive)?

• Chrome DevTools → Performance tab.
• Lighthouse → Core Web Vitals report.
• WebPageTest → Detailed metric analysis.

Example Issue:

• FCP: 1.8s → Long Tasks: 2.5s → TTI: 6.3s (requires JS optimization).

TTI is a crucial performance indicator, especially for PWAs and complex web apps. While it doesn’t directly affect SEO, optimizing it improves INP and user experience – critical for conversions.