WordPress・ブログ

PageSpeed InsightsのTTI・TBTとは？JavaScriptが原因の表示遅延を改善する方法

  • 登録：
  • 更新：

PageSpeed InsightsでWebページの表示速度を診断すると、「インタラクティブになるまでの時間（TTI）」や「合計ブロッキング時間（TBT）」といった指標が表示されることがあります。これらはページの「操作できるまでの速さ」を示す重要な指標です。本記事ではそれぞれの意味と、スコアを改善するための具体的な方法を解説します。

TTI・TBTとは？「操作できるまでの時間」を示す指標

TTI（Time to Interactive）：ページが操作できるようになるまでの時間

TTI（Time to Interactive）は、ページが視覚的に表示されるだけでなく、ボタンのクリックやスクロールなどのユーザー操作に反応できるようになるまでの時間を指します。

TTIが長い原因の多くは、JavaScriptの処理がメインスレッドを長時間占有していることです。JavaScriptの実行中はブラウザがユーザー操作を受け付けられないため、ページが表示されていても「動かない」状態になります。

TBT（Total Blocking Time）：メインスレッドのブロッキング合計時間

TBT（Total Blocking Time）は、FCP（最初のコンテンツ描画）からTTIまでの間に、メインスレッドが50ミリ秒以上ブロックされた時間の合計です。値が大きいほど、ユーザーが操作しようとしても反応が遅いページということになります。

PageSpeed InsightsのスコアにおいてTBTは比重が高く（モバイルで30%）、改善するとスコアが大きく上がりやすい指標です。

TTI・TBTを改善する4つの方法

改善方法1. JavaScriptの読み込みを遅延させる（defer・async）

ページ表示に必須でないJavaScriptは、deferまたはasync属性を使って非同期で読み込むことで、メインスレッドのブロッキングを減らせます。

deferはHTMLの解析が終わってからスクリプトを実行するため、ページの初期表示を妨げません。WordPressであれば「Autoptimize」や「WP Rocket」などのプラグインでまとめて設定できます。

改善方法2. 使用していないJavaScriptを削除・分割する

実際には使われていないJavaScriptを読み込んでいると、それだけメインスレッドの処理時間が増えます。PageSpeed Insightsの「使用していないJavaScriptの削減」という指摘が出ていれば、対象のスクリプトを特定して削除または遅延読み込みに切り替えましょう。

また、大きなJSファイルを複数の小さなファイルに分割する「コード分割（Code Splitting）」も有効です。必要なタイミングで必要なコードだけを読み込む構成にすることで、初期ロード時の処理量を減らせます。

改善方法3. サードパーティスクリプトを見直す

Google Analytics・広告タグ・チャットツールなど、外部サービスのスクリプトはTBTを悪化させる主な原因のひとつです。不要なものは削除し、必要なものは遅延読み込みに対応した設定を検討しましょう。

WordPressであれば「Asset CleanUp」プラグインを使うと、ページごとに不要なスクリプトを無効化できます。

改善方法4. 高速なレンタルサーバーに移行する

サーバーのレスポンス速度（TTFB）が遅いと、JavaScriptの処理が始まるタイミング自体が遅れ、TTIも悪化します。共有サーバーの処理能力が低い場合は、高速なサーバーへの移行が根本的な解決策になることがあります。

国内シェアNo.1のエックスサーバーは、高速なNVMe SSDと独自の高速化技術を採用しており、表示速度の改善に効果的です。

まとめ

TTI・TBTはどちらも「ページがユーザーの操作に応答できるようになるまでの時間」に関わる指標です。改善の基本はJavaScriptの処理量を減らすことで、defer/async設定・不要スクリプトの削除・サードパーティタグの見直しが有効です。

根本的な対処として、サーバー自体の処理速度を上げることも効果的です。表示速度にお悩みであれば、サーバー環境の見直しも検討してみてください。

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