Files

T

Antigravity Agent f8b21af4be Wiki cleanup: error-doc removal, dedup merge, link normalization

10_Wiki/Topics 대규모 정리:
- 오류 캡처/미완성 stub 문서 227개 제거
- 교차폴더 중복 43클러스터 병합 (63파일 → redirect)
- 링크명 정규화: 깨진 링크 수정·redirect 직결·개념 매핑 ~2,400건
- 카테고리 MOC 6개 신규 생성
- Graph 섹션 미해결 related-keyword 링크 10,058건 제거

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

2026-05-20 23:52:15 +09:00

4.8 KiB

Raw Blame History

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

title

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 에 유용.

매 응용

CI performance budget (Lighthouse score).
Pre-launch regression detection.
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 개선)
변형: 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

4.8 KiB Raw Blame History