このページではTTI（Time to Interactive）についてわかりやすく解説していきます。

計測される仕組みから、評価内容までを解説していきます。

TTI（Time to Interactive）の改善方法を知りたい方は「TTIの改善施策」の記事をご覧ください。

TTI（Time to Interactive）とは

TTI（Time to Interactive）は、コンテンツが表示されてからウェブページの読み込みが軽く操作がしやすい状態になるまでの時間を測定するパフォーマンス指標のことを言います。

FCP（コンテンツが何かしら表示される）から、ユーザーがクリックやタップなどの操作が行えるようになるまでの秒数で表されます。

多くのサイトは、コンテンツが読み込まれた後も、さまざまな要素が読み込まれます。

その分、見た目としては表示されていても実際に操作ができないという状態が発生し、ユーザー体験を損ないます。

簡単に説明すると、TTIはコンテンツが表示されてから操作しやすい状態になるのにどのくらい時間を要するかの指標と言えます。

FCPについて詳しく知りたい方は「FCPとは」をご覧ください。

TTI（Time to Interactive）の計測方法と仕組みをわかりやすく

TTIは、FCPのタイミングからインタラクティブ（操作可能）になるまでの時間を計測するのですが、インタラクティブといっても曖昧で具体的な定義がわかりにくいと思います。

ここでその解説を行います。

TTIの計測開始のタイミング

まず、TTIの計測開始のタイミングは画面に何かしらのコンテンツが表示されたタイミング（FCPが終了したのタイミング）となります。

※FCPはFirst Contentful Paintの略で、画面に初めてコンテンツが表示されるまでの時間を計測する指標です。

ここでいうコンテンツは、画像（imgタグ）、SVG要素、背景画像以外の要素、キャンパス（canvasタグ）要素が該当します。

TTIの計測終了のタイミング

TTIの計測終了のタイミングは、最後のロングタスクが終了し、その後5秒間でロングタスク発生がなく、ネットワーク接続も2本以下の状態が続いた時点として定義されます。

ここの定義は文章だけだと説明が難しいため図も交えて説明していきます。

ロングタスクなし、ネットワーク接続も2本以下の状態で5秒以上の領域を探します。

上記の画像でいうとグレーのゾーンがこの条件に当てはまる領域となります。

この領域が発生したのを確認後、最後のロングタスクが終わった時点がTTIの計測終了のタイミングとなります。

ここでは、ロングタスクでなければ通常のタスクなどが動いていても問題はありません。

ただし、ロングタスクが新たに発生したり、ネットワーク接続が3本以上となった場合、計測は先延ばしとなり条件が揃うまで後ろの計測にずれ込みTTIの数値も悪くなっていきます。

ネットワーク接続の定義

ここでいうネットワークとは、ブラウザがHTTPリクエストを送信してからWebサーバーが応答を返すまでのデータ通信の仕組みです。

HTML、CSS、JavaScriptといったマークアップ要素や、画像、動画といったコンテンツ、フォントファイルなどを読み込む際に、それぞれネットワーク接続が実行されます。

ロングタスクの定義

TTI（Time to Interactive）におけるロングタスクは、50ミリ秒（0.05秒）以上実行されるタスクを指します。

※50ミリ秒（0.05秒）未満であればロングタスクとは言いません。

特にJavaScriptの処理やDOMの再描画などがタスクの時間に影響されることが多い要素です。

TTI（Time to Interactive）が重要な理由

なぜTTIがこれほど重要視されているのでしょうか？

その理由を詳しく見てみましょう。

ユーザーエクスペリエンスへの影響

TTIが長いサイトは、ユーザーにとって非常にストレスの多い体験となります。

ページが表示されているにも関わらず、クリックやタップに反応しない状態が続くと、ユーザーは「このサイトは壊れている」と感じてしまいます。

特に、モバイルデバイスでの利用が増加している現在、TTIの改善は必須項目と言えるでしょう。スマートフォンでは処理能力が限られているため、TTIが長くなりがちです。

SEOへの影響

GoogleはPage Experience Signalsの一部として、TTIを含む様々な速度指標を検索ランキングの要因として考慮しています。

TTIが改善されることで、検索結果での順位向上が期待できます。

また、TTIが改善されることで直帰率が下がり、滞在時間が増加するため、間接的にもSEO効果が期待できます。

コンバージョン率への影響

特にECサイトやランディングページでは、TTIの改善がコンバージョン率に直結します。

「購入する」「お問い合わせする」などの重要なボタンが素早く操作可能になることで、ユーザーの購買意欲を逃さずに済みます。

Amazon の調査によると、ページの読み込み速度が1秒遅くなると、コンバージョン率が7%低下するという結果も報告されています。

これは、TTIの重要性を示す明確な証拠と言えるでしょう。

TTIの評価基準について

TTIは秒数によって評価されます。評価基準は以下の通りです。

下記の表のように3.8秒未満で良好、3.8秒～7.3秒でサーバー処理に改善の余地あり、7.3秒以上でユーザー体験に悪影響といった評価となります。

Google PageSpeed Insightsでは、3.4秒未満にすることを推奨しています。

Time to Interactive（TTI）の改善方法

TTIを改善するための具体的な方法を、技術的な観点から詳しく解説します。

JavaScriptの最適化

TTI改善の最も重要なポイントは、JavaScriptの最適化です。

コード分割（Code Splitting）

大きなJavaScriptファイルを小さなチャンクに分割することで、必要な部分だけを優先的に読み込むことができます。これにより、初期表示に必要な処理を最小限に抑えることができます。

例えば、ページ下部にあるチャット機能のJavaScriptは、ページの初期表示時には必要ありません。このような機能は遅延読み込みを行うことで、TTIを大幅に改善できます。

不要なJavaScriptの削除

使用していないJavaScriptライブラリやプラグインを削除することも重要です。多くのサイトで、実際には使用されていない機能のJavaScriptが読み込まれているケースがあります。

定期的にコードレビューを行い、不要な依存関係を削除することで、TTIを改善できます。

JavaScript実行の最適化

JavaScript実行時の「長いタスク」を減らすことも重要です。以下の方法が効果的です：

• setTimeout()を使用した処理の分割：重い処理を小さなチャンクに分割し、メインスレッドの負荷を軽減
• Web Workersの活用：重い計算処理をバックグラウンドで実行
• requestIdleCallback()の活用：ブラウザのアイドル時間を活用して処理を実行

JavaScriptの最適化について詳しくは「JavaScriptの速度改善方法」もご覧ください。

リソース読み込みの最適化

効率的なリソース読み込みは、TTI改善の基本です。

クリティカルパスの最適化

ページの初期表示に必要な最小限のリソースを特定し、それらを優先的に読み込むことが重要です。

具体的には：

• Above the fold（スクロールせずに見える部分）のコンテンツに必要なCSS、JavaScriptのみを先に読み込む
• 画像の遅延読み込み（lazy loading）を実装
• フォントの表示最適化

HTTP/2の活用

HTTP/2を使用することで、複数のリソースを効率的に並列読み込みできます。サーバーサイドでHTTP/2を有効にし、適切にリソースを配信することで、TTIを改善できます。

CDN（Content Delivery Network）の活用

CDNを使用することで、ユーザーに最も近いサーバーからリソースを配信できます。特に、JavaScriptやCSSファイルをCDNから配信することで、読み込み時間を大幅に短縮できます。

サーバーサイドの最適化

サーバーサイドの改善も、TTI向上に大きく寄与します。

Server-Side Rendering（SSR）

SSRを実装することで、サーバーサイドでHTMLを生成し、クライアントサイドでのJavaScript実行を最小限に抑えることができます。

特に、React、Vue.js、Next.jsなどのフレームワークでSSRを実装することで、TTIを大幅に改善できます。

静的サイト生成（Static Site Generation）

可能な限り静的なHTMLファイルを生成することで、サーバーサイドでの処理時間を短縮できます。Gatsby、Hugo、Jekyll などのツールを活用することで、高速なサイトを構築できます。

キャッシュ戦略の最適化

効果的なキャッシュ戦略は、リピーターのTTI改善に大きく貢献します。

ブラウザキャッシュの活用

適切なCache-Controlヘッダーを設定することで、ブラウザキャッシュを効果的に活用できます：

• 静的リソース（CSS、JavaScript、画像）：長期間キャッシュ
• HTMLファイル：短期間キャッシュまたはキャッシュ無効化
• APIレスポンス：適切な期間でキャッシュ

Service Workerの活用

Service Workerを使用することで、より高度なキャッシュ戦略を実装できます。オフライン対応やバックグラウンド同期なども可能になります。

画像最適化

画像の最適化は、特にモバイルデバイスでのTTI改善に効果的です。

次世代フォーマットの採用

WebP、AVIF などの次世代画像フォーマットを使用することで、画像ファイルサイズを大幅に削減できます。

適切なサイズの画像配信

デバイスサイズに応じて、適切なサイズの画像を配信することが重要です。retina ディスプレイ対応も考慮しつつ、無駄に大きな画像を配信しないよう注意が必要です。

遅延読み込みの実装

Above the fold 以外の画像は遅延読み込みを実装することで、初期読み込み時間を短縮できます。

まとめ

Time to Interactive（TTI）は、現代のウェブサイトにおいて極めて重要な指標です。

単純な表示速度ではなく、ユーザーが実際に操作可能になるまでの時間を測定することで、真のユーザーエクスペリエンスを評価できます。

TTI改善には、JavaScript最適化、リソース読み込み最適化、サーバーサイド最適化など、多角的なアプローチが必要です。また、継続的な監視と改善により、長期的にパフォーマンスを維持することが重要です。

特に、コンバージョン率向上を目的とするランディングページでは、TTI改善が直接的にビジネス成果に影響します。専門的な知識と経験を持つチームと協力することで、効果的なTTI改善を実現できるでしょう。

ウェブサイトの成功には、優れたコンテンツやデザインだけでなく、高速で快適なユーザー体験が不可欠です。TTIの改善に取り組むことで、ユーザー満足度の向上とビジネス成果の向上を同時に実現できます。

今後もウェブ技術の進歩とともに、TTI改善の方法も進化していくでしょう。最新の技術動向を把握し、継続的に最適化を進めることで、競争優位性を維持できます。

TTI改善は一朝一夕で実現できるものではありませんが、計画的かつ継続的に取り組むことで、必ず成果を得ることができます。ユーザーのためにも、ビジネスのためにも、TTI改善に積極的に取り組んでいきましょう。