サイト表示速度

「インタラクティブになるまでの時間（TTI）」とは？PageSpeed Insightsでの現状とTBT・INPによる改善方法

  • 登録：
  • 更新：

Googleが提供する無料のWebページ診断ツール「PageSpeed Insights」では、以前「インタラクティブになるまでの時間（TTI：Time to Interactive）」という指標が表示されていました。しかし現在のPageSpeed Insightsのレポートには、TTIという項目は表示されません。

本記事では、TTIがどのような指標だったのか、なぜ表示されなくなったのか、そして現在ページの応答性を改善するために見るべき指標と具体的な改善方法を解説します。

スポンサーリンク

「インタラクティブになるまでの時間（TTI）」とは

TTI（Time to Interactive）とは、ページが画面に表示されてから、ユーザーの操作（クリックやタップ、スクロールなど）に対して実際に反応できる状態になるまでの時間を示す指標でした。

見た目上はページが表示されていても、JavaScriptの処理が終わっていないためにボタンが反応しない、スクロールがもたつくといった状態を数値化したものがTTIです。「ページが表示される速さ」と「ページが使える速さ」は別物であることを示す指標として、長くPageSpeed Insightsで使われてきました。

TTIはPageSpeed Insightsで表示されなくなった

PageSpeed InsightsはGoogleの計測エンジン「Lighthouse」を使ってスコアを算出していますが、2023年にリリースされたLighthouse 10で、TTIはレポートおよびパフォーマンススコアの算出項目から削除されました。

削除の理由としては、TTIが一部のネットワークのばらつきや長時間タスクの影響を受けやすく、数値が不安定になりやすかったことが挙げられています。Googleは、LCP（最大コンテンツの描画）・スピードインデックス・TBT（合計ブロッキング時間）の組み合わせのほうが、ページの体感速度をより正確に表せると説明しています。

そのため、現在PageSpeed Insightsで自分のサイトを診断しても「インタラクティブになるまでの時間」という項目自体は表示されません。古い記事やツールの解説でTTIの数値改善が紹介されていても、現行のスコアには直接反映されない点に注意してください。

TTIの代わりに見るべき指標：TBTとINP

TTIが担っていた「ページの応答性」は、現在は主に次の2つの指標で評価されます。

TBT（Total Blocking Time）：PageSpeed Insightsのスコアに直結

TBT（合計ブロッキング時間）は、FCP（最初のコンテンツの描画）からTTIに相当するタイミングまでの間に、メインスレッドが50ミリ秒以上ブロックされた時間の合計です。PageSpeed Insightsのモバイルスコアでは比重が高い指標のひとつで、改善するとスコアの向上につながりやすいのが特徴です。TTIが廃止された現在、ページの応答性を測るレポート上の主要な指標はこのTBTになっています。

INP（Interaction to Next Paint）：Core Web Vitalsの新指標

INP（Interaction to Next Paint）は、実際のユーザー操作に対してページが画面を更新するまでの応答時間を計測する指標です。2024年3月12日、Core Web Vitalsの指標としてFID（First Input Delay）に代わって正式に採用されました。FIDが「最初の操作」のみを対象としていたのに対し、INPはページ滞在中のすべての操作を対象とするため、より実際の使用感に近い指標とされています。

TBTがPageSpeed Insightsの診断（ラボデータ）に基づく指標であるのに対し、INPは実際のユーザーのアクセスデータ（フィールドデータ）に基づく指標という違いがありますが、どちらも「JavaScriptの処理がページの反応を妨げていないか」を見ている点では共通しています。

ページの応答性を改善する方法

TBTやINPを改善するための対策は、かつてTTIの改善策として紹介されていた内容と基本的に共通しています。優先度の高いものから順に紹介します。

不要なJavaScriptを減らし、遅延読み込みにする

ページの応答性を悪化させる最大の原因はJavaScriptです。使用していないプラグインやスクリプトを無効化・削除し、表示に必須でないJSはdeferまたはasync属性を付けて非同期で読み込むようにしましょう。WordPressであれば「Asset CleanUp」などのプラグインで、ページごとに不要なスクリプトを除外できます。

画像を最適化する

画像ファイルが大きいと読み込みやレンダリングに時間がかかり、結果として操作可能になるまでの時間も延びます。WebPなどの次世代フォーマットへの変換や、表示サイズに合わせたリサイズを行いましょう。WordPressでは「EWWW Image Optimizer」などのプラグインを使うと、アップロード時に自動で最適化できます。

サーバーの応答速度（TTFB）を改善する

サーバーの応答時間（TTFB：Time To First Byte）が遅いと、JavaScriptの処理が始まるタイミング自体が遅れ、TBTやINPにも悪影響が及びます。共有レンタルサーバーで処理速度に限界を感じている場合は、より高速なサーバーへの乗り換えも有効な選択肢です。

ブラウザキャッシュを活用する

一度訪問したユーザーの端末に画像・CSS・JSファイルを保存しておくブラウザキャッシュを設定すると、再訪問時の処理負荷が下がり、応答性の改善につながります。WordPressでは「W3 Total Cache」や「WP Super Cache」などのキャッシュプラグインで設定できます。

まとめ

「インタラクティブになるまでの時間（TTI）」は、かつてPageSpeed Insightsでページの応答性を示す指標でしたが、Lighthouse 10以降は表示・スコア算出から削除されています。現在は、ラボデータの「TBT（合計ブロッキング時間）」と、フィールドデータのCore Web Vitals「INP（Interaction to Next Paint）」が、応答性を評価する指標の中心です。

改善の方向性自体はTTI時代と変わらず、JavaScriptの削減・遅延読み込み、画像の最適化、サーバー応答速度やキャッシュの見直しが基本となります。詳しいJavaScriptの改善方法は、PageSpeed InsightsのTTI・TBTとは？JavaScriptが原因の表示遅延を改善する方法もあわせてご覧ください。

このテーマの関連記事はこちら