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