Check out what’s new from Firebase at Google I/O 2022. Learn more

ウェブ向け Performance Monitoring を使ってみる

始める前に

次の方法をまだ確認していない場合は、Firebase を JavaScript プロジェクトに追加するで詳細をご覧ください。

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

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

アプリに Firebase を追加するときに、このページで後述する手順の一部（SDK の追加や Firebase の初期化など）が必要になる場合があります。

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

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

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

ウェブ バージョン 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);

ウェブ バージョン 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 は他のウェブアプリ指標を報告できます。

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

SDK がアプリに正常に追加されると、Firebase によりイベントの処理が開始されます。引き続きローカルで開発を行っている場合は、アプリを操作して、初期データの収集と処理用のイベントを生成します。

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

  2. サイトのサブページを読み込んだり、アプリを操作したり、ネットワーク リクエストをトリガーしたりして、イベントを生成します。ページが読み込まれた後、ブラウザのタブを 10 秒以上開いたままにします。

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

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

ステップ 4:（省略可）パフォーマンス イベントのログメッセージを表示する

  1. ブラウザのデベロッパー ツール（Chrome デベロッパー ツールの [Network] タブや Firefox のネットワーク モニターなど）を開きます。

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

  3. ログメッセージにエラー メッセージがないか確認します。

  4. 数秒後、ブラウザのデベロッパー ツールで、firebaselogging.googleapis.com に対するネットワーク呼び出しを確認します。ネットワーク呼び出しが存在する場合、ブラウザがパフォーマンス データを Firebase に送信しています。

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

ステップ 5: （省略可）特定のコードにカスタム モニタリングを追加する

アプリの特定のコードに関連付けられたパフォーマンス データをモニタリングするには、カスタムコード トレースを計測可能にします。

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

コードで、Performance Monitoring SDK に用意された API を使用して、カスタムコード トレースの開始と終了を定義（および必要なカスタム指標を追加）します。

これらの機能の詳細とアプリに追加する方法については、特定のコードにモニタリングを追加するをご覧ください。

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

Performance Monitoring を検証したら、アプリのアップデート バージョンをユーザーにデプロイします。

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

次のステップ