2nd/10_Wiki/Topic_Programming/AI_and_ML/Time to Interactive (TTI).md

id, title, category, status, canonical_id, aliases, duplicate_of, source_trust_level, confidence_score, verification_status, tags, raw_sources, last_reinforced, github_commit, tech_stack

id	title	category	status	canonical_id	aliases	duplicate_of	source_trust_level	confidence_score	verification_status	tags	raw_sources	last_reinforced	github_commit	tech_stack
wiki-2026-0508-time-to-interactive-tti	Time to Interactive (TTI)	10_Wiki/Topics	verified	self	TTI Time-to-Interactive	none	A	0.85	applied	web-vitals performance frontend metric		2026-05-10	pending	language framework javascript 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 측정

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)

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)

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

<!-- 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

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)

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)
• 변형: 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