ひとことで言うと
TTI（Time to Interactive）とは、ページが完全に操作可能になるまでの時間を示す指標です。具体的には「メインスレッドが5秒以上のLong Taskなく安定し、ネットワークも落ち着いた最初の瞬間」をTTIと定義します。GoogleのLighthouseで測定でき、3.8秒以内が良好とされています。
見た目が表示されていてもJavaScriptの初期化が終わっていなければ、ボタンを押しても何も起きません。AIが生成したインタラクティブなランディングページでは、複数ライブラリの初期化が重なり、TTIが10秒を超えることもあります。
- 相手がログインなしで開ける状態か確認する
- PCとスマホで最低1回ずつ表示を確認する
- 内部情報・個人情報・不要な外部送信が残っていないか見る
- レビュー期限と修正時の差し替え方を決めておく
HTML共有で関係する場面
取引先にプレビューURLを送った場合、相手がスマートフォンで開くと画面は表示されているのにスクロールが固まったり、問い合わせボタンが無反応になったりするケースがあります。これはTTIが完了する前に操作しようとしているためです。
社内レビュー用HTMLに重いグラフライブラリや3Dアニメーションが含まれている場合も同様です。共有前にLighthouseのTTIスコアを確認し、5秒を超えているならスクリプトを`defer`または`async`に変更するか、グラフを画像に差し替えることを検討してください。
よくある誤解
「TTIとFCP（First Contentful Paint）は同じ意味だ」という誤解があります。FCPは最初の文字や画像が描画された時点を指し、TTIはその後に操作可能になるまでの時間を指します。FCPが速くてもTTIが遅い場合、閲覧者は「表示されたのに動かない」という最悪の体験をします。
「ファイルサイズが小さければTTIも短い」も必ずしも正しくありません。ファイルサイズが数KBでも、JavaScriptのパース・実行が重ければTTIは長くなります。とりわけpolyfillや古いjQueryプラグインを含んでいるAI生成コードは要注意です。
安全に使うための注意点
HTML共有前のチェックリストとして、（1）使っていないJSライブラリのscriptタグを削除、（2）必要なスクリプトにはdefer属性を追加、（3）インラインの大きなbase64画像はファイル分離またはURL参照に変更、の3点を最低限実施してください。これだけでTTIを数秒短縮できることがほとんどです。
プレビューURLを送る前に、モバイル回線を模倣した状態（Chrome DevToolsの「Network」→「Slow 3G」）でページを開き、操作できるまでの感覚を確認しましょう。許容できない遅さなら、インタラクション部分を省いたHTML静止版を別途用意して共有する方法も有効です。
よくある質問
TTIとTBT（Total Blocking Time）はどう違いますか？
TTIは操作可能になった時点の絶対時間、TBTはFCPからTTIの間にメインスレッドをブロックした合計時間です。TBTはLighthouseのスコアに直接影響するため、Long Tasksを減らすことが両指標の改善につながります。
AIツールが生成したHTMLのTTIを手軽に改善する方法はありますか？
scriptタグに`defer`を付けるだけでもTTIが大幅に改善するケースが多いです。また、CDNから読み込む外部ライブラリをリスト化し、実際に使っていないものをHTMLから削除するだけで数秒短縮できることがあります。
TTIが長いまま共有してしまった場合、後から修正して同じURLで更新できますか？
ギガサイト便では修正済みのHTMLを再アップロードすることで同じプレビューURLを維持したまま中身を差し替えられます。閲覧者がリロードすれば最新ファイルが反映されるため、URLを再発行する手間がありません。