Total Blocking Time (合計ブロック時間)

Total Blocking Time（TBT）は、Lighthouseレポートの**[パフォーマンス]**セクションで追跡されるメトリックの1つです。各メトリックは、ページの読み込み速度に関する要素を部分的に取り込みます。

Lighthouseのレポートには、TBTがミリ秒単位で表示されます。

# TBTが測定するもの

TBTは、マウスのクリック、画面のタップ、キーボードの押下といったユーザー入力への応答がブロックされている合計時間を測定します。合計は、First Contentful Paint (最初のコンテンツ描画にかかるまでの時間) と Time to Interactive (インタラクティブになるまでの時間) の間に実行されるすべての長いタスクのブロック部分を加算することで算出されます。長いタスクとは、50ミリ秒を超えて実行されるタスクのことです。50msを超えた後の時間がブロック部分です。たとえば、Lighthouseが70ミリ秒の長さのタスクを検出した場合、ブロック部分は20ミリ秒になります。

# LighthouseがTBTスコアを決定する方法

サイトのTBTスコアとは、モバイルデバイスに読み込まれたときのページのTBT時間と数百万の実在するサイトのTBT時間とを比較したものです。 Lighthouseスコアのしきい値が設定される仕組みについては、How metric scores are determined (メトリックスコアの決定方法)を参照してください。

この表は、TBTスコアを解釈する方法を示しています。

# TBTスコアを改善する方法

Chrome DevToolsのパフォーマンスパネルを使用して長いタスクの根本原因を診断する方法をWhat is causing my long tasks? (長いタスクが発生する原因は何ですか？)と題した記事に記載していますので、ぜひ参照してください。

一般に、長いタスクの最も一般的な原因は次のとおりです。

• JavaScriptによる不要な読み込み、解析、または実行。パフォーマンスパネルでコードを分析していると、メインスレッドによってページの読み込みには不必要な作業が実行されていることに気付くことがあるかもしれません。コードを分割してJavaScriptのペイロードを削減する、未使用のコードを除去する、またはサードパーティのJavaScriptを効率的に読み込むことを実践すれば、TBTスコアが向上するはずです。
• JavaScriptの非効率的なステートメント。たとえば、[パフォーマンス]パネルでコードを分析した後、2000個のノードを返すdocument.querySelectorAll('a')の呼び出しがあることに気付くとします。10個のノードのみを返すもっと具体的なセレクタを使用するようにコードをリファクタリングすれば、TBTスコアは向上するはずです。

# How to improve your overall Performance score

Unless you have a specific reason for focusing on a particular metric, it's usually better to focus on improving your overall Performance score.

Use the Opportunities section of your Lighthouse report to determine which improvements will have the most value for your page. The more significant the opportunity, the greater the effect it will have on your Performance score. For example, the Lighthouse screenshot below shows that eliminating render-blocking resources will yield the biggest improvement:

See the Performance audits landing page to learn how to address the opportunities identified in your Lighthouse report.

# リソース

• Total BlockingTime監査のソースコード
• Are long JavaScript tasks delaying your Time to Interactive? (JavaScriptの長いタスクがインタラクティブになるまでの時間を遅らせていませんか？)
• Optimize First Input Delay (最初の入力の遅延を最適化する)
• First Contentful Paint (最初のコンテンツ描画にかかるまでの時間)
• Time to Interactive (インタラクティブになるまでの時間)
• Reduce JavaScript payloads with code splitting (コードを分割してJavaScriptのペイロードを削減する)
• Remove unused code (未使用のコードを除去うする)
• Efficiently load third-party resources (サードパーティのリソースを効率的に読み込む)