Files

T

koriweb d8a80f6272 chore(wiki): dangling 링크 canonical 정규화 (768파일/1200건)

이름만 다른(표기 변형) [[위키링크]]를 대상 문서의 canonical 제목으로 치환해
끊겼던 1,200개 링크를 연결. 제목/파일명 정규화 일치만 적용하고 별칭 매칭은
과병합 위험으로 제외(애매성 가드). 원본은 _link_reconcile_backup/ 에 백업.
도구: Datacollect/scripts/link_reconcile_apply.mjs

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

2026-06-08 12:24: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, 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