TBT とは？
合計ブロック時間（TBT）指標は、コンテンツの初回ペイント（FCP）後にメインスレッドが入力に応答できないほど長くブロックされた合計時間を測定します。
デフォルトでは、Lighthouse はページ読み込みを測定する他のラボツールと同様に、Time to Interactive（TTI）後に TBT のモニタリングを停止します。TBT と TTI の関係を確認してください。
タスクがメインスレッドで 50 ミリ秒を超えて実行される長時間タスクが発生すると、メインスレッドは「ブロック中」と見なされます。ブラウザは進行中のタスクを中断できないため、メインスレッドが「ブロック」されているとします。そのため、長時間のタスクの途中でユーザーがページを操作した場合、ブラウザはタスクが終了するまで待ってから応答する必要があります。
タスクが長すぎる場合（50 ミリ秒を超える場合）、ユーザーは遅延に気づき、ページが遅いか壊れていると認識する可能性があります。
長時間のタスクのブロック時間は、50 ミリ秒を超える期間となります。ページの合計ブロック時間は、測定した時間枠で、FCP の後に発生する各長いタスクのブロック時間の合計です（通常はページ読み込みツールの場合は TTI、他のツールの場合は合計トレース時間）。
例として、ページ読み込み時のブラウザのメインスレッドについて考えてみましょう。
上の図のタイムラインには 5 つのタスクがあり、そのうちの 3 つは実行時間が 50 ミリ秒を超えるため、時間のかかるタスクです。次の図は、長いタスクのブロック時間を示しています。
メインスレッドでタスクを実行するのに費やされた合計時間は 560 ミリ秒ですが、ブロック時間と見なされるのはそのうちの 345 ミリ秒のみです。
| タスクの実行時間（ミリ秒） | タスクのブロック時間（ミリ秒） | |
|---|---|---|
| タスク 1 | 250 | 200 |
| タスク 2 | 90 | 40 |
| タスク 3 | 35 | 0 |
| タスク 4 | 30 | 0 |
| タスク 5 | 155 | 105 |
| Total Blocking Time | 345 ミリ秒 | |
TBT と INP の関係
TBT は INP より前に存在し、INP の問題を示す指標として役立ちます。特に、INP の測定が難しいラボ環境で役立ちます。しかし、TBT は、ユーザーがそのときにやり取りしていなければ、問題がない可能性がある潜在的な問題を報告できます。また、ラボ環境で測定した場合、インタラクションによって発生する問題が検出されないこともあります。実際の反応性の問題としてユーザーが経験した尺度として、実際の INP を測定することをおすすめします。TBT はラボの INP の妥当な代替指標かもしれませんが、それ自体は INP の代替指標ではありません。
TBT と TTI の関係
TBT は一定期間にわたって測定されます。Lighthouse など、従来からページ読み込みを測定している一部のラボツールでは、ページが安定してインタラクティブな状態になるまでの非インタラクティブな状態の重大度を定量化できるため、TBT が TTI まで測定されていました。ただし、Lighthouse Timespan モードなどのように、ページの読み込み後など、TTI 以外でも TBT が引き続き測定される可能性があります。
メインスレッドで長いタスクが 5 秒以上続いていないと、TTI はそのページを「確実にインタラクティブ」とみなします。つまり、10 秒間に 51 ミリ秒のタスクを 3 つ分散すると、10 秒間のタスク 1 つと同じように TTI が遅延する可能性があります。しかし、ページを操作しようとしているユーザーにとっては、この 2 つのシナリオはまったく異なるものとして感じられます。
最初のケースでは、51 ミリ秒の 3 つのタスクの TBT は 3 ミリ秒になります。一方、10 秒の単一のタスクの TBT は 9, 950 ミリ秒になります。2 番目のケースの TBT 値が大きいほど、エクスペリエンスの質が低下しています。
この例は、外れ値が発生しにくいため、多くの場合 TBT が TTI よりも優れた指標である理由を示しています。これは、TBT のエンドポイントとして TTI が使用されている場合でも同様です。
TBT の測定方法
TBT は、ラボで測定する必要がある指標です。TBT を測定する最適な方法は、サイトに対して Lighthouse パフォーマンス アудитを実行することです。使用方法の詳細については、TBT に関する Lighthouse のドキュメントをご覧ください。
実際のフィールドでも TBT を測定できますが、ユーザー インタラクションがページの TBT に大きく影響し、レポートに大きな差異が生じる可能性があるため、おすすめしません。単一の INP インタラクション以外でも確認したい場合は、代わりに新しいフィールドの Long Animations Frame API を確認することをおすすめします。
ラボツール
適切な TBT スコアとは
優れたユーザー エクスペリエンスを提供するには、合計ブロック時間を平均的なモバイル ハードウェアでテストした場合、200 ミリ秒未満に抑える必要があります。
ページの TBT が Lighthouse のパフォーマンス スコアに与える影響について詳しくは、Lighthouse による TBT スコアの判断方法をご覧ください。
TBT を改善する方法
一般に、TBT ではなく INP を重視して最適化することをおすすめします。これは、TBT はラボで INP の代替指標として使用することをおすすめしているためです（通常、INP を正確に測定することはできません）。そのため、TBT を改善するには、INP の最適化に関するガイダンスをご覧ください。
特に TBT に着目する場合は、Lighthouse のパフォーマンス監査を実施して、監査で示された特定のオポチュニティに注意を向けることができます。
一般的に、サイトの TBT を改善するには、ブロックするスクリプトの数を減らす必要があります。つまり、スクリプトを最適化してブロックを減らすか、スクリプトの総数を減らすことができます。次のパフォーマンス ガイドを参照してください。