【タイムトゥインタラクティブ】
Time to Interactive（TTI） とは？
💡 見えてるのに押せない——そのモヤモヤが終わる瞬間を測る指標
📌 このページのポイント
- FCPの後、メインスレッドが十分にアイドル状態になった時点を計測する
- JavaScriptの実行が重いとTTIが大幅に遅れる
- コード分割やTree Shakingで不要なJavaScriptを削減するのが効果的
- Lighthouseで計測できるラボ指標（フィールド指標ではない）
ひよこ ページは表示されてるのにボタンを押しても反応しないときがあるよね？
ペンギン先生 それがまさにTTI以前の状態だよ！画面は描画されてるけど、裏でJavaScriptがまだ大量に実行中でメインスレッドが忙しいから、クリックやスクロールに反応できないんだ
ひよこ TTIはどうやって判定してるの？
ペンギン先生 FCPの後、メインスレッドに50ms以上のLong Taskがなくなって5秒間安定した時点をTTIとするんだ。つまり「もう重い処理は終わったから自由に操作していいよ」というタイミングだね
ひよこ どうすればTTIを速くできるの？
ペンギン先生 最大の敵はJavaScriptの量だよ。コード分割（Code Splitting）で初期読み込みを減らす、Tree Shakingで未使用コードを除去する、重い処理はWeb Workerに逃がすなどが効果的だね
ひよこ FCPとTTIの両方を速くしないといけないってことだよね？
ペンギン先生 そうだね。FCPが速くても TTIが遅いと「表示は速いのに触れない」という最悪の体験になる。特にSPAはJavaScriptが多いからTTIが遅くなりがちだよ。ちなみにTTIはLighthouseのラボ指標で、Core Web Vitalsの公式指標にはINP（Interaction to Next Paint）が使われてるけど、考え方は近いものがあるね
まとめ：ざっくりこれだけ覚えればOK！
「TTI」って出てきたら「ページが本当に操作できるようになるまでの時間」と思えればだいたいOK！
📖 おまけ：英語の意味
「Time to Interactive」 ＝ 操作可能になるまでの時間
💬 Interactive（対話的・操作可能）になるまでのTime（時間）で、「見た目」ではなく「使える」タイミングを測る指標だよ