TBT とは何ですか？
合計ブロック時間（TBT）指標は、コンテンツの初回ペイント（FCP）の後にメインスレッドが入力に応答できないほど長くブロックされた合計時間を測定します。
デフォルトでは、Lighthouse はページ読み込みを測定する他のラボツールと同様に、Time to Interactive（TTI）後に TBT のモニタリングを停止します。TBT と TTI の関係をご覧ください。
メインスレッドは、メインスレッドで 50 ミリ秒を超えて実行されるタスクである長時間タスクがある場合は常に「ブロックされている」と見なされます。ブラウザは進行中のタスクを中断できないため、メインスレッドが「ブロックされている」と表現します。そのため、長いタスクの途中でユーザーがページを操作した場合、ブラウザはタスクが完了するまで待機してから応答する必要があります。
タスクが長すぎる場合（50 ミリ秒を超える場合）、ユーザーは遅延に気づき、ページが遅いか壊れていると感じる可能性があります。
特定の長いタスクのブロック時間は、50 ミリ秒を超える所要時間です。ページの合計ブロック時間は、測定期間中に FCP 後に発生した長いタスクのブロック時間の合計です（通常は、ページ読み込みツールの TTI または他のツールの合計トレース時間）。
たとえば、ページの読み込み中のブラウザのメインスレッドの次の図について考えてみましょう。
上の画像に示すタイムラインには 5 つのタスクがあります。そのうち 3 つは、長さが 50 ミリ秒を超えるため Long Task です。次の図は、長いタスクごとのブロック時間を示しています。
したがって、メインスレッドでタスクの実行に費やされた合計時間は 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 まで測定されていました。ただし、TBT は、ページの読み込み後も、TTI を超えて測定することもできます（Lighthouse の期間モードなど）。
TTI では、メインスレッドで長いタスクが 5 秒以上実行されていない場合、ページは「信頼できるインタラクティブ」と見なされます。つまり、10 秒間に 51 ミリ秒のタスクを 3 つ分散すると、10 秒間のタスク 1 つと同じように TTI が遅延する可能性があります。しかし、ページを操作しようとしているユーザーにとっては、この 2 つのシナリオはまったく異なるものとして感じられます。
最初のケースでは、3 つの 51 ミリ秒のタスクの TBT は 3 ミリ秒になります。一方、10 秒間のタスクが 1 つある場合、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 を改善するには、ブロック スクリプトの量を減らす必要があります。つまり、ブロックを減らすようにスクリプトを最適化するか、スクリプトの量を全体的に減らす必要があります。次のパフォーマンス ガイドを参照してください。