Total Blocking Time（TBT）は、Lighthouseレポートのパフォーマンスセクションで追跡されるメトリックの1つです。各メトリックは、ページの読み込み速度のいくつかの側面をキャプチャします。

TBTが測定するもの

TBT は、マウスクリック、画面タップ、キーボードの押下などのユーザー入力にページが反応しないようにブロックされている時間の合計を測定します。この合計は、First Contentful Paint から Time to Interactive までの間のすべての長いタスクのブロック部分を加算して計算されます。50ms 以上実行されるタスクはすべてロングタスクです。50ms以降の時間がブロッキング部分となります。例えば、Lighthouseが70msの長いタスクを検出した場合、ブロッキング部分は20msとなります。

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

TBTスコアは、モバイルデバイスに読み込まれたときの上位10,000サイトのページのTBT時間とTBT時間の比較です。トップサイトのデータには404ページが含まれています。

TBTスコアを改善する方法

ChromeDevToolsのパフォーマンスパネルを使用して長いタスクの根本原因を診断する方法を学びます。

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

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

全体的なパフォーマンススコアを向上させる方法

特定の指標に焦点を当てる特別な理由がない限り、通常は全体的なパフォーマンススコアの向上に焦点を当てたほうがよいでしょう。

Lighthouseレポートの[ Opportunities]セクションを使用して、ページに最も価値のある改善点を決定します。機会が重要であるほど、パフォーマンススコアへの影響は大きくなります。たとえば、以下のLighthouseのスクリーンショットは、レンダリングブロックリソースを削除すると 最大の改善が得られることを示しています。