Performance Monitoring は、トレースを使用して、アプリ内の監視対象プロセスに関するデータを収集します。トレースは、アプリ内の 2 つの時点の間でキャプチャされたデータを含むレポートです。
Web アプリの場合、Performance Monitoring は、ページ読み込みトレースと呼ばれるアプリの各ページのトレースを自動的に収集します。各ページ ロード トレースは、次のデフォルト メトリックを収集します。
最初のペイント— ユーザーがページに移動してから視覚的な変化が発生するまでの時間を測定する指標
最初のコンテンツ ペイント— ユーザーがページに移動してから、画像やテキストなどの意味のあるコンテンツが表示されるまでの時間を測定する指標
domInteractive — ユーザーがページに移動してから、ページがユーザーにとってインタラクティブであると見なされるまでの時間を測定するメトリック
domContentLoadedEventEnd — ユーザーがページに移動してから、最初の HTML ドキュメントが完全に読み込まれて解析されるまでの時間を測定するメトリクス
loadEventEnd — ユーザーがページに移動してから、現在のドキュメントの読み込みイベントが完了するまでの時間を測定するメトリクス
最初の入力遅延— ユーザーがページを操作してから、ブラウザーがその入力に応答できるようになるまでの時間を測定するメトリック
これらのトレースからのデータは、パフォーマンスダッシュボードの下部にあるトレース テーブルの [ページ読み込み] サブタブで表示できます (コンソールの使用については、このページで後述します)。
ページ ロード トレースの定義
このトレースは、アプリ内のページの読み込み方法、具体的にはレスポンシブ アプリなどの一般的な読み込みポイントに到達するまでの時間に関するいくつかの指標を測定します。
ページ読み込みトレースは、最初のコンテンツ ペイントなど、アプリのコア ウェブ バイタルを追跡するのに役立ちます。
ページ読み込みトレース用に収集された指標
これらのトレースはすぐに使用できるトレースであるため、カスタム メトリックまたはカスタム属性を追加することはできません。
最初のペイント
このメトリクスは、ユーザーがページに移動してから視覚的な変化が発生するまでの時間を測定します。
このメトリクスは、最初の描画によってページの読み込みが開始されたことをユーザーに知らせるため、便利です。
ユーザーがページに移動したときに開始します。
背景色の変更やヘッダーの読み込みなど、視覚的な変更が発生すると停止します。
最初のコンテンツペイント
このメトリックは、ユーザーがページに移動してから、画像やテキストなどの意味のあるコンテンツが表示されるまでの時間を測定します。
このメトリクスは、新しい背景色やヘッダーだけでなく、アプリの実際のコンテンツがユーザーに表示されるまでの時間についての洞察に役立ちます。
ユーザーがページに移動したときに開始します。
テキスト、画像 (背景画像を含む)、白以外のキャンバス、または SVG を含む、DOM からの最初のコンテンツをブラウザーがレンダリングした直後に停止します。
ドムインタラクティブ
このメトリクスは、ユーザーがページに移動してから、ページがユーザーにとってインタラクティブであると見なされるまでの時間を測定します。
このメトリクスは、ユーザーがボタンやハイパーリンクなどの要素を画面上で見るだけでなく、アプリ内の要素と実際にやり取りできるようになるまでの時間についての洞察に役立ちます。これは、ブラウザーがインタラクションに応答するという意味ではないことに注意してください (このメトリックについては、最初の入力遅延トレースを参照してください)。
ユーザーがページに移動したときに開始します。
ユーザー エージェントが現在の HTML ドキュメントの準備を「インタラクティブ」に設定する直前に停止します。
domContentLoadedEventEnd
このメトリックは、ユーザーがページに移動してから、最初の HTML ドキュメントが完全に読み込まれて解析されるまでの時間を測定します。
ユーザーがページに移動したときに開始します。
最初の HTML ドキュメントが完全に読み込まれて解析されるとすぐに停止します (
DOMContentLoaded)。
loadEventEnd
このメトリクスは、ユーザーがページに移動してから、現在のドキュメントの読み込みイベントが完了するまでの時間を測定します。
このメトリクスは、スタイルシートや画像を含むすべてのコンテンツの読み込みにかかる時間を把握するのに役立ちます.
ユーザーがページに移動したときに開始します。
現在の HTML ドキュメントのロード イベントが完了した直後に停止します。
最初の入力遅延
このメトリクスは、ユーザーがページを操作してからブラウザがその入力に応答できるようになるまでの時間を測定します。
ユーザー インタラクションに応答するブラウザーは、アプリの応答性に関する第一印象をユーザーに与えるため、このメトリックは役立ちます。
ボタンやハイパーリンクのクリックなど、ユーザーがページ上の要素を最初に操作したときに開始されます。
ブラウザーが入力に応答できるようになった直後に停止します。つまり、ブラウザーはコンテンツの読み込みや解析でビジーではありません。
最初の入力遅延メトリックを測定するには、このメトリックのポリフィル ライブラリを追加する必要があることに注意してください。インストール手順については、ライブラリのドキュメントを参照してください。
パフォーマンス データの追跡、表示、フィルタリング
リアルタイムのパフォーマンス データを表示するには、アプリがリアルタイム データ処理と互換性のある Performance Monitoring SDK バージョンを使用していることを確認してください。リアルタイムのパフォーマンス データについて詳しくは、こちらをご覧ください。
ダッシュボードで主要な指標を追跡する
主要な指標の傾向を知るには、パフォーマンスダッシュボードの上部にある指標ボードに追加します。週ごとの変更を確認することでリグレッションをすばやく特定したり、コードの最近の変更によってパフォーマンスが向上していることを確認したりできます。
メトリクス ボードにメトリクスを追加するには、次の手順に従います。
- Firebase コンソールのパフォーマンスダッシュボードに移動します。
- 空のメトリック カードをクリックし、既存のメトリックを選択してボードに追加します。
- メトリックの置換や削除など、その他のオプションについては、入力済みのメトリック カードでをクリックします。
メトリクス ボードには、収集されたメトリクス データが経時的にグラフ形式と数値の変化率の両方で表示されます。
ダッシュボードの使用について詳しくは、こちらをご覧ください。
トレースとそのデータを表示する
トレースを表示するには、Firebase コンソールのパフォーマンスダッシュボードに移動し、トレース テーブルまで下にスクロールしてから、適切なサブタブをクリックします。テーブルには、各トレースのいくつかの上位メトリックが表示され、特定のメトリックの変化率でリストを並べ替えることもできます.
Performance Monitoring は Firebase コンソールのトラブルシューティング ページを提供し、メトリックの変化を強調表示するため、アプリやユーザーに対するパフォーマンスの問題に迅速に対処し、影響を最小限に抑えることが容易になります。たとえば、次のシナリオで、潜在的なパフォーマンスの問題について学習したときに、トラブルシューティング ページを使用できます。
- ダッシュボードで関連する指標を選択すると、大きな差があることに気付きます。
- トレース テーブルで、最大のデルタを一番上に表示するように並べ替えると、大幅な変化率が表示されます。
- パフォーマンスの問題を通知する電子メール アラートを受け取ります。
トラブルシューティング ページには、次の方法でアクセスできます。
- メトリック ダッシュボードで、[メトリックの詳細を表示] ボタンをクリックします。
- 任意の指標カードで、 => 詳細を表示を選択します。トラブルシューティング ページには、選択したメトリックに関する情報が表示されます。
- トレース テーブルで、トレース名またはそのトレースに関連付けられている行のメトリック値をクリックします。
- 電子メール アラートで、[今すぐ調査] をクリックします。
トレース テーブルでトレース名をクリックすると、関心のあるメトリックにドリルダウンできます。 [フィルター ] ボタンをクリックして、属性別にデータをフィルター処理します。次に例を示します。
- ページ URLでフィルタして、サイトの特定のページのデータを表示します
- 有効な接続タイプでフィルター処理して、3g 接続がアプリに与える影響を確認します
- 国でフィルター処理して、データベースの場所が特定の地域に影響していないことを確認します
トレースのデータの表示について詳しくは、こちらをご覧ください。
次のステップ
属性を使用してパフォーマンス データを調べる方法について詳しくは、こちらをご覧ください。
Firebase コンソールでパフォーマンスの問題を追跡する方法の詳細をご覧ください。
アプリのパフォーマンスを低下させているページ読み込みのアラートを設定します。たとえば、特定のページの最初の入力遅延が設定したしきい値を超えた場合に、チームの電子メール アラートを構成できます。