Total Blocking Time（TBT）は、Lighthouse レポートの [Performance] セクションでトラッキングされる指標のひとつです。各指標は、ページの読み込み速度に関するなんらかの要素をキャプチャします。
Lighthouse のレポートでは、TBT がミリ秒単位で表示されます。
TBT が測定するもの
TBT は、ページがユーザー入力（マウスクリック、画面のタップ、キーボードの押下など）に応答できない状態の合計時間を測定します。合計は、First Contentful Paint と操作可能になるまでの時間の間のすべての長いタスクのブロック部分を加算して計算されます。実行時間が 50 ミリ秒を超えるタスクは長時間のタスクです。50 ミリ秒後の時間がブロッキング部分です。たとえば、Lighthouse で 70 ミリ秒のタスクが検出された場合、ブロッキング部分は 20 ミリ秒になります。
Lighthouse による TBT スコアの算出方法
TBT スコアは、モバイル デバイスに読み込まれたページの TBT 時間と、何百万もの実際のサイトを TBT をかけた値を比較したものです。Lighthouse のスコアしきい値の設定方法については、指標スコアの決定方法をご覧ください。
次の表に、TBT スコアの解釈方法を示します。
| TBT 時間 （ミリ秒単位） |
色分け |
|---|---|
| 0 ～ 200 | 緑（高速） |
| 200-600 | オレンジ（中） |
| 600 超 | 赤（遅い） |
TBT スコアを改善する方法
Chrome DevTools の [パフォーマンス] パネルで、処理に時間がかかるタスクの根本原因を診断する方法については、処理に時間がかかるタスクの原因をご覧ください。
一般的に、処理に時間がかかるタスクの最も一般的な原因は次のとおりです。
- 不要な JavaScript の読み込み、解析、実行。[パフォーマンス] パネルでコードを分析しているときに、メインスレッドがページの読み込みに実際には必要のない処理を行っていることに気づく場合があります。コード分割による JavaScript ペイロードの削減、未使用のコードの削除、サードパーティの JavaScript の効率的な読み込みによって、TBT スコアが改善されます。
- 非効率的な JavaScript ステートメント。たとえば、[パフォーマンス] パネルでコードを分析した結果、2,000 ノードを返す
document.querySelectorAll('a')呼び出しがあるとします。10 ノードのみを返す、より具体的なセレクタを使用するようにコードをリファクタリングすると、TBT スコアが改善されます。
全体的なパフォーマンス スコアを改善する方法
特定の指標に焦点を当てる特別な理由がない限り、通常は全体的なパフォーマンス スコアの改善に集中することをおすすめします。
Lighthouse レポートの [最適化] セクションを使用して、ページにとって最も価値のある改善点を特定してください。最適化案が大きいほど、パフォーマンス スコアへの影響も大きくなります。たとえば、以下の Lighthouse のスクリーンショットは、レンダリング ブロック リソースを削除することで最大の改善が得られることを示しています。
![Lighthouse: [最適化] セクション](https://developer.chrome.com/static/docs/lighthouse/performance/interactive/image/lighthouse-opportunities-ec2197d9dce25_1920.png?authuser=0&hl=ja)
Lighthouse レポートで特定された機会に対処する方法については、パフォーマンス監査のランディング ページをご覧ください。