Catch up on everthing we announced at this year's Firebase Summit. Learn more

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

あなたのアプリで監視対象プロセスに関する収集データに使用するトレースを監視するパフォーマンス。トレースは、アプリの2つの時点の間にキャプチャされたデータを含むレポートです。

Webアプリケーションの場合は、パフォーマンスの監視は、自動的にページの負荷トレースと呼ばれる、あなたのアプリの各ページのトレースを収集します。各ページロードトレースは、次のデフォルトのメトリックを収集します。

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

  • 最初contentful塗料-メトリックその測定画像やテキストなどのページへの場合、ユーザナビゲートし、意味のあるコンテンツディスプレイ、の間の時間

  • domInteractive -ユーザーのナビゲートページへとときにページがユーザーのために、対話型と考えられている間の時間を計測し、そのメトリック

  • domContentLoadedEventEnd -メトリックその対策際に、ユーザーページに移動との間の時間の初期HTML文書が完全にロードされ、解析されたとき

  • loadEventEnd - Aメトリックその対策ときにページへのユーザーのナビゲートと現在のドキュメントのloadイベントが完了するまでの時間

  • 最初の入力遅延-メトリック対策ページを持つユーザーが対話とするとき、ブラウザがその入力に応答することができるまでの時間をその

あなたはパフォーマンスダッシュボードの下部にあるトレーステーブルのページのロードサブタブ、これらのトレースからのデータを表示することができます(詳細について学ぶコンソールを使用して、このページ以降)。

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

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

ページのロードトレースは、アプリの追跡するのに役立ちコアウェブバイタルを最初contentful塗料のように、。

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

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

最初のペイント

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

このメトリックは、ページがロードされ始めていることをユーザーに最初のペイント信号ので、便利です。

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

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

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

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

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

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

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

domInteractive

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

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

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

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

domContentLoadedEventEnd

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

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

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

loadEventEnd

このメトリックは、ユーザーがページにナビゲートしたときに現在のドキュメントのloadイベントが完了するまでの時間。

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

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

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

最初の入力遅延

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

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

  • ボタンやハイパーリンクをクリックするように、ページ上の要素とするとき、ユーザー最初の相互作用を開始します。

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

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

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

リアルタイムのパフォーマンスデータを表示するには、アプリがリアルタイムのデータ処理と互換性のあるPerformance MonitoringSDKバージョンを使用していることを確認してください。詳細情報

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

あなたの主要指標がトレンドされている方法については、パフォーマンスダッシュボードの一番上にあなたのメトリクスボードに追加します。週ごとの変更を確認するか、コードの最近の変更によってパフォーマンスが向上していることを確認することで、リグレッションをすばやく特定できます。

Firebase PerformanceMonitoringダッシュボードの指標ボードの画像

行き、あなたの評価指標ボードにメトリックを追加するには、パフォーマンスダッシュボードFirebaseコンソールで、その後、ダッシュボード]タブをクリックします。空のメトリックカードをクリックしてから、既存のメトリックを選択してボードに追加します。クリック交換またはメトリックを削除するように、より多くのオプションのための人口メトリックカードに。

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

詳細情報ダッシュボードを使用しました

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

行き、自分の痕跡を表示するには、パフォーマンスダッシュボードトレース台までスクロールダウンし、Firebaseコンソールでは、その後、該当するサブタブをクリックします。この表には、各トレースの上位のメトリックがいくつか表示され、特定のメトリックの変化率でリストを並べ替えることもできます。

トレーステーブルでトレース名をクリックすると、さまざまな画面をクリックしてトレースを探索し、目的のメトリックにドリルダウンできます。ほとんどのページ上では、フィルターを使用することができます 、たとえば、属性によりデータをフィルタリングする(画面の左上)ボタンを:

属性でフィルタリングされているFirebasePerformanceMonitoringデータの画像
  • あなたのサイトの特定のページのデータを表示するページのURLによるフィルタ
  • どのように3G接続への影響のアプリ学ぶための効果的な接続形式による絞り込み
  • データベースの場所が特定の地域に影響を与えていないことを確認するためのフィルタは国によって

詳細はこちらあなたのトレースのデータを表示します

次のステップ