---
id: wiki-2026-0508-time-to-interactive-tti
title: Time to Interactive (TTI)
category: 10_Wiki/Topics
status: verified
canonical_id: self
aliases: [TTI, Time-to-Interactive]
duplicate_of: none
source_trust_level: A
confidence_score: 0.85
verification_status: applied
tags: [web-vitals, performance, frontend, metric]
raw_sources: []
last_reinforced: 2026-05-10
github_commit: pending
tech_stack:
  language: javascript
  framework: lighthouse-web-vitals
---

# Time to Interactive (TTI)

## 매 한 줄
> **"매 page가 user input에 reliably 반응할 수 있는 시점"**. 2018 Lighthouse에 도입된 TTI는 main thread quiet window를 측정. 2024년 INP (Interaction to Next Paint) 가 Core Web Vitals 의 official replacement 가 되었지만, TTI는 lab-time diagnostic 으로 여전히 유용.

## 매 핵심

### 매 정의 (Lighthouse algorithm)
- **First Contentful Paint** 이후 시작.
- 5-second quiet window: long task (>50ms) 가 없는 구간.
- network: 동시 in-flight request ≤ 2.
- 매 quiet window 의 시작 시점 = TTI.

### 매 vs other metrics
| Metric | Measures | Status (2026) |
|---|---|---|
| **FCP** | First Contentful Paint | active |
| **LCP** | Largest Contentful Paint | Core Web Vital |
| **TTI** | Main thread quiet | lab only |
| **TBT** | Total Blocking Time | lab proxy for TTI |
| **INP** | Interaction → Next Paint | Core Web Vital (2024+ replaces FID) |

### 매 왜 INP가 TTI를 대체했는가
- TTI 는 lab-only, single point — real user의 interaction 반영 X.
- INP 는 75th percentile of all interactions — full session 반영.
- TTI는 여전히 lab regression detection 에 유용.

### 매 응용
1. CI performance budget (Lighthouse score).
2. Pre-launch regression detection.
3. JS bundle size impact 측정.

## 💻 패턴

### Pattern 1: Lighthouse CLI 측정
```bash
npx lighthouse https://example.com \
  --only-categories=performance \
  --output=json \
  --chrome-flags="--headless" \
  --output-path=./report.json

jq '.audits["interactive"].numericValue' report.json
```

### Pattern 2: Web Vitals JS (real user, INP)
```javascript
import { onINP, onLCP, onCLS } from 'web-vitals/attribution';

onINP((metric) => {
  navigator.sendBeacon('/analytics', JSON.stringify({
    name: 'INP',
    value: metric.value,
    rating: metric.rating,
    target: metric.attribution?.interactionTarget,
  }));
});
```

### Pattern 3: Reduce TTI — code splitting (React)
```javascript
import { lazy, Suspense } from 'react';

const HeavyChart = lazy(() => import('./HeavyChart'));

export function Dashboard() {
  return (
    <Suspense fallback={<Skeleton />}>
      <HeavyChart />
    </Suspense>
  );
}
```

### Pattern 4: Defer non-critical scripts
```html
<!-- Critical: render-blocking ok -->
<script src="/critical.js"></script>

<!-- Non-critical: defer until after parse -->
<script src="/analytics.js" defer></script>

<!-- Independent: async -->
<script src="/ads.js" async></script>
```

### Pattern 5: Long task observer
```javascript
const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    if (entry.duration > 50) {
      console.warn('Long task', entry.name, entry.duration);
      // breakup with scheduler.yield() (2026 baseline)
    }
  });
});
observer.observe({ entryTypes: ['longtask'] });
```

### Pattern 6: scheduler.yield (2026)
```javascript
async function processItems(items) {
  for (const item of items) {
    process(item);
    if (navigator.scheduling?.isInputPending()) {
      await scheduler.yield();  // yield to user input
    }
  }
}
```

## 매 결정 기준
| 상황 | 매 metric |
|---|---|
| RUM (production users) | INP + LCP |
| Lab regression in CI | TTI / TBT |
| Initial render speed | FCP / LCP |
| Layout stability | CLS |

**기본값**: INP + LCP for RUM, TBT for lab CI gates.

## 🔗 Graph
- 부모: [[Web Performance]] · [[Core Web Vitals Optimization (INP, LCP, CLS)|Core Web Vitals]]
- 변형: [[INP]] · [[LCP]] · [[TBT]] · [[FID]]
- 응용: [[Lighthouse]] · [[Code Splitting]]
- Adjacent: [[Service Worker]] · [[React Server Components — 경계 의식]]

## 🤖 LLM 활용
**언제**: lab performance regression, JS bundle audit, frontend optimization.
**언제 X**: production user-facing metric (use INP instead).

## ❌ 안티패턴
- **TTI as RUM metric**: TTI 는 lab-only. real user 측정에 사용 X.
- **Optimizing for TTI alone**: LCP / CLS / INP 의 무시.
- **Synchronous third-party scripts**: ads, analytics 의 sync 로딩 → TTI 폭발.
- **Hydration-only SPA**: massive JS bundle → bad TTI. Use SSR + Islands / RSC.

## 🧪 검증 / 중복
- Verified (web.dev/tti, Lighthouse v12, Chrome DevRel 2024 INP migration guide).
- 신뢰도 A.

## 🕓 Changelog
| 날짜 | 변경 |
|---|---|
| 2026-05-08 | Phase 1 |
| 2026-05-10 | Manual cleanup — TTI definition + INP migration context |