Time To Interactive (TTI)

Last updated July 20, 2025

Time To Interactive (TTI) is a web performance metric that measures how long it takes for a page to become fully interactive — meaning it responds quickly to user input without lag. A page may look fully loaded visually, but if JavaScript is still blocking the main thread, it’s not truly usable.

TTI is critical for user satisfaction, especially on mobile. A page that looks ready but isn’t responsive can lead to frustration, rage clicks, or bounces.

What it measures

TTI is defined as the time from the initial page load until:

  • The page displays useful content (FCP)
  • Event handlers are registered for most visible elements
  • The page responds to user input within 50ms

It captures how long the browser’s main thread is blocked and whether the JavaScript has stabilized enough to allow input processing.

Why it matters (UX/SEO impact)

Pages with poor TTI feel sluggish and unresponsive, especially on mobile or low-end devices. Even with fast First Contentful Paint (FCP), if TTI is delayed, users may try to click or scroll but nothing happens.

UX impact of high TTI:

  • Unresponsive UI elements (buttons, links)
  • Input delays or skipped gestures
  • Increased bounce rate
  • Reduced Core Web Vitals performance score

While TTI is not part of the three Core Web Vitals, it heavily influences Interaction to Next Paint (INP) and can affect your Lighthouse performance score.

Relation to other Web Vitals

  • FCP measures when content appears
  • TTI measures when the page can respond
  • INP measures interaction latency after TTI

In essence: FCP shows, TTI responds, INP continues responding well.

Common Causes of Poor TTI

  • Heavy synchronous JavaScript blocking the main thread
  • Long JavaScript execution time
  • Large frameworks and unnecessary polyfills
  • Too many DOM elements or layout thrashing
  • Third-party scripts running early

How TTI is Measured

TTI is measured by simulating page load in a controlled environment and observing the browser’s main thread activity. It looks for a 5-second window where the main thread is quiet (long tasks < 50ms), and input is consistently responsive.

  1. const { lhr } = await lighthouse(url, { ... });
  2. console.log('TTI:', lhr.audits['interactive'].displayValue);

TTI is available in Lighthouse, WebPageTest, and lab tools — but not reliably measured in the field due to its reliance on CPU simulation.

What is a Good TTI Score?

  • Good: ≤ 3.8s
  • Needs Improvement: 3.9s – 7.3s
  • Poor: > 7.3s
Score Scale
3.8s
7.3s

Good TTI should be achieved on 75% of visits or more — especially under mobile CPU emulation and throttled networks in Lighthouse tests.

How to Improve TTI

1. Minimize JavaScript Execution Time

Audit and split bundles. Avoid unnecessary scripts on first load. Use code-splitting and route-level loading where possible.

  1. // Webpack split example
  2. import('./feature-module.js').then(initFeature);

2. Defer Non-Critical JavaScript

Move scripts that aren’t needed immediately to after interactivity.

  1. <script src="analytics.js" defer></script>
  2. <script src="chat-widget.js" defer></script>

Use defer or async depending on script behavior.

3. Prioritize Visible Content

Render the minimal above-the-fold HTML first and lazy-load everything else.

  • Inline critical CSS
  • Use <link rel="preload"> for fonts and hero images
  • Defer ads and carousels

4. Reduce Long Tasks

Break large JS tasks into smaller async chunks using requestIdleCallback or setTimeout.

  1. requestIdleCallback(() => {
  2.   loadHeavyWidget();
  3. });

5. Audit Third-Party Scripts

Use only necessary third-party libraries. Delay or lazy-load marketing and tracking pixels when possible.

  • Use tag managers to control load order
  • Host analytics scripts yourself to gain caching control

Monitoring and Continuous Testing

Use Testdom.io to monitor TTI over time using consistent lab conditions:

  • Compare TTI across desktop and mobile
  • Track impact of deploys on interactivity
  • Receive alerts when TTI exceeds thresholds

Sample Puppeteer-based monitoring script:

  1. const { lhr } = await lighthouse(url, options);
  2. console.log('TTI:', lhr.audits['interactive'].numericValue);

Keeping TTI low ensures your page not only looks fast — it feels fast to your users.