Google は、黒人コミュニティのための人種的公平の促進に取り組んでいます。詳細をご覧ください。
このページは Cloud Translation API によって翻訳されました。
Switch to English

ページ読み込みパフォーマンスデータ(Webアプリ)について学ぶ

Performance Monitoringは、トレースを使用して、アプリ内の監視対象プロセスに関するデータを収集します。トレースは、アプリの2つの時点の間にキャプチャされたデータを含むレポートです。

Webアプリの場合、パフォーマンスモニタリングは、ページ読み込みトレースと呼ばれるアプリの各ページのトレースを自動的に収集します。各ページロードトレースは、次のデフォルトメトリックを収集します。

  • 最初の塗料-対策そのメトリックときにページへのユーザナビゲートしたときに任意の視覚的な変更が起こるまでの時間

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

  • domInteractive —ユーザーがページに移動してからページがユーザーにとってインタラクティブであると見なされるまでの時間を測定するメトリック

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

  • loadEventEnd —ユーザーがページに移動してから現在のドキュメントのロードイベントが完了するまでの時間を測定するメトリック。

  • 最初の入力遅延—ユーザーがページを操作してからブラウザーがその入力に応答できるようになるまでの時間を測定するメトリック

Firebaseコンソールの[デバイス上]タブでページ読み込みトレースのデータを表示します(詳細については、このページで後述します)。

ページロードトレースの定義

このトレースは、アプリ内のページがどのように読み込まれるか、具体的にはレスポンシブアプリなどの一般的な読み込みポイントに到達するまでにかかる時間に関するいくつかの指標を測定します。

ページ読み込みトレースは、最初のコンテンツの多いペイントなど、アプリのコアWebバイタルを追跡するのに役立ちます。

ページ読み込みトレース用に収集されたメトリック

これらのトレースはすぐに使用できるトレースであるため、カスタムメトリックまたはカスタム属性を追加することはできません。

最初のペイント

このメトリックは、ユーザーがページに移動するとき、任意の視覚的な変更が発生したときの間の時間。

このメトリックは、最初のペイントがページの読み込みを開始していることをユーザーに通知するので便利です。

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

  • ビジュアル変更が発生したときに背景色の変更またはヘッダローディングを含む、停止します。

最初の満足のいくペイント

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

この指標は、新しい背景色やヘッダーだけでなく、ユーザーがアプリの実際のコンテンツをどれだけ早く表示できるかを把握するのに役立ちます。

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

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

domInteractive

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

この指標は、ユーザーが画面に表示されるだけでなく、ボタンやハイパーリンクなどのアプリ内の要素を実際に操作できるようになるまでの時間を知るのに役立ちます。これは、ブラウザがインタラクションに応答することを意味するものではないことに注意してください(このメトリックについては、最初の入力遅延トレースを参照してください)。

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

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

domContentLoadedEventEnd

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

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

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

loadEventEnd

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

このメトリックは、スタイルシートや画像を含むすべてのコンテンツの読み込みにかかる時間を調べるのに役立ちます。

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

  • 現在のHTMLドキュメントのロードイベントが完了した直後に停止します。

最初の入力遅延

このメトリックは、ユーザーがページを操作してからブラウザーがその入力に応答できるようになるまでの時間を測定します。

この指標は、ユーザーインタラクションに応答するブラウザが、アプリの応答性に関する第一印象をユーザーに与えるため、便利です。

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

  • ブラウザが入力に応答できるようになるとすぐに停止します。つまり、ブラウザはコンテンツの読み込みや解析に忙しくありません。

最初の入力遅延メトリックを測定するには、このメトリックのポリフィルライブラリを追加する必要があることに注意してください。インストール手順については、ライブラリのドキュメントを参照してください。

パフォーマンスデータの追跡、表示、およびフィルタリング

ダッシュボードで主要な指標を追跡する

主要な指標をダッシュ​​ボードに追加して、それらの傾向を確認します。週ごとの変更を確認するか、コードの最近の変更によってパフォーマンスが向上していることを確認することで、リグレッションをすばやく特定できます。

Firebase PerformanceMonitoringメトリクスダッシュボードの画像

ダッシュボードに指標を追加するには、Firebaseコンソールの[パフォーマンス]ダッシュボードに移動し、[ダッシュボード]タブをクリックします。空のメトリックカードをクリックしてから、ダッシュボードに追加する既存のメトリックを選択します。メトリックの置き換えや削除などのオプションについては、入力されたメトリックカードのをクリックしてください。

ダッシュボードには、収集されたメトリックデータが、グラフ形式と数値のパーセンテージ変化の両方で表示されます。

ダッシュボードの使用の詳細をご覧ください。

すべてのトレースとそのデータを表示する

これらのトレースを表示するには、Firebaseコンソールのパフォーマンスダッシュボードに移動し、[デバイス上]タブをクリックします。

[デバイス上]タブから、さまざまな画面をクリックしてトレースを探索し、関心のある指標にドリルダウンできます。ほとんどのページでは、[ フィルター]ボタン(画面の左上)を使用して、属性でデータをフィルター処理できます。次に例を示します。

属性でフィルタリングされているFirebasePerformanceMonitoringデータの画像
  • ページのURLでフィルタリングして、サイトの特定のページのデータを表示します
  • 効果的な接続タイプでフィルタリングして、3g接続がアプリに与える影響を確認します
  • 国でフィルタリングして、データベースの場所が特定の地域に影響を与えていないことを確認します

トレースのデータの表示の詳細をご覧ください

次のステップ