TBT削減 — Total Blocking Time最適化ガイド

Total Blocking Time (TBT) の削減

TBTは、FCPからTime to Interactive (TTI) までの間に、メインスレッドが「長いタスク」によってブロックされた合計時間を測定します。長いタスクとは50msを超えるタスクです。ブロッキング時間は50msを超えた部分です。

TBTの計算方法

タスク時間: 250ms → ブロッキング時間: 200ms (250 - 50)
タスク時間: 30ms  → ブロッキング時間: 0ms (閾値以下)
タスク時間: 80ms  → ブロッキング時間: 30ms (80 - 50)

TBT = すべてのブロッキング時間の合計 = 200 + 0 + 30 = 230ms

TBT閾値

評価	値
良好	≤ 200ms
要改善	≤ 600ms
不良	> 600ms

INPのラボ代替指標としてのTBT

TBTはラボ指標（Lighthouseなどの制御環境で測定）であり、INPはフィールド指標です。ただしTBTはINPと強い相関があり、TBTの最適化は一般的にINPを改善します。

最適化戦略

コード分割：

// 動的インポートに分割
const heavyModule = await import('./heavy');

長いタスクの分割：

async function processAll(items) {
  const CHUNK_SIZE = 10;
  for (let i = 0; i < items.length; i += CHUNK_SIZE) {
    const chunk = items.slice(i, i + CHUNK_SIZE);
    chunk.forEach(item => expensiveOperation(item));
    await new Promise(r => setTimeout(r, 0)); // 譲渡
  }
}

ツリーシェイキング： 未使用のエクスポートをバンドラーが除去することを確認します。