Total Blocking Time(TBT)

TBT とは

Total Blocking Time(TBT)指標は、First Contentful Paint(FCP)後、入力の応答を妨げるのに十分な時間、メインスレッドがブロックされた合計時間を測定します。

デフォルトでは、Lighthouse は操作可能になるまでの時間(TTI)が経過すると TBT のモニタリングを停止します。また、ページの読み込みを測定する他のラボツールも停止します。TBT と TTI の関係をご覧ください。

長時間のタスク(メインスレッドで 50 ミリ秒(ms)を超えて実行されるタスク)が発生すると、メインスレッドは「ブロック中」と見なされます。ブラウザは進行中のタスクを割り込みできないため、メインスレッドは「ブロック」されています。そのため、長いタスクの途中でユーザーがページを操作した場合、ブラウザはタスクが終了するまで待ってから応答する必要があります。

タスクが十分に長い場合(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 と TTI の関係

TBT は一定期間にわたって測定されます。Lighthouse など、従来からページの読み込みを測定していたラボツールの中には、TTI まで TBT を測定していたものがあります。これは、ページがインタラクティブになる際の非インタラクティブ性の度合いを定量化するのに役立つためです。ただし、ページ読み込みの後、さらには TTI を超えても、TBT は引き続き測定される可能性があります(Lighthouse Timespan モードなど)。

TTI は、メインスレッドで長いタスクが少なくとも 5 秒間解放されていた場合、そのページは「確実にインタラクティブ」であるとみなします。つまり、10 秒にわたって 51 ミリ秒の 3 つのタスクがある場合、TTI をプッシュバックできるのは 10 秒のタスクと同じくらいですが、ユーザーがページを操作しようとするユーザーにとっては、これら 2 つのシナリオはまったく異なるように感じられます。

最初のケースでは、51 ミリ秒の 3 つのタスクの TBT は 3 ミリ秒ですが、1 つの 10 秒の長いタスクの TBT は 9,950 ミリ秒です。2 番目のケースの TBT 値が大きいほど、エクスペリエンスが低下します。

この例は、TTI の方が外れ値が発生しにくい TBT のほうがよく見られる理由を示しています。これは、TTI が TBT のエンドポイントとして使用される場合でも同様です。

TBT の測定方法

TBT は、ラボで測定する必要がある指標です。TBT を測定する最良の方法は、サイトで Lighthouse のパフォーマンス監査を実施することです。使用方法の詳細については、TBT に関する Lighthouse のドキュメントをご覧ください。

ラボ用ツール

良い TBT スコアとは何ですか?

優れたユーザー エクスペリエンスを提供するため、サイトの合計ブロック時間を平均的なモバイル ハードウェアでテストしたときは 200 ミリ秒未満に抑える必要があります。

ページの TBT が Lighthouse のパフォーマンス スコアに与える影響について詳しくは、Lighthouse による TBT スコアの決定方法をご覧ください。

TBT を改善する方法

特定のサイトの TBT を改善する方法を確認するには、Lighthouse のパフォーマンス監査を実行し、監査で提案された特定の最適化案を確認します。

任意のサイトで TBT を改善する一般的な方法については、次のパフォーマンス ガイドをご覧ください。