Time to Interactive（TTI）は、Lighthouseレポートのパフォーマンスセクションで追跡される6つのメトリックの1つです。各メトリックは、ページの読み込み速度のいくつかの側面をキャプチャします。

一部のサイトは対話性を犠牲にしてコンテンツの可視性を最適化するため、TTIの測定は重要です。これはイライラするユーザーエクスペリエンスを生み出す可能性があります。サイトは準備ができているように見えますが、ユーザーがサイトを操作しようとしても何も起こりません。

TTIが測定するもの

TTIは、ページが完全にインタラクティブになるまでにかかる時間を測定します。次の場合、ページは完全にインタラクティブであると見なされます。

このページには、First ContentfulPaintによって測定された有用なコンテンツが表示されます 。
イベントハンドラーは、ほとんどの表示可能なページ要素に登録されています。
このページは、50ミリ秒以内にユーザーの操作に応答します。

LighthouseがTTIスコアを決定する方法

TTIスコアは、HTTPアーカイブのデータに基づいた、ページのTTIと実際のWebサイトのTTIの比較です 。たとえば、99パーセンタイルで実行されているサイトは、約2.2秒でTTIをレンダリングします。WebサイトのTTIが2.2秒の場合、TTIスコアは99です。

TTIスコアを改善する方法

TTIに特に大きな影響を与える可能性のある改善点の1つは、不要なJavaScript作業を延期または削除することです。JavaScriptを最適化する機会を探してください。特に、コード分​​割 とPRPLパターンの適用によるJavaScriptペイロードの削減を検討してください。サードパーティのJavaScriptを最適化すると 、一部のサイトでも大幅な改善が見られます。

これらの2つの診断監査は、JavaScriptの作業を減らすための追加の機会を提供します。

メインスレッドの作業を最小限に抑える
JavaScriptの実行時間を短縮する

実際のユーザーのデバイスでTTIを追跡する

ユーザーのデバイスでTTIが実際に発生するタイミングを測定する方法については、Googleのユーザー中心のパフォーマンス指標のページをご覧ください。TTIの追跡セクションでは、プログラムでTTIデータにアクセスしてGoogleアナリティクスに送信する方法について説明します。

全体的なパフォーマンススコアを向上させる方法

特定の指標に焦点を当てる特別な理由がない限り、通常は全体的なパフォーマンススコアの向上に焦点を当てたほうがよいでしょう。

Lighthouseレポートの[ Opportunities]セクションを使用して、ページに最も価値のある改善点を決定します。機会が重要であるほど、パフォーマンススコアへの影響は大きくなります。たとえば、以下のLighthouseのスクリーンショットは、レンダリングブロックリソースを削除すると 最大の改善が得られることを示しています。

Lighthouseレポートで特定された機会に対処する方法については、パフォーマンス監査のランディングページを参照してください。