Files

T

Antigravity Agent 9a135bd19d docs(10_Wiki): Topic_Business/General/Graphic/Programming을 Topics/ 하위로 이동

최상위 10_Wiki/Topic_*였던 4개 카테고리 폴더를 10_Wiki/Topics/Topic_* 로 재배치.
콘텐츠 변경 없음(순수 폴더 이동) — Topics/ 하위 나머지 폴더는 이미 지난 커밋에서
전부 정리된 상태(잔존 항목은 에이전트 운영 상태 및 사용자가 보존을 요청한
업데이트0615/무제 3.canvas 뿐).

2026-07-05 00:44:01 +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, 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

4.8 KiB Raw Blame History