TBTとは？Total Blocking Timeの低下原因と改善方法

TBTとはTotal Blocking Timeの略で、ユーザーが操作可能になるまでの合計時間を指します。ユーザーはWebページにアクセスしてすぐにリンクのクリックやタップ、キーボード入力ができる訳ではありません。Webページが読み込み完了し操作可能になるまで一定の時間がかかります。PageSpeed Insights（ページスピードインサイト）ではこの待ち時間をTBTとしてスコア表示しています。

Core Web Vitals（コアウェブバイタル）の3指標の一つINP（Interaction to Next Paint）はユーザーアクションに対する応答速度の数値ですが、このINPに関わる指標がTBTです。INPのスコア計測はツールでリアルタイムに行うものではなく、PageSpeed Insightsでもユーザーアクションの結果を表示しているのみです。しかし、TBTはリアルタイムで計測できます。なのでINPに繋がる改善としてTBT改善に取り組むことが可能です。

TBTの計測方法

TBTの計測はPageSpeed Insightsで可能です。TBTのレポートはミリ秒単位で表示されます。TBTスコアは緑（高速：0〜200ミリ秒未満）、オレンジ（中程度：200ミリ秒以上〜600ミリ秒以下）、赤（遅い：600ミリ秒超）です。

TBTスコアが低い場合、ユーザーがリンクをクリックしてもページ遷移しないといったストレスが発生している状況です。サイトから離脱して他のWebページ閲覧へ繋がることもあるのでTBT改善へ取り組むべきと言えます。

TBTの低下原因

TBT低下の要因となるのは以下です。

• ページの肥大化（HTMLタグの数と深さ）
• JavaScriptの読み込みと実行

INPの低下原因の一部と重なります。なお、INP対策についてはこちらをご覧ください。

TBT改善方法

上記TBT低下要因への改善方法としては以下です。

• HTML軽量化
• HTMLの階層を浅くする
• JavaScriptを厳選する、使用していないJavaScriptの削除
• JavaScriptの非同期化、読み込みの優先順位をコントロール

TBTへの対応はHTMLとJavaScriptなのですが、小規模サイトの場合は対応に問題はないでしょう。しかし、コンテンツ量が多くJavaScriptを多用しているような大規模サイトの場合は対応が困難なケースも起こります。

PageSpeed Insightsでいうと「過大な DOM サイズの回避」「メインスレッド処理の最小化」で指摘される部分となりますが、この改善をする場合、以下のようにサイト設計の見直しが発生する場合も考えられます。

• コンテンツ量の見直し
• PCとモバイルでコンテンツを切り分け、モバイルはコンテンツの要素を厳選する
• JavaScriptの使用箇所を見直す
• JavaScriptライブラリを使用している場合、使用しているページのみ読み込むようにする

特にコンテンツの見直しはSEO担当者だけで決められる問題ではなく会社全体で考える問題となります。そのためWebサイトのリニューアルをする際はあらかじめPageSpeed Insights対策も含めて話を進めることをご提案いたします。