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

公開日 更新日

翻訳先言語: English, Español, Português, 한국어, 中文, Pусский

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

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

LighthouseのTotal Blocking Time (合計ブロック時間) 監査のスクリーンショット

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時間
(ミリ秒単位)
色分け
0〜200緑(速い)
200〜600オレンジ(中程度)
600以上赤(遅い)

See the Lighthouse performance scoring post to learn how your page's overall performance score is calculated.

TBTスコアを改善する方法

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

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

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

JavaScriptによる不要な読み込みや解析、実行を見つければ、多くのサイトでは改善につなげる大きなチャンスとなります。

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:

Lighthouse: Opportunities section

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

リソース

最終更新日: 記事を改善する

We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.