Time to Interactive（TTI）とは？概要から改善方法まで解説
2023年10月13日 カテゴリ - サイトスピード
※Time to Interactive（TTI）は2023年2月の Lighthouse 10 アップデートにより廃止されました。
TTI とは、読み込みの応答性を示す指標です。
ページの読み込みが開始してからユーザーが操作可能になるまでの時間を計測します。
ページが表示されているのに操作ができない場合、ユーザーは苛立ちを覚えたり、すぐに離脱する可能性があります。
そのため、TTI の改善が必要です。
この記事では、TTI の概要から改善方法まで解説します。
TTI とは
TTI は前述した通り、ページの読み込みが開始してからユーザーが操作可能になるまでの時間を計測します。
以下の図は、TTI の計測の流れを視覚化したものです。
TTI の値は、以下の手順で決定します。
①ページの読み込み開始（0秒地点）から計測を開始します。
②ネットワークリクエストが2つ以下であり、さらにメインスレッドにロングタスクがない状態が5秒以上続く期間を探します。
ロングタスクは、50ミリ秒以上のタスクを指します。
ロングタスクの例としては、ページの描写やコードの処理などがあります。
③FCPから②で発見した期間の間で、一番最後に現れるロングタスクを探します。
FCP は First Contentful Paint の略で、ユーザーがページ上で初めてアクションを行ったときに、ブラウザが応答するまでにかかる時間です。
画像の例では、2.5秒から9.5秒の間にあるロングタスクが該当します。
ロングタスクが見つからなかった場合、FCP まで遡ります。
④③で発見したロングタスクの終了時間が TTI となります。
画像の例では、TTI はロングタスクの終了時間である3.8秒となります。
ロングタスクが見つからなかった場合、FCP と同じ値（2.5秒）になります。
Lighthouse のアップデートにより「TTI」が廃止に
2023年2月に Lighthouse 10 がリリースされました。
このアップデートにより、Lighthouse のスコアの指標であった TTI が廃止されました。
Google が公開したブログでは、以下のように示しています。
由緒あるTime to Interactive (TTI)メトリックは Lighthouse 10 で削除され、Lighthouse 8 で開始された非推奨プロセスが終了します。TTI の 10% のスコアの重みは累積レイアウト シフト (CLS)に移行しており、現在は全体のパフォーマンス スコアの 25% を占めることになります。
（中略）
ほとんどのページは TTI よりも CLS の方がスコアが高い傾向があるため、これによりほとんどのページのパフォーマンス スコアが向上すると予想されます。最新の HTTP アーカイブ実行での 1,300 万ページの読み込みの分析では、それらのページの 90% で Lighthouse パフォーマンス スコアの向上が見られ、そのうちの 50% で 5 ポイント以上のパフォーマンスの向上が見られました。
What’s new in Lighthouse 10 – Chrome Developers
https://developer.chrome.com/blog/lighthouse-10-0/
CLS は、Core Web Vitals の指標のひとつです。
ページの読み込みに応じて発生するレイアウトのズレを評価します。
このアップデートより、ページスピードのパフォーマンススコアにおける Core Web Vitals の比重も増えたことになります。
そのため、これまで以上に Core Web Vitals の改善が重要になります。
Lighthouse 10 のアップデートについて詳しく知りたい方は、以下をご覧ください。
・【参考】【Lighthouse 10】Google の Lighthouse がアップデート！スコアの評価項目「TTI」廃止やベストプラクティスの項目変更など
TTI の改善方法
この章では、TTI の改善方法について解説します。
TTI の改善方法は大きく分けて以下の3つです。
・ネットワークリクエスト数を減らす
・長時間のタスクを改善する
・メインスレッドの作業を抑える
ネットワークリクエスト数を減らす
ネットワークリクエストとは、ブラウザが Web サイトを表示するために必要な情報をサーバーから取得するために送信を要求することです。
ネットワークリクエスト数を減らす方法として、外部との連携ツールを減らすことが有効です。
アクセス解析のために Google アナリティクスを利用したり、SNS のシェアボタンをサイト内に配置するためには、HTML 内にタグを埋め込む必要があります。
しかし、これらのタグは Web サイトの読み込み中に別のサーバーからリソースをダウンロードします。
そのため、ネットワークリクエスト数が増加します。
外部との連携ツールを減らして、TTI のスコアを改善しましょう。
長時間のタスクを改善する
長時間のタスクを実行している場合、そのタスクが終わるまでユーザーは操作を行うことができません。
そのため、TTI のスコアは低下します。
長時間のタスクを改善する方法としては、以下の4つがあります。
・DOMContentLoaded(DCL)までの時間を短くする
・JavaScript を最適化する
・外部リソースへ事前に接続する
・遅延読み込みを行う
DOMContentLoaded（DCL）までの時間を短くする
DOM とは、「Document Object Model」 の略で、Web ページや HTML 文書などの文書構造をプログラムで扱うための表現方法です。
DCL とは、HTML 文書の全ての要素（DOM ノード）が完全に読み込まれ、解析された時点で発生するイベントです。
DCL が遅いとその分 TTI が後ろにずれ込みます。
HTML を簡略化したり、不要なタグを排除して DCL までの時間を改善しましょう。
JavaScript を最適化する
ページに多くの JavaScript が含まれている場合、プログラム の実行に時間がかかります。
タスク1つあたりの時間が長くなるため、TTI の増加につながります。
そのため、JavaScript を最適化することで TTI を改善することができます。
ソースコードの知識がなく、調整が難しい場合は専用のツールを使うことで簡単に最適化できます。
また、 WordPress を利用している方はプラグインを利用することで JavaScript を圧縮することができます。
ただし、ソースコードの最適化をした結果正しく動作しなくなる可能性があるので、圧縮する場合は不具合が生じていないか確認する必要があります。
外部リソースへ事前に接続する
Web ページでは、JavaScript や Web フォントなどの外部リソースを読み込みます。
これによって、ページの読み込み時のタスクが増えるため、TTI の増加につながります。
外部リソースに事前に接続しておくことで、TTI のスコアを改善することができます。
例えば、link 要素の rel 属性に preconnect を指定することでリンク先へ事前に接続が可能です。
link rel="preconnect" href="https://example.com"
遅延読み込みを行う
画像データはテキストデータに比べてファイル容量が大きい傾向にあります。
画像の読み込みは長時間のタスクとなってしまうので、ビューポート外の画像に関しては遅延読み込みを行うことで TTI を改善できます。
メインスレッドの作業を抑える
スレッドとは、プログラムの処理が行われる場所で、メインスレッドはその中でも画面の表示や画像の読み込みなど重要な作業を処理します。
メインスレッドの作業を抑える方法としては、Web ワーカーの使用があります。
Web ワーカーとは、メインスレッドで行われるタスクをバックグラウンドスレッドで実行するための方法です。
これを利用することでメインスレッドの作業を抑えることができ、TTI の改善につながります。
まとめ
本記事では、TTI について解説しました。
TTI は Lighthouse 10 のアップデートにより廃止され、Lighthouse や PageSpeed Insights では計測できなくなりました。
しかし、TTI の改善方法は Core Web Vitals の指標の改善にも役立つので、優先順位をつけて実施しましょう。
なお、当社ではページの表示速度の改善を1クリックで行えるランディングページ高速化ツール FasTest（ファーステスト） を開発・販売しています。
無料トライアルも実施しておりますので、ご興味のある方はぜひお気軽にお問い合わせください。
