Time To Interactive (TTI)
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.
- const { lhr } = await lighthouse(url, { ... });
- 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

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.
- // Webpack split example
- import('./feature-module.js').then(initFeature);
2. Defer Non-Critical JavaScript
Move scripts that aren’t needed immediately to after interactivity.
- <script src="analytics.js" defer></script>
- <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.
- requestIdleCallback(() => {
- loadHeavyWidget();
- });
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:
- const { lhr } = await lighthouse(url, options);
- console.log('TTI:', lhr.audits['interactive'].numericValue);
Keeping TTI low ensures your page not only looks fast — it feels fast to your users.