Time to Interactive（TTI）は、読み込みの応答性を測定するラボ指標です。ページがインタラクティブに見えても、実際にはそうではないケースを特定するのに役立ちます。TTI が速いほど、ページが使用可能になります。
TTI とは
TTI 指標は、ページの読み込みを開始してから、メインのサブリソースが読み込まれ、ユーザーの入力にすばやく安定して応答できるようになるまでの時間を測定します。
ウェブページのパフォーマンス トレースに基づいて TTI を計算する手順は次のとおりです。
- [First Contentful Paint（FCP）] から始めます。
- 5 秒以上の静かな時間帯を前方に検索します。ここで、静かな時間帯とは、長いタスクがなく、進行中のネットワーク GET リクエストが 2 つ以下であることを意味します。
- 静かな時間帯の直前にある長いタスクを後方から検索し、長いタスクが見つからなければ FCP で停止します。
- TTI は、サイレント ウィンドウの前の最後の長いタスクの終了時間です（長いタスクが見つからない場合、FCP と同じ値）。
次の図は、上記の手順を視覚的に示しています。
これまで、デベロッパーはレンダリング時間を短縮するためにページを最適化してきましたが、TTI を犠牲にすることもありました。
サーバーサイド レンダリング（SSR）などの手法では、ページがインタラクティブに見える（リンクやボタンが画面に表示される）ものの、メインスレッドがブロックされているか、これらの要素を制御する JavaScript コードが読み込まれていないため、実際にはインタラクティブではないというシナリオが発生する可能性があります。
インタラクティブに見えるが実際にはインタラクティブではないページをユーザーが操作しようとすると、次のいずれかの方法で応答する可能性があります。
- 最善の場合でも、ページの応答が遅いことに不満を感じるでしょう。
- 最悪の場合、ページが壊れていると判断して離脱する可能性があります。ブランドの価値に対する信頼を失う可能性もあります。
この問題を回避するには、FCP と TTI の差を最小限に抑えるようにします。明らかな違いがある場合は、ページ上のコンポーネントがまだインタラクティブではないことを視覚的なインジケーターで明確にします。
TTI の測定方法
TTI は、ラボで測定するのが最適な指標です。TTI を測定する最善の方法は、サイトに対して Lighthouse パフォーマンス アウディットを実行することです。使用方法の詳細については、TTI に関する Lighthouse のドキュメントをご覧ください。
ラボツール
TTI スコアの適切な値
優れたユーザー エクスペリエンスを提供するには、平均的なモバイル ハードウェアでテストした際の Time to Interactive を 5 秒未満に収めるようにします。
ページの TTI が Lighthouse のパフォーマンス スコアに与える影響について詳しくは、Lighthouse が TTI スコアを決定する仕組みをご覧ください。
TTI を改善する方法
特定のサイトの TTI を改善する方法については、Lighthouse パフォーマンス アウディットを実行し、アウディットで提案される特定の改善案に注目してください。
一般的な TTI（すべてのサイト）を改善する方法については、次のパフォーマンス ガイドをご覧ください。