操作可能になるまでの時間（TTI）は、読み込みの応答性を測定するためのラボ指標です。ページがインタラクティブに見えても、実際にはそうではないケースを特定できます。TTI を短くすると、ページが使用可能であることを確認できます。
TTI とは
TTI 指標は、ページの読み込みを開始してからメイン サブリソースの読み込みが完了し、ユーザー入力にすばやく応答できるまでの時間を測定します。
ウェブページのパフォーマンス トレースに基づいて TTI を計算する手順は次のとおりです。
- First Contentful Paint（FCP）から始めます。
- 少なくとも 5 秒間のクワイエット ウィンドウを時間内に前方検索します。クエット ウィンドウは、長時間タスクがなく、処理中のネットワーク GET リクエストが 2 つ以下であると定義されます。
- クワイエット ウィンドウの前の最後の長いタスクを逆方向に検索します。長いタスクが見つからない場合は FCP で停止します。
- TTI は、クワイエット ウィンドウの前の最後の長いタスクの終了時間です（長いタスクが見つからない場合は FCP と同じ値）。
次の図は、上記の手順をわかりやすくまとめたものです。
従来、デベロッパーはレンダリング時間を短縮するためにページを最適化してきましたが、TTI が犠牲になることがありました。
サーバーサイド レンダリング（SSR）などの手法により、ページがインタラクティブに見えても（つまり、リンクやボタンが画面に表示されます）、メインスレッドがブロックされているか、これらの要素を制御する JavaScript コードが読み込まれていないため、実際にはインタラクティブではありません。
インタラクティブに見えても実際にはそうではないページをユーザーが操作しようとすると、通常は次の 2 つの方法のいずれかで反応します。
- 最善のシナリオでは、ページの反応が遅いことをお客様がイライラさせるでしょう。
- 最悪のケースでは、ページは破損していると見なされ、ユーザーが離れる可能性があります。ブランドの価値に対する信用を失うことさえあります。
この問題を回避するには、FCP と TTI の差を最小限に抑えるよう最善を尽くします。また、明らかな違いがある場合は、ページ上のコンポーネントがまだインタラクティブではないことを視覚的インジケーターで明確に示します。
TTI の測定方法
TTI はラボで測定するのが最適です。TTI を測定する最良の方法は、サイトで Lighthouse のパフォーマンス監査を実行することです。使用方法の詳細については、TTI に関する Lighthouse のドキュメントをご覧ください。
ラボ用ツール
TTI スコアの良し悪しは？
優れたユーザー エクスペリエンスを提供するため、サイトは平均的なモバイル ハードウェアでテストしたとき、インタラクティブまでの時間を 5 秒未満に抑えるよう努力する必要があります。
ページの TTI が Lighthouse のパフォーマンス スコアに与える影響について詳しくは、Lighthouse による TTI スコアの決定方法をご覧ください。
TTI を改善する方法
特定のサイトの TTI を改善する方法を確認するには、Lighthouse のパフォーマンス監査を実行し、監査で提案された特定の最適化案を確認します。
TTI を（任意のサイトで）全般的に改善する方法については、次のパフォーマンス ガイドをご覧ください。