Total Blocking Time (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 ミリ秒のみがブロック時間としてみなされます。
| タスクの継続時間 | タスクのブロック時間 | |
|---|---|---|
| タスク 1 | 250 ミリ秒 | 200 ミリ秒 |
| タスク 2 | 90 ミリ秒 | 40 ミリ秒 |
| タスク 3 | 35 ミリ秒 | 0 ミリ秒 |
| タスク 4 | 30 ミリ秒 | 0 ミリ秒 |
| タスク 5 | 155 ミリ秒 | 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 における良いスコアとは？ #
優れたユーザー エクスペリエンスを提供するためには、平均的なモバイル ハードウェアでテストを行った場合に、Total Blocking Time を 300 ミリ秒以下に抑えるよう努力する必要があります。
ページの TBT が Lighthouse のパフォーマンス スコアにどのような影響を及ぼすかについては、「Lighthouse による TBT スコアの決定方法」を参照してください。
TBT の改善方法 #
特定のサイトについて TBT の改善方法を把握するには、Lighthouse でパフォーマンス監査を実行し、そこで推奨される具体的な Opportunities (改善機会) に注目します。
TBT の (あらゆるサイトに共通する) 一般的な改善方法については、以下のパフォーマンス ガイドを参照してください。