合計ブロック時間（TBT）は、Lighthouse レポートの [パフォーマンス] セクションで追跡される指標の一つです。各指標は、ページの読み込み速度の特定の側面をキャプチャします。
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.google.cn/static/docs/lighthouse/images/lighthouse-diagnostics.png?authuser=00&hl=ja)
Lighthouse レポートで特定された最適化案に対処する方法については、パフォーマンス監査をご覧ください。