Total Blocking Time (TBT)

Total Blocking Time (TBT)

更新済み
Appears in: 指標

Total Blocking Time (合計ブロック時間、TBT) は、読み込みの応答性を測定するために重要となるラボ環境での指標です。ページが確実に操作可能になるまでの間の操作不可能性の重大さの数値化に役立ち、TBT が低ければ低いほどページが確実に使用可能となることを示しています。

TBT とは? #

Total Blocking Time (TBT) 指標は、長時間に渡りメイン スレッドがブロックされ、入力の応答性が妨げられることで発生する First Contentful Paint (視覚コンテンツの初期表示時間、FCP)Time to Interactive (操作可能になるまでの時間、TTI) の間の時間の合計を測定します。

メイン スレッド上で 50 ミリ秒 (ms) 以上実行されているタスクを意味する長く時間がかかっているタスクがある場合、メイン スレッドは "ブロックされた" とみなされます。メイン スレッドが "ブロックされた" と表現されるのは、ブラウザーが進行中のタスクを中断することができないからです。そのため、長く時間がかかっているタスクの途中でユーザーがページを操作した場合、ブラウザーは応答する前にタスクの終了を待たなければなりません。

タスクの処理にかなり長く時間がかかっている場合 (例: 50 ms 以上)、ユーザーはその遅延に気付き、ページが遅い、または質が低いと感じてしまう可能性があります。

特定の長いタスクのブロック時間は、50ミリ秒を超える期間です。また、ページの合計ブロック時間は、FCPとTTIの間で発生する各長いタスクのブロック時間の合計です。

たとえば、ページを読み込んでいる最中のブラウザーのメイン スレッドの図は、以下のようになります。

メイン スレッドでのタスク処理のタイムライン

上記のタイムライン上には 5 つのタスクがあり、そのうちの 3 つは継続時間が 50 ms を超えているため、長く時間がかかっているタスクとなります。以下の図は、長く時間がかかっているタスクそれぞれのブロック時間を示しています。

ブロック時間を示しているメイン スレッドでのタスク処理のタイムライン

このため、メイン スレッドでのタスク実行の総時間は 560 ミリ秒ですが、そのうちの 345 ミリ秒のみがブロック時間としてみなされます。

タスクの継続時間タスクのブロック時間
タスク 1250 ミリ秒200 ミリ秒
タスク 290 ミリ秒40 ミリ秒
タスク 335 ミリ秒0 ミリ秒
タスク 430 ミリ秒0 ミリ秒
タスク 5155 ミリ秒105 ミリ秒
合計ブロック時間345 ミリ秒

TBT は TTI にどのように関係していますか? #

TBTは、ページが確実に操作可能になる前の操作不可能性の重大さの数値化に役立つため、TTI との相性が非常に良い指標です。

TTI は、メイン スレッドに長く時間がかかっているタスクがない状態が少なくとも 5 秒間続いた場合に、そのページを "確実に操作可能" であるとみなします。つまり、51 ミリ秒のタスクが 10 秒の間に 3 つ散らばっている場合、10 秒間の長く時間がかかっているタスク 1 つと同じように TTI を悪化させてしまいます。この 2 つのシナリオは、ページの操作を試みようとするユーザーにとってはまったく異なるものに感じられるはずです。

最初のケースの場合、51 ミリ秒のタスクが 3 つあれば、TBT は 3 ミリ秒になります。一方で、10 秒のタスクが 1 つある場合、TBT は 9950 ミリ秒となります。2 番目のケースで TBT 値が大きくなっているのは、ユーザー体験の悪化を示しています。

TBT の測定方法 #

TBT は、ラボ環境で測定する場合に最適な指標です。TBT の測定に最適な方法には、サイトでの Lighthouse のパフォーマンス監査の実行が挙げられます。使用方法の詳細については、「TBT に関する Lighthouse ドキュメント」を参照してください。

ラボ測定を実施するためのツール #

実際のユーザー環境での TBT の測定は可能ですが、ユーザーの操作がページの TBT に影響を与え、レポートに多数のばらつきが出てしまう可能性があるため、お勧めできません。実際のユーザー環境でのページのインタラクティブ性を理解するためには、First Input Delay (FID) を測定する必要があります。

TBT における良いスコアとは? #

優れたユーザー エクスペリエンスを提供するためには、平均的なモバイル ハードウェアでテストを行った場合に、Total Blocking Time を 300 ミリ秒以下に抑えるよう努力する必要があります。

ページの TBT が Lighthouse のパフォーマンス スコアにどのような影響を及ぼすかについては、「Lighthouse による TBT スコアの決定方法」を参照してください。

TBT の改善方法 #

特定のサイトについて TBT の改善方法を把握するには、Lighthouse でパフォーマンス監査を実行し、そこで推奨される具体的な Opportunities (改善機会) に注目します。

TBT の (あらゆるサイトに共通する) 一般的な改善方法については、以下のパフォーマンス ガイドを参照してください。

最終更新: 記事を改善する