ウェブ向け 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.addEventListener('load',function(){firebase.initializeApp(fbc).performance()});
})(performance_standalone, firebaseConfig);

ここで

  • performance_standalone'https://www.gstatic.com/firebasejs/7.15.1/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/7.15.1/firebase-app.js"></script>
    
      <!-- Add the standard Performance Monitoring library -->
      <script src="https://www.gstatic.com/firebasejs/7.15.1/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/7.15.1/firebase-app.js"></script>
    
      <!-- Add the Performance Monitoring library -->
      <script src="/__/firebase/7.15.1/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: 初期データ表示用のパフォーマンス イベントを生成する

Firebase はアプリからイベント情報(アプリの操作など)を受け取るときに、アプリに SDK が正常に追加されたことを検出できます。ローカルで開発している場合は、アプリを操作して、SDK 検出と初期データの収集と処理のイベントを生成します。

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

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

  3. Firebase コンソールの [Performance] セクションに移動して、Firebase が SDK を検出したかどうかを確認します。

    「SDK を検出しました」というメッセージが表示されない場合は、トラブルシューティングのヒントをご覧ください。

  4. Performance Monitoring がパフォーマンス イベントデータを処理した後に、パフォーマンス ダッシュボードにそのデータが表示されます。SDK 検出メッセージが表示されてから 24 時間以内に初期データが表示されます。

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

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

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

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

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

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

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

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

カスタム トレースを作成して、アプリ内の特定のコードに関連付けられたパフォーマンス データをモニタリングできます。

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

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

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

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

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

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

次のステップ