操作可能になるまでの時間

操作可能になるまでの時間(TTI)は、Lighthouse レポートの [パフォーマンス] セクションで追跡される 6 つの指標の一つです。各指標は、ページの読み込み速度に関するなんらかの要素をキャプチャします。

インタラクティビティを犠牲にしてコンテンツの可視性を最適化するサイトもあるため、TTI の測定は重要です。これは、サイトの準備はできたように見えても、ユーザーが操作しようとしても何も起こらないという、ユーザー エクスペリエンスの低下につながります。

Lighthouse では、TTI が秒単位で表示されます。

Lighthouse の [Time to Interactive] 監査のスクリーンショット

TTI の測定対象

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

  • このページには、First Contentful Paint によって測定される有用なコンテンツが表示される。
  • イベント ハンドラは、最も多くのページ要素に対して登録されます。
  • ページが 50 ミリ秒以内にユーザー操作に応答する。

Lighthouse による TTI スコアの算出方法

TTI スコアは、HTTP Archive のデータに基づく、ページの TTI と実際のウェブサイトの TTI を比較したものです。たとえば、99 パーセンタイルのサイトの場合、TTI は約 2.2 秒でレンダリングされます。ウェブサイトの TTI が 2.2 秒の場合、TTI スコアは 99 になります。

次の表は、TTI スコアの解釈方法を示しています。

TTI 指標
(秒)
色分け
0 ~ 3.8 緑(高速)
3.9 ~ 7.3 オレンジ(中)
7.3 以上 赤(遅い)

TTI スコアを改善する方法

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

次の 2 つの診断監査では、JavaScript の作業を減らすことができます。

実際のユーザーのデバイスで TTI をトラッキングする

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

全体的なパフォーマンス スコアを改善する方法

特定の指標に焦点を当てる特別な理由がない限り、通常は全体的なパフォーマンス スコアの改善に集中することをおすすめします。

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

Lighthouse: [最適化] セクション

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

リソース