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

始める前に

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

Firebase プロジェクトを作成する
Firebase にウェブアプリを登録する

ウェブアプリで Performance Monitoring を使用する場合は、Firebase コンソールでアプリを Firebase ウェブアプリとして追加する必要があります。

既存のウェブアプリで Firebase プロダクトをすでに使用している環境で Performance Monitoring SDK を初めて使用する場合は、Firebase 構成オブジェクトを更新して appID を含める必要があります。

アプリに 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 など）を使用している場合は、必要に応じて個々のモジュールをインポートします。

Performance Monitoring 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 を追加し、ページが読み込まれるまで初期化を延期するには、次の操作を行います。

次のスクリプトをインデックスファイルのヘッダーに追加します。
アプリの 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.addEventListener('load',function(){firebase.initializeApp(fbc).performance()});
})(performance_standalone, firebaseConfig);

ここで

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

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

スタンドアロンの Performance Monitoring SDK とヘッダースクリプトについて

このスタンドアロン SDK はサイズが小さくなるよう最適化されています。gzip で圧縮され、約 10 KB です。Firebase Performance Monitoring のすべての機能と Firebase コア SDK 機能の最小セットが含まれています。

Firebase Performance Monitoring が使用する API（fetch と Promise）は、古いブラウザで機能しません。これらの API のポリフィルは標準の Firebase Performance Monitoring JS SDK に含まれていますが、サイズを小さくするため、スタンドアロン SDK には含まれていません。

ブラウザからページ読み込み指標を取得するため、Performance Monitoring SDK は Resource Timing API に部分的に依存しています。

次のスニペットはヘッダースクリプトの一部で、最後に SDK の初期化を延期しています。

(function(sdkSource, firebaseConfigObject) {
   function load(f, c) {
       // Creates a script tag to load the standalone SDK
       var sdkScript = document.createElement('script');

       // Sets it to an async script so that it doesn't interfere with page load
       sdkScript.async = 1;

       // Sets the source of the script
       sdkScript.src = f;

       // Inserts the script into the head of the page
       var s = document.getElementsByTagName('script')[0];
       s.parentNode.insertBefore(sdkScript, s);
   }

   // Calls the load method
   load(sdkSource);

   // Initializes the SDK only when the onload method is called
   window.addEventListener('load', function() {
       firebase.initializeApp(firebaseConfigObject).performance();
   });
})(performance_standalone, firebaseConfig);

ここで

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

標準 SDK

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

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

標準の 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/8.7.0/firebase-app.js"></script>

  <!-- Add the standard Performance Monitoring library -->
  <script src="https://www.gstatic.com/firebasejs/8.7.0/firebase-performance.js"></script>
<body>

アプリで 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 の構成を追跡する必要はありません。

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/8.7.0/firebase-app.js"></script>

  <!-- Add the Performance Monitoring library -->
  <script src="/__/firebase/8.7.0/firebase-performance.js"></script>
</body>

アプリで 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>

予約済みの Hosting URL を使用する場合、Performance Monitoring の統合をローカルでテストします。

Performance Monitoring の統合をローカルでテストする場合、現時点では、firebase serve は URL /__/firebase/init.js を介した Performance Monitoring 向け Firebase の初期化をサポートしていません。代わりに、次のように Firebase 構成オブジェクトを含めて Firebase を初期化してください。

  <body>
    <!-- Previously loaded Firebase SDKs (via Hosting URLs) -->

    <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>

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

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

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

import で Firebase モジュールをインポートし、Performance Monitoring SDK を追加します。

// Firebase App (the core Firebase SDK) is always required and must be listed first
import firebase from "firebase/app";

// If you are using v7 or any earlier version of the JS SDK, you should import firebase using namespace import
// import * as firebase from "firebase/app"

// Add the Performance Monitoring library
import "firebase/performance";

アプリで 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: 初期データ表示用のパフォーマンスイベントを生成する

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

ローカル環境でウェブアプリを提供および表示します。
サイトのサブページを読み込んだり、アプリを操作したり、ネットワークリクエストをトリガーしたりして、イベントを生成します。ページが読み込まれた後、ブラウザのタブを 10 秒以上開いたままにします。
Firebase コンソールのパフォーマンスダッシュボードに移動します。初期データが数分以内に表示されます。

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

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

ブラウザのデベロッパーツール（Chrome デベロッパーツールの [Network] タブや Firefox のネットワークモニターなど）を開きます。
ブラウザでウェブアプリを更新します。
ログメッセージにエラーメッセージがないか確認します。
数秒後、ブラウザのデベロッパーツールで、firebaselogging.googleapis.com に対するネットワーク呼び出しを確認します。ネットワーク呼び出しが存在する場合、ブラウザがパフォーマンスデータを Firebase に送信しています。

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

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

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

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

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

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

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

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

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

次のステップ

ウェブ Codelab 向け Firebase Performance Monitoring を使用して実際に体験する。
Performance Monitoring によって自動的に収集されるデータの詳細を確認する。
- アプリ内のページ読み込みのデータ
- アプリによって発行された HTTP/S ネットワークリクエストのデータ
Firebase コンソールでパフォーマンスデータを表示、追跡、フィルタする
カスタムコードトレースをインストルメント化して、アプリ内の特定のタスクまたはワークフローのモニタリングを追加する
属性を使用してパフォーマンスデータをフィルタする