2nd/10_Wiki/Topics/Frontend/Total Blocking Time (TBT).md

---
id: wiki-2026-0508-total-blocking-time-tbt
title: Total Blocking Time (TBT)
category: 10_Wiki/Topics
status: verified
canonical_id: self
aliases: [TBT, Total Blocking Time]
duplicate_of: none
source_trust_level: A
confidence_score: 0.9
verification_status: applied
tags: [web-vitals, performance, lab-metric, frontend]
raw_sources: []
last_reinforced: 2026-05-10
github_commit: pending
tech_stack:
  language: javascript
  framework: 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
```javascript
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
```json
{
  "ci": {
    "assert": {
      "assertions": {
        "total-blocking-time": ["error", { "maxNumericValue": 200 }],
        "interactive": ["warn", { "maxNumericValue": 3500 }]
      }
    }
  }
}
```

### web-vitals lib (TTFB+TBT-ish 의 INP 의 use)
```javascript
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)
```javascript
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
```html
<!-- 매 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
```javascript
const worker = new Worker('/heavy-parse.js', { type: 'module' });
worker.postMessage(largeJsonString);
worker.onmessage = (e) => updateUI(e.data);
```

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

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

### Long-task budget script
```javascript
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 |