Firebase Summit で発表されたすべての情報をご覧ください。Firebase を使用してアプリ開発を加速し、自信を持ってアプリを実行する方法を紹介しています。詳細

Webのパフォーマンス監視を開始する

コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。

あなたが始める前に

まだ行っていない場合は、JavaScript プロジェクトに Firebase を追加するにアクセスして、次の方法を確認してください。

  • Firebase プロジェクトを作成する

  • ウェブアプリを Firebase に登録する

アプリに Firebase を追加するときは、このページで後述する手順の一部を完了する場合があることに注意してください (たとえば、SDK の追加と Firebase の初期化)。

ステップ 1 : Performance Monitoring を追加して初期化する

  1. Firebase JS SDK をまだインストールしていない場合は、インストールして Firebase を初期化します。

  2. Performance Monitoring JS SDK を追加し、Performance Monitoring を初期化します。

Web version 9

import { initializeApp } from "firebase/app";
import { getPerformance } from "firebase/performance";

// TODO: Replace the following with your app's Firebase project configuration
// See: https://firebase.google.com/docs/web/learn-more#config-object
const firebaseConfig = {
  // ...
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);


// Initialize Performance Monitoring and get a reference to the service
const perf = getPerformance(app);

Web version 8

import firebase from "firebase/app";
import "firebase/performance";

// TODO: Replace the following with your app's Firebase project configuration
// See: https://firebase.google.com/docs/web/learn-more#config-object
const firebaseConfig = {
  // ...
};

// Initialize Firebase
firebase.initializeApp(firebaseConfig);


// Initialize Performance Monitoring and get a reference to the service
const perf = firebase.performance();

ステップ 2 : 最初の入力遅延ポリフィル ライブラリを追加する

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

このポリフィル ライブラリを追加することは、Performance Monitoring が他の Web アプリ メトリックをレポートするために必要ではありません。

ステップ 3 : 初期データ表示用のパフォーマンス イベントを生成する

SDK をアプリに正常に追加すると、Firebase はイベントの処理を開始します。まだローカルで開発している場合は、アプリを操作して、初期データの収集と処理のためのイベントを生成します。

  1. Web アプリをローカル環境で提供および表示します。

  2. サイトのサブページの読み込み、アプリとの対話、および/またはネットワーク リクエストのトリガーによって、イベントを生成します。ページが読み込まれた後、少なくとも 10 秒間はブラウザのタブを開いたままにしてください。

  3. Firebase コンソールのパフォーマンスダッシュボードに移動します。数分以内に最初のデータが表示されます。

    初期データが表示されない場合は、トラブルシューティングのヒントを確認してください。

ステップ 4 : (オプション)パフォーマンス イベントのログ メッセージを表示する

  1. ブラウザーの開発者ツールを開きます (たとえば、 Chrome 開発ツールの [ネットワーク] タブまたはFirefox のネットワーク モニター)。

  2. ブラウザーで Web アプリを更新します。

  3. ログ メッセージでエラー メッセージを確認します。

  4. 数秒後、ブラウザの開発者ツールでfirebaselogging.googleapis.comへのネットワーク呼び出しを探します。そのネットワーク呼び出しの存在は、ブラウザがパフォーマンス データを Firebase に送信していることを示しています。

アプリがパフォーマンス イベントをログに記録していない場合は、トラブルシューティングのヒントを確認してください。

ステップ 5 : (オプション)特定のコードのカスタム モニタリングを追加する

アプリ内の特定のコードに関連付けられたパフォーマンス データを監視するために、カスタム コード トレースを計測できます。

カスタム コード トレースを使用すると、一連の画像の読み込みやデータベースへのクエリなど、アプリが特定のタスクまたは一連のタスクを完了するのにかかる時間を測定できます。カスタム コード トレースのデフォルトのメトリックはその期間ですが、キャッシュ ヒットやメモリ警告などのカスタム メトリックを追加することもできます。

コードでは、Performance Monitoring SDK によって提供される API を使用して、カスタム コード トレースの開始と終了を定義します (必要なカスタム メトリックを追加します)。

これらの機能とそれらをアプリに追加する方法について詳しくは、特定のコードの監視を追加するをご覧ください。

ステップ 6 : アプリをデプロイして結果を確認する

Performance Monitoring を検証したら、更新されたバージョンのアプリをユーザーにデプロイできます。

Firebase コンソールのパフォーマンスダッシュボードでパフォーマンス データをモニタリングできます。

次のステップ