TBT とは？
Total Blocking Time（TBT）指標は、First Contentful Paint（FCP）を実行した後に、メインスレッドが入力の応答性を妨げるのに十分な時間ブロックされていた合計時間を測定します。
Lighthouse では、操作可能になるまでの時間（TTI）が経過すると TBT の監視をデフォルトで停止します。ページ読み込みを測定する他のラボツールと同様です。TBT と TTI の関係を確認してください。
メインスレッドが「ブロック中」と見なされるメインスレッドで 50 ミリ秒を超えて実行される長時間タスクがある場合。メインスレッドが「ブロック」されているブラウザは進行中のタスクを中断できないためです。そのため、長時間のタスクの途中でユーザーがページを操作した場合、ブラウザはタスクが終了するまで待ってから応答する必要があります。
タスクが十分に長い場合（50 ミリ秒を超える場合）、ユーザーは遅延に気づき、ページの表示が遅くなっていると感じる可能性が高くなります。
長時間のタスクのブロック時間は、50 ミリ秒を超える期間となります。ページの合計ブロック時間は、測定された時間枠で、FCP の後に発生する各長いタスクのブロック時間の合計です（通常はページ読み込みツールの場合は TTI、他のツールの場合は合計トレース時間）。
例として、ページ読み込み時のブラウザのメインスレッドについて考えてみましょう。
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">上の図のタイムラインには 5 つのタスクがあり、そのうちの 3 つは実行時間が 50 ミリ秒を超えるため、時間のかかるタスクです。次の図は、長時間のタスクのブロック時間を示しています。
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">メインスレッドでタスクを実行するのに費やされた合計時間は 560 ミリ秒ですが、ブロック時間と見なされるのはそのうちの 345 ミリ秒のみです。
| タスクの実行時間（ミリ秒） | タスクのブロック時間（ミリ秒） | |
|---|---|---|
| タスク 1 | 250 | 200 |
| タスク 2 | 90 | 40 |
| タスク 3 | 35 | 0 |
| タスク 4 | 30 | 0 |
| タスク 5 | 155 | 105 |
| Total Blocking Time（合計ブロック時間） | 345 ミリ秒 | |
TBT と TTI の関係
TBT は一定期間で測定されます。Lighthouse など、従来からページの読み込みを測定していた一部のラボツールでは、TTI までに TBT が測定されています。これは、ページがインタラクティブになる前に、非インタラクティブ レベルの重大度を定量化できるからです。ただし、Lighthouse Timespan モードなどのように、ページの読み込み後など、TTI 以外でも TBT が引き続き測定される可能性があります。
TTI がページを「確実にインタラクティブ」とみなすメインスレッドが長いタスクから 5 秒以上経過している場合。つまり、10 秒にわたって分散した 51 ミリ秒の 3 つのタスクは、10 秒の単一のタスクと同程度に TTI を後押しする効果があります。しかし、この 2 つのシナリオは、ユーザーがページを操作しようとするユーザーにとってはまったく異なると感じられるでしょう。
最初のケースでは、51 ミリ秒の 3 つのタスクの TBT は 3 ミリ秒になります。一方、10 秒の単一のタスクの TBT は 9, 950 ミリ秒になります。2 番目のケースで TBT の値が大きいほど、エクスペリエンスの悪化が定量化されます。
この例は、外れ値が発生する可能性が低いため、TBT が TTI よりも優れた指標であることが多い理由を示しています。これは、TTI を TBT のエンドポイントとして使用する場合にも当てはまります。
TBT の測定方法
TBT は、ラボで測定する必要がある指標です。TBT を測定する最良の方法は、サイトで Lighthouse のパフォーマンス監査を実行することです。使用方法の詳細については、TBT に関する Lighthouse のドキュメントをご覧ください。
ラボツール
で確認できます。 <ph type="x-smartling-placeholder">良い TBT スコアとは何ですか？
優れたユーザー エクスペリエンスを提供するには、合計ブロック時間を平均的なモバイル ハードウェアでテストした場合、200 ミリ秒未満に抑える必要があります。
ページの TBT が Lighthouse のパフォーマンス スコアに与える影響について詳しくは、Lighthouse による TBT スコアの判断方法をご覧ください。
TBT を改善する方法
特定のサイトの TBT を改善する方法については、Lighthouse のパフォーマンス監査を実施して、監査で示された特定の最適化案に注目してください。
サイトを問わず TBT 全般を改善する方法については、次のパフォーマンス ガイドをご覧ください。