Total Blocking Time (TBT)
Total Blocking Time (TBT)とは
Total Blocking Time (TBT)の基礎知識
優れたユーザー エクスペリエンスを確実に提供するには、注目すべき指標がいくつかあり、Total Blocking Time (TBT) もその 1 つです。Total Blocking Time (TBT)を日本語にすると合計ブロック時間。合計ブロッキング時間 (TBT) は、 LighthouseやPageSpeed Insights のパフォーマンスレポートで追跡される指標の1つです。
Webサイト上のいずれかの要素をクリックしてもしばらく応答しなくなったという経験はありませんか。
このWeb サイトが壊れているか、ネットワーク接続に問題があるのではないかと考えるのではないでしょうか。
どちらも原因でない場合は、「Total Blocking Time (TBT：合計ブロック時間)」の経験です。
このTotal Blocking Time (TBT) 指標は、長時間にわたり、メインスレッドがブロックされ、入力の応答性が妨げられることで発生する First Contentful Paint (視覚コンテンツの初期表示時間、FCP) と Time to Interactive (操作可能になるまでの時間、TTI) の間の時間の合計を測定します。
Total Blocking Time (TBT)とは何か、わかりやすく解説
上述の解説ではピンとこない人も多いのではないでしょうか。Webサイトの表示の流れをまず解説します。
ユーザーが Web サイトをリクエストすると、ブラウザーはメインスレッド(ブラウザーがユーザーのイベントや描画を処理するところ)を使用して、HTML を解析し、DOM を構築し、CSS や Javascript を使用して各要素のスタイルを実行し、ユーザーのビューポート（表示されている領域）にページをレンダリングするその他の重要なタスクを実行します。
下記は、Chrome Devtoolsを使って、メインスレッドでどのようにタスクが実行されているかを可視化したものです。
長いタスクが発生すると、どの時点でもメインスレッドがブロックされます。これが発生すると、ブラウザーはタスクを停止したり中断したりすることができず、タスクが完了するまでユーザー入力に応答しません。
Total Blocking Time (TBT) は、First Contentful Paint (FCP)とTime to Interactive (TTI)の間のすべての長いタスクの合計を見つけることによって測定されます。
長いタスクの合計からTotal Blocking Time (TBT)を算出
長いタスクとは、メインスレッドでの実行に 50 ミリ秒以上かかるタスクです。
下記の例は、web.devの「Total Blocking Time (TBT)」から引用しています。
下記はブラウザの読み込みイベントのメイン スレッドです。
上記の読み込みイベントには 5 つのタスク (タスク 1 ～ 5) があり、そのうち 3 つ (タスク 1、2、および 5) は 50 ミリ秒を超えるため長いタスクです。
このイベントの読み込み時間の合計は 560 ミリ秒となり、そのうちの 345 ミリ秒が合計ブロック時間になります。
Web サイトの機能と対話性 (タップ、クリック、ドラッグ) の大部分は、JavaScript を通じて実行されるイベント ハンドラーによって駆動されます。Web サイトの読み込みプロセス中に要素がユーザーのビューポートにレンダリングされても、それぞれのイベント ハンドラーにまだアタッチされていない場合、要素は機能しません。
Web サイトを閲覧しているときにボタン要素がビューポートに表示されるが、ボタン要素をクリックしても反応しない場合があります。これは、ボタン要素を機能させるコードがまだアタッチされていないためです。
TBTとTTIとFCPとFIDの関係
TBT (合計ブロッキング時間)、TTI（操作可能になるまでの時間）、FCP(視覚コンテンツの初期表示時間)およびFID（初回入力遅延) は同様に Web ページのインタラクティブ性に関連しています。
TBT (合計ブロッキング時間)指標は、長時間にわたり、メインスレッドがブロックされ、入力の応答性が妨げられることで発生するFCP(視覚コンテンツの初期表示時間) と TTI（操作可能になるまでの時間）の間の時間の合計を測定します。
ユーザーがFCP(視覚コンテンツの初期表示時間) から、Web ページが TTI（操作可能になるまでの時間）に到達するまでに、ユーザーイベントに応答できない時間を測定します。
TBTは、メインスレッドがユーザーインタラクションへの応答をブロックされていた時間を計算し、TTIはページがインタラクティブになるまでにかかる時間を測定します。TBT がミリ秒単位で測定されるのに対し、TTI は秒単位になります。
FID (初回入力遅延) は、ユーザーが最初にページを操作したとき (リンクをクリックしたときなど) から、その操作に応じてブラウザーが実際にイベントハンドラーの処理を開始できるようになるまでの時間を測定します。TBT が FID スコアに直接影響することになります。
マーケティング活動において、Total Blocking Time (TBT)どのような影響がありますか？
TBTは、Lighthouse レポート内のパフォーマンス セクションを構成する 6 つの指標のうちの 1 つです。TBTは Lighthouse パフォーマンス スコアの約30% を占めます。Lighthouse V6では25%でしたが、Lighthouse V8より30%になりました。
ラテンアメリカ最大の電子商取引企業の 1 つであるMercado Libre は、製品詳細ページのインタラクティブ性を最適化し、Lighthouse の最大潜在 FID を 90% 削減し、Chrome ユーザー エクスペリエンス レポートの FID を 9% 改善しました。Core Web Vitalsの 1 つである First Input Delay (FID)とそれに影響を与えるTotal Blocking Time (TBT)を最適化しました。
Total Blocking Time (TBT)の測定方法
TBT は、ラボ環境で測定する場合に最適な指標です。
実際のユーザー環境での TBT の測定は可能ですが、ユーザーの操作がTBT に影響を与え、レポートにばらつきが出てしまう可能性があるため、お勧めできません。
実際のユーザー環境でのページのインタラクティブ性を理解するためには、First Input Delay (FID) を測定する必要があります。
ラボデータ
Chrome DevTools
Lighthouse
WebPageTest
フィールドデータ
PageSpeed Insights
Chrome User Experience Report
Search Console (Core Web Vitals Report)
Total Blocking Time (TBT)を向上させるポイント
Core Web Vitalsほど重要性は認識されていませんが、Total Blocking Time (TBT)は依然としてCore Web Vitalsと相関する重要な指標であり、その結果、Google でのランキングに間接的に影響を与える可能性があります。
First Contentful Paint (FCP)がWeb サイトのパフォーマンスを決定する唯一の指標ではないことは注目に値します。Largest Contentful Paint、Speed Index、Time to Interactive、Total Blocking Time などの他の指標も、Web サイトとページ エクスペリエンスの全体的なパフォーマンスを決定する上で重要な役割を果たします。
特にTBTが Core Web Vitals の一つであるFID スコアに直接影響します。FID スコアが低い場合、TBTの診断およびパフォーマンス向上も一つの対策になります。
しかし、FCP スコアを向上させるのは必ずしも簡単なわけではありません。
ページ速度の問題への対処は非常に複雑になる可能性があるため、Web 開発チームに連絡して、Google の推奨事項に従う方法を検討してください。
弊社では、Web サイトのパフォーマンスに関するクライアントの状況に応じたサポートを提供しています。現在お困りの場合、またはこれからSEOやWebサイトの再設計、Webサイトの定期的な最適化どうしたら良いか悩んでいるケースでもまずはお気軽にお問合せください。