2nd/10_Wiki/Topics/Frontend/Total Blocking Time (TBT).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-total-blocking-time-tbt	Total Blocking Time (TBT)	10_Wiki/Topics	verified	self	TBT Total Blocking Time	none	A	0.9	applied	web-vitals performance lab-metric frontend		2026-05-10	pending	language framework javascript web-vitals

Total Blocking Time (TBT)

매 한 줄

"매 FCP 의 TTI 사이 의 long-task blocking 의 sum". TBT 의 lab metric 의 user-perceived input responsiveness 의 quantify, 매 each long task (>50ms) 의 50ms-over portion 의 add. 매 2026: INP 의 field metric 의 promote 의 후 의 TBT 의 lab proxy 의 critical, 매 Lighthouse / WebPageTest 의 score 의 driver.

매 핵심

매 정의

• Long task: main thread 의 50ms 의 over 의 continuous 의 block.
• Blocking portion: long task duration 의 (duration − 50ms).
• TBT: FCP 의 ~ TTI 사이 의 모든 long task 의 blocking portion 의 sum.
• Threshold (2026): Good <200ms · Needs Improvement 200–600ms · Poor >600ms.

매 INP 의 차이

• TBT: lab, FCP→TTI window, all long task의 sum.
• INP: field (RUM), 매 user interaction 의 worst (98th %ile-ish), 매 single-event latency.
• 매 correlation 의 high — 매 TBT 의 fix 의 INP 의 usually improve.

매 응용

1. CI 의 Lighthouse budget 의 regression gate.
2. Bundle bloat 의 detect (parse/compile time spike).
3. Hydration cost 의 SSR/SSG framework 의 measure.
4. Third-party script 의 main-thread cost 의 audit.

💻 패턴

Measure 의 PerformanceObserver

const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    const blocking = Math.max(0, entry.duration - 50);
    console.log(`Long task: ${entry.duration.toFixed(0)}ms (blocking ${blocking.toFixed(0)}ms)`);
  }
});
observer.observe({ type: 'longtask', buffered: true });

Lighthouse CI assertion

{
  "ci": {
    "assert": {
      "assertions": {
        "total-blocking-time": ["error", { "maxNumericValue": 200 }],
        "interactive": ["warn", { "maxNumericValue": 3500 }]
      }
    }
  }
}

web-vitals lib (TTFB+TBT-ish 의 INP 의 use)

import { onINP, onLCP, onCLS, onTTFB } from 'web-vitals';
onINP(({ value, rating }) => analytics.send('inp', { value, rating }));
// 매 TBT 의 field 의 X — 매 lab 의 only

Yield to scheduler (break long task)

async function processItems(items) {
  for (let i = 0; i < items.length; i++) {
    work(items[i]);
    if (i % 100 === 0) {
      await scheduler.yield(); // 매 Chrome 129+ 의 baseline
    }
  }
}

Defer non-critical script

<!-- 매 main bundle -->
<script type="module" src="/app.js"></script>
<!-- 매 analytics 의 idle 의 defer -->
<script>
  requestIdleCallback(() => {
    const s = document.createElement('script');
    s.src = 'https://analytics.example.com/tag.js';
    s.async = true;
    document.head.appendChild(s);
  });
</script>

Web Worker offload

const worker = new Worker('/heavy-parse.js', { type: 'module' });
worker.postMessage(largeJsonString);
worker.onmessage = (e) => updateUI(e.data);

Code split / lazy hydrate

// React 19 / Next.js 의 example
import { lazy, Suspense } from 'react';
const Heavy = lazy(() => import('./HeavyChart'));

<Suspense fallback={<Skeleton />}>
  <Heavy />
</Suspense>

Long-task budget script

let totalBlocking = 0;
const obs = new PerformanceObserver((list) => {
  for (const e of list.getEntries()) totalBlocking += Math.max(0, e.duration - 50);
});
obs.observe({ type: 'longtask', buffered: true });
window.addEventListener('load', () => {
  if (totalBlocking > 200) console.warn('TBT budget exceeded:', totalBlocking);
});

매 결정 기준

상황	Approach
Bundle parse cost 의 high	code split + dynamic import
Hydration block	partial / progressive hydration (Astro, Qwik, React 19 RSC)
Third-party script	facade pattern, defer, web worker (Partytown)
Heavy compute 의 sync	Web Worker 또는 scheduler.yield
Re-render cascade	memoization, virtualization

기본값: 매 200ms TBT 의 target — 매 long task 의 50ms 의 budget 의 hold, 매 yield 의 use.

🔗 Graph

• 부모: Web Vitals

🤖 LLM 활용

언제: 매 CI 의 lab regression 의 detect, 매 PR 의 main-thread cost 의 review. 언제 X: 매 real-user experience 의 measure — 매 INP / RUM 의 prefer.

❌ 안티패턴

• TBT 의 only 의 optimize 의 INP 의 ignore: 매 lab 의 fast, 매 user 의 slow 의 case.
• Synchronous JSON.parse 의 large payload: 매 single long task 의 block — 매 stream 또는 worker.
• setTimeout(0) 의 yield 의 substitute: 매 4ms minimum delay — 매 scheduler.yield 의 use.
• Third-party 의 <script> blocking head: 매 TBT 의 30%+ 의 typical.
• Hydration 의 entire app 의 sync: 매 SSR 의 benefit 의 erase — 매 island / partial.

🧪 검증 / 중복

• Verified (web.dev TBT, Lighthouse 12+ scoring, W3C Long Tasks API).
• 신뢰도 A.

🕓 Changelog

날짜	변경
2026-05-08	Phase 1
2026-05-10	Manual cleanup — TBT vs INP, scheduler.yield, lab budget