【タイムトゥインタラクティブ】
Time to Interactive（TTI） とは？
最終更新:
💡 見えてるのに押せない——そのモヤモヤが終わる瞬間を測る指標
ページが操作に安定して反応できる状態になるまでの時間を推定するラボ用のパフォーマンス指標。Lighthouse 10で指標から外され、現在はLCP・TBT・INPなどが推奨されている。
📌 このページのポイント
- FCPの後、Long Taskがなく進行中のGETリクエストが2件以下の「静かな区間」が5秒以上続く場所を探し、その直前の最後のLong Taskの終了時点をTTIとする
- JavaScriptの実行が重いとTTIが大幅に遅れる
- 外れ値的な通信やLong Taskに影響されやすくばらつきが大きいため、Lighthouse 10で指標から削除された
- 代わりにラボではTBT、実ユーザーの計測ではINPが推奨されている
ひよこ ページは表示されてるのにボタンを押しても反応しないときがあるよね？
ペンギン先生 それがまさにTTIが測ろうとしていた状態だよ！画面は描画されてるけど、裏でJavaScriptがまだ大量に実行中でメインスレッドが忙しいから、クリックにすぐ反応できないんだ
ひよこ TTIはどうやって判定してるの？
ペンギン先生 ひよこ どうすればTTIを速くできるの？
ペンギン先生 最大の敵はJavaScriptの量だよ。コード分割（Code Splitting）で初期読み込みを減らす、Tree Shakingで未使用コードを除去する、重い処理はWeb Workerに逃がすなどが効果的だね。これはTTIの後継指標を改善するときにも役立つよ
ひよこ 後継指標って、TTIはもう使われていないの？
ペンギン先生 Lighthouseでは、バージョン10でTTIが指標から削除されたよ。外れ値的なネットワークリクエストやLong Taskに敏感すぎて、値のばらつきが大きかったからなんだ。今は表示の速さをLCP、ラボでの操作の妨げをTBT、実際のユーザーの操作への反応をINPで見るのがおすすめだね。INPはCore Web Vitalsの1つで、ページ滞在中のクリックやキー入力から次の描画までの遅れを見るから、TTIとは同じ数値として比べないようにしようね
もっと詳しく知りたい人へ
TTIの代わりに出てくるTBTは、TTIと何が違う？
TTIは「いつ落ち着いたか」という時点、TBTは「その間どれだけ入力を妨げたか」という合計時間だよ。TBTはFCPからTTIまでのLong Taskについて、50msを超えた部分だけを足し合わせる。たとえば250ms、90ms、155msのLong Taskなら200＋40＋105で345msになる。ラボ環境でのINPの目安として使われるよ。
まとめ：ざっくりこれだけ覚えればOK！
「TTI」って出てきたら「ページが操作に反応できるようになるまでの時間の目安（今は後継指標が主流）」と思えればだいたいOK！
📖 おまけ：英語の意味
「Time to Interactive」 ＝ 操作可能になるまでの時間
💬 Interactive（対話的・操作可能）になるまでのTime（時間）で、「見た目」ではなく「使える」タイミングを測ろうとした指標だよ