ウェブアプリの自動所要時間トレース

トレースは、アプリ内の 2 つの時点の間で取得されたパフォーマンス データのレポートです。ウェブアプリの場合、Performance Monitoring によってページ読み込みの所要時間トレースが自動的に実施されます。

ページ読み込みトレースは、次のデフォルト指標から構成されています。

  • First Paint 指標 - ユーザーがページに移動してから、なんらかの視覚的変化が生じるまでの時間を測定します。

  • First Contentful Paint 指標 - ユーザーがページに移動してから、画像やテキストなどの意味のあるコンテンツが表示されるまでの時間を測定します。

  • domInteractive 指標 - ユーザーがページに移動してから、そのページがユーザーにインタラクティブであるとみなされるまでの時間を測定します。

  • domContentLoadedEventEnd 指標 - ユーザーがページに移動してから、最初の HTML ドキュメントが完全に読み込まれて解析されるまでの時間を測定します。

  • loadEventEnd 指標 - ユーザーがページに移動してから、現在のドキュメントの読み込みイベントが完了するまでの時間を測定します。

  • 初回入力遅延指標 - ユーザーがページで操作を行ってから、ブラウザがその入力に応答できるまでの時間を測定します。

ページ読み込み指標の定義

First Paint

この指標は、ユーザーがページに移動してから、なんらかの視覚的変化が生じるまでの時間を測定します。

First Paint は、ページが読み込みを開始したことをユーザーに通知するため、便利な指標です。

  • ユーザーがページに移動したときに開始します。

  • 背景色の変化やヘッダーの読み込みなど、なんらかの視覚的変化が生じたときに停止します。

First Contentful Paint

この指標は、ユーザーがページに移動してから、画像やテキストなどの意味のあるコンテンツが表示されるまでの時間を測定します。

この指標は、新しい背景色やヘッダーだけでなく、アプリの実際のコンテンツがユーザーに表示されるまでの時間を分析する場合に使用します。

  • ユーザーがページに移動したときに開始します。

  • ブラウザが、テキスト、画像(背景画像を含む)、白色以外のキャンバス、SVG など、なんらかの DOM のコンテンツをレンダリングした直後に停止します。

domInteractive

この指標は、ユーザーがページに移動してから、そのページがユーザーにインタラクティブであると見なされるまでの時間を測定します。

この指標は、ボタンやハイパーリンクなどのアプリ要素が操作可能になるまでの時間を分析する場合に使用します。これは、ブラウザがインタラクティブに応答することを意味するわけではありません(指標の詳細については、初回入力遅延トレースをご覧ください)。

  • ユーザーがページに移動したときに開始します。

  • ユーザー エージェントが現在の HTML ドキュメントの準備状態を「インタラクティブ」に設定した直後に停止します。

domContentLoadedEventEnd

この指標は、ユーザーがページに移動してから、最初の HTML ドキュメントが完全に読み込まれて解析されるまでの時間を測定します。

  • ユーザーがページに移動したときに開始します。

  • 最初の HTML ドキュメントが完全に読み込まれて、解析(DOMContentLoaded)が完了した直後に停止します。ただし、これはスタイルシート、画像、サブフレームの読み込みが完了したことを意味するものではありません。

loadEventEnd

この指標は、ユーザーがページに移動してから、現在のドキュメントの読み込みイベントが完了するまでの時間を測定します。

この指標は、スタイルシートや画像を含むすべてのコンテンツが読み込まれるまでの時間を分析する場合に使用します。

  • ユーザーがページに移動したときに開始します。

  • 現在の HTML ドキュメントの読み込みベントの完了直後に停止します。

初回入力遅延

この指標は、ユーザーがページで操作を行ってから、ブラウザがその入力に応答できるまでの時間を測定します。

ユーザーの操作に対するブラウザの応答でアプリの第一印象が決まります。このため、この指標は非常に重要です。

  • ボタンやハイパーリンクのクリックなど、ユーザーが最初にページ上の要素を操作したときに開始します。

  • ブラウザが入力に応答できるようになった直後に停止します。つまり、ブラウザでコンテンツの読み込みと解析が完了したときに停止します。

初回入力遅延指標を測定するには、この指標のポリフィル ライブラリを追加する必要があります。インストール方法については、ライブラリのドキュメントをご覧ください。

自動ページ読み込み所要時間トレースをコンソールでモニタリングする

  1. Firebase コンソールで [Performance] ダッシュボードに移動します。

  2. [デバイス] タブでは次のような操作ができます。

    • すべてのページ読み込みトレース(および追加した任意のカスタム トレース)で収集されたデータのクイック レポートを表示できます。

    • 特定のトレースをクリックして、そのトレースのデータの詳細を確認できます。

    • ダッシュボードの左上にある [フィルタ add] ボタンを使用して、属性を基準にしたデータの基本フィルタを実行できます。

  3. 個別のトレースをクリックすると、収集されたデータの概要がコンソールの指標カードに表示されます。

    • ダッシュボードの右上にあるオプションを使用して、データを集約値または時系列の形式で表示できます。

    • ダッシュボードの左上にある [フィルタ add] ボタンを使用して、属性を基準にしたデータの基本フィルタを実行できます。

  4. どの指標についても、[もっと見る] をクリックすると、収集されたデータに関する詳細な情報を確認でき、高度な分析機能を使用できます。たとえば、属性を基準にしたデータのフィルタやセグメント化を行うことができます。