コンソールへ移動

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

始める前に

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

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

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

Firebase プロジェクトにアプリを追加するときに、次のガイドに記載されている作業の一部が必要になる場合があります(たとえば、Firebase SDK の追加と Firebase の初期化など)。

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

まだ行っていない場合は、次のいずれかの方法で Performance Monitoring SDK を追加し、アプリで Firebase を初期化します。方法を選択する際は、次の点を考慮してください(詳細は個々のタブを参照)。

  • CDN から(スタンドアロン SDK) - アプリで使用する Firebase プロダクトが Performance Monitoring だけの場合、CDN から軽量の SDK を読み込みます。

  • CDN から(標準 SDK) - アプリで他の Firebase プロダクトを使用している場合は、CDN から Performance Monitoring SDK と他の Firebase ライブラリを読み込みます。

  • Hosting URL から - Firebase Hosting を使用している場合は、この方法が便利です。Firebase を初期化するときに Firebase の構成を管理できます。

  • モジュール バンドラを使用する - バンドラ(Browserify や webpack など)を使用している場合は、必要に応じて個々のモジュールをインポートします。

SDK を追加すると、Firebase は自動トレースHTTP/S ネットワーク リクエストのモニタリングをすぐに開始します。

CDN から

Firebase JavaScript SDK の部分的なインポートを構成し、必要な Firebase ライブラリのみを読み込むことができます。Firebase は、Firebase JavaScript SDK の各ライブラリをグローバル CDN(コンテンツ配信ネットワーク)に格納しています。

CDN から Performance Monitoring SDK を追加する場合、次の 2 つの選択肢があります。

  • スタンドアロン SDK - Performance Monitoring が、アプリで使用する唯一の Firebase プロダクトの場合。
  • 標準 SDK - アプリで Performance Monitoring と一緒に他の Firebase プロダクトを使用している場合。

スタンドアロン SDK

アプリで使用している Firebase プロダクトが Performance Monitoring だけで、次のことを行いたい場合は、スタンドアロンの Performance Monitoring SDK と以下の推奨ヘッダー スクリプトを使用します。

  • SDK パッケージ サイズを小さくする
  • ページが読み込まれるまで SDK の初期化を延期する

アプリにスタンドアロンの Performance Monitoring SDK を追加し、ページが読み込まれるまで初期化を延期するには、次の操作を行います。

  1. 次のスクリプトをインデックス ファイルのヘッダーに追加します。
  2. アプリの Firebase プロジェクト構成オブジェクトを追加します。
(function(sa,fbc){function load(f,c){var a=document.createElement('script');
a.async=1;a.src=f;var s=document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(a,s);}load(sa);window.onload = function() {firebase.initializeApp(fbc).performance();};
})(performance_standalone, firebaseConfig);

ここで

  • performance_standalone'https://www.gstatic.com/firebasejs/6.4.0/firebase-performance-standalone.js' です。
  • firebaseConfig はアプリの Firebase 構成オブジェクトです。

上記のスクリプトはスタンドアロン SDK を非同期で読み込み、ウィンドウの onload イベントが発生した後で Firebase を初期化します。この方法では、SDK を初期化する時点でブラウザが読み込み指標をすでに報告しているため、SDK がページの読み込み指標に及ぼす影響が少なくなります。

標準 SDK

アプリで他の Firebase プロダクト(Authentication や Cloud Firestore など)を使用していない場合は、標準の Performance Monitoring SDK を組み込みます。

この SDK を使用するには、標準の Firebase コア SDK を別途組み込み、別のスクリプトで Firebase と Performance Monitoring を初期化する必要があります。

  1. 標準の Performance Monitoring SDK を追加するには、<body> タグの最後に次のスクリプトを追加します。ただし、このスクリプトは Firebase プロダクトを使用する前に実行される必要があります。

    <body>
      <!-- Insert these scripts at the bottom of the HTML, but before you use any Firebase services -->
    
      <!-- Firebase App (the core Firebase SDK) is always required and must be listed first -->
      <script src="https://www.gstatic.com/firebasejs/6.4.0/firebase-app.js"></script>
    
      <!-- Add the standard Performance Monitoring library -->
      <script src="https://www.gstatic.com/firebasejs/6.4.0/firebase-performance.js"></script>
    <body>
    
  2. アプリで Firebase と Performance Monitoring を初期化します。

    <body>
    <!-- Previously loaded Firebase SDKs -->
    
    <script>
      // TODO: Replace the following with your app's Firebase project configuration
      var firebaseConfig = {
        // ...
      };
    
      // Initialize Firebase
      firebase.initializeApp(firebaseConfig);
    
      // Initialize Performance Monitoring and get a reference to the service
      var perf = firebase.performance();
    </script>
    </body>
    

Hosting URL から

Firebase Hosting を使用する場合は、Firebase JavaScript SDK ライブラリを予約済みの URL から動的に読み込むようにアプリを構成できます。詳しくは、予約済みの Hosting URL から SDK を追加するをご覧ください。

この設定オプションでは、Firebase にデプロイした後で、デプロイされた Firebase プロジェクトから Firebase 構成オブジェクトが自動的に取得されます。同じコードベースを複数の Firebase プロジェクトにデプロイできますが、firebase.initializeApp() に使用している Firebase の構成を追跡する必要はありません。

  1. Performance Monitoring SDK を追加するには、<body> タグの最後に次のスクリプトを追加します。ただし、このスクリプトは Firebase プロダクトを使用する前に実行される必要があります。

    <body>
      <!-- Insert these scripts at the bottom of the HTML, but before you use any Firebase services -->
    
      <!-- Firebase App (the core Firebase SDK) is always required and must be listed first -->
      <script src="/__/firebase/6.4.0/firebase-app.js"></script>
    
      <!-- Add the Performance Monitoring library -->
      <script src="/__/firebase/6.4.0/firebase-performance.js"></script>
    </body>
    
  2. アプリで Firebase と Performance Monitoring を初期化します。予約済みの Hosting URL を使用する場合、Firebase 構成オブジェクトを含める必要はありません。

    <body>
      <!-- Previously loaded Firebase SDKs -->
    
      <!-- Initialize Firebase -->
      <script src="/__/firebase/init.js"></script>
    
      <!-- Initialize Performance Monitoring and get a reference to the service -->
      <script>
        var perf = firebase.performance();
        // ...
      </script>
    </body>
    

モジュール バンドラを使用する

Firebase JavaScript SDK の部分的なインポートを構成し、必要な Firebase プロダクトのみを読み込むことができます。バンドラ(Browserify や webpack など)を使用している場合は、必要に応じて import を使用して個々の Firebase プロダクトをインポートします。

  1. 次のコマンドを実行して firebase npm パッケージをインストールし、package.json ファイルに保存します。

    npm install --save firebase
  2. import で Firebase モジュールをインポートし、Performance Monitoring SDK を追加します。

    // Firebase App (the core Firebase SDK) is always required and must be listed first
    import * as firebase from "firebase/app";
    
    // Add the Performance Monitoring library
    import "firebase/performance";
    
  3. アプリで Firebase と Performance Monitoring を初期化します。

    // TODO: Replace the following with your app's Firebase project configuration
    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: Performance Monitoring がデータをログに記録していることを確認する

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

  2. 数秒後、Chrome デベロッパー ツールの [ネットワーク] タブまたは Firefox のネットワーク モニターで、firebaselogging.googleapis.com に対するネットワーク呼び出しを確認します。

    ネットワーク呼び出しが存在する場合、ブラウザがパフォーマンス データを Firebase に送信しています。

  3. Firebase コンソールに Performance Monitoring の結果が表示されていることを確認します。

    結果は通常 12 時間以内に表示されます。

ステップ 4: (省略可)カスタム トレースとカスタム指標を追加する

カスタム トレースは、アプリ内の特定のコードに関連付けられたパフォーマンス データのレポートです。カスタム トレースの詳細については、Performance Monitoring の概要を参照してください。

アプリには複数のカスタム トレースを設定し、一度に複数を実行できます。各カスタム トレースには、アプリ内のパフォーマンス関連のイベントをカウントする 1 つ以上の指標を設定でき、これらの指標は、指標を作成するトレースに関連付けられています。

カスタム トレースと指標の名前には制限があります。先頭または末尾が空白文字でなく、先頭がアンダースコア(_)でない 32 文字以下の名前にする必要があります。

  1. カスタム トレースを開始して停止するには、トレースするコードを次のようなコード行で囲みます。

    const trace = perf.trace('customTraceName');
    trace.start();
    
    // code that you want to trace
    
    trace.stop();
    
  2. カスタム指標を追加するには、次のようなコードを追加し、イベントが発生するたびにコードが実行されるようにします。たとえば、このカスタム指標は、アプリで発生したパフォーマンス関連のイベントをカウントします。

    async function getInventory(inventoryIds) {
      const trace = perf.trace('inventoryRetrieval');
    
      // Tracks the number of IDs fetched (the metric could help you to optimize in the future)
      trace.incrementMetric('numberOfIds', inventoryIds.length);
    
      // Measures the time it takes to request inventory based on the amount of inventory
      trace.start();
      const inventoryData = await retrieveInventory(inventoryIds);
      trace.stop();
    
      return inventoryData;
    }
    

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

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

Firebase コンソールでパフォーマンス データをモニタリングできます。

次のステップ