Web向けFirebaseパフォーマンスモニタリング

1。概要

この Codelab では、Firebase Performance Monitoring を使用してチャット ウェブアプリのパフォーマンスを測定する方法を学びます。 https://fireperf-friendlychat.web.app/にアクセスして、ライブ デモをご覧ください。

3b1284f5144b54f6.png

学習内容

  • Web アプリに Firebase Performance Monitoring を追加して、すぐに使用できる指標 (ページの読み込みとネットワーク リクエスト) を取得する方法。
  • カスタム トレースを使用して特定のコードを測定する方法。
  • カスタム トレースに関連付けられた追加のカスタム メトリックを記録する方法。
  • カスタム属性を使用してパフォーマンス データをさらにセグメント化する方法。
  • パフォーマンス監視ダッシュボードを使用して Web アプリのパフォーマンスを理解する方法。

必要なもの

  • WebStorm 、 Atom 、 Sublime 、またはVS Codeなど、任意の IDE またはテキスト エディター
  • ターミナル/コンソール
  • Chrome などの任意のブラウザ
  • Codelab のサンプル コード (コードの取得方法については、この Codelab の次のセクションを参照してください)。

2. サンプルコードを入手する

コマンドラインから Codelab のGitHub リポジトリのクローンを作成します。

git clone https://github.com/firebase/codelab-friendlychat-web

または、git がインストールされていない場合は、リポジトリを zip ファイルとしてダウンロードできます。

スターター アプリをインポートする

IDE を使用して、複製したリポジトリから 📁 performance-monitoring-startディレクトリを開くかインポートします。この 📁 performance-monitoring-startディレクトリには、チャット Web アプリである Codelab の開始コードが含まれています。

3. Firebase プロジェクトを作成して設定する

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

  1. Firebase コンソールで、 [プロジェクトの追加]をクリックします。
  2. Firebase プロジェクトにFriendlyChat名前を付けます。

Firebase プロジェクトのプロジェクト ID を覚えておいてください。

  1. [プロジェクトの作成]をクリックします。

プロジェクトに Firebase ウェブアプリを追加する

  1. Web アイコンをクリックします。 58d6543a156e56f9.png新しい Firebase Web アプリを作成します。
  2. Friendly Chatというニックネームでアプリを登録し、このアプリの Firebase Hosting もセットアップするの横にあるチェックボックスをオンにします。
  3. [アプリを登録]をクリックします。
  4. 残りの手順をクリックします。画面上の指示に従う必要はありません。これらについては、この Codelab の後のステップで説明します。

ea9ab0db531a104c.png

Firebase 認証の Google サインインを有効にする

ユーザーが Google アカウントでチャット アプリにサインインできるようにするには、 Googleサインイン方法を使用します。

Googleログインを有効にする必要があります。

  1. Firebase コンソールで、左側のパネルにある[開発]セクションを見つけます。
  2. [認証]をクリックし、 [サインイン方法]タブ (コンソールに移動) をクリックします。
  3. Googleログイン プロバイダを有効にして、 [保存]をクリックします。

7f3040a646c2e502.png

Cloud Firestore を有効にする

ウェブアプリはCloud Firestoreを使用してチャット メッセージを保存し、新しいチャット メッセージを受信します。

Cloud Firestore を有効にする必要があります。

  1. Firebase コンソールの[開発]セクションで、 [データベース]をクリックします。
  2. Cloud Firestore ペインで[データベースの作成]をクリックします。
  3. [テスト モードで開始]オプションを選択し、セキュリティ ルールに関する免責事項を読んだ後、 [有効にする] をクリックします。

この Codelab のスターター コードには、より安全なルールが含まれています。後で Codelab でデプロイします。

24bd1a097492eac6.png

クラウド ストレージを有効にする

このウェブアプリは、Cloud Storage for Firebase を使用して写真を保存、アップロード、共有します。

Cloud Storage を有効にする必要があります。

  1. Firebase コンソールの[開発]セクションで、 [ストレージ]をクリックします。
  2. [はじめに]をクリックします。
  3. Firebase プロジェクトのセキュリティ ルールに関する免責事項を読み、 [了解]をクリックします。

最初のコードには基本的なセキュリティ ルールが含まれており、後で Codelab でデプロイします。

4. Firebase コマンドライン インターフェースをインストールする

Firebase コマンドライン インターフェース (CLI) を使用すると、Firebase Hosting を使用して Web アプリをローカルで提供したり、Web アプリを Firebase プロジェクトにデプロイしたりできます。

  1. Firebase ドキュメントの次の手順に従って、CLI をインストールします。
  2. ターミナルで次のコマンドを実行して、CLI が正しくインストールされていることを確認します。
firebase --version

Firebase CLI のバージョンが v8.0.0 以降であることを確認してください。

  1. 次のコマンドを実行して、Firebase CLI を承認します。
firebase login

Firebase Hosting 用のアプリの構成をアプリのローカル ディレクトリ (前の Codelab でクローンを作成したリポジトリ) からプルするように、ウェブアプリ テンプレートをセットアップしました。ただし、構成をプルするには、アプリを Firebase プロジェクトに関連付ける必要があります。

  1. コマンドラインがアプリのローカルのperformance-monitoring-startディレクトリにアクセスしていることを確認してください。
  2. 次のコマンドを実行して、アプリを Firebase プロジェクトに関連付けます。
firebase use --add
  1. プロンプトが表示されたら、プロジェクト ID を選択し、Firebase プロジェクトにエイリアスを指定します。

エイリアスは、複数の環境 (本番、ステージングなど) がある場合に役立ちます。ただし、この Codelab では、 defaultのエイリアスだけを使用しましょう。

  1. コマンドラインの残りの指示に従います。

5. Firebase Performance Monitoring と統合する

Web 用の Firebase Performance Monitoring SDK と統合するには、さまざまな方法があります (詳細については、ドキュメントを参照してください)。このコードラボでは、ホスティング URLからのパフォーマンス モニタリングを有効にします。

パフォーマンス モニタリングを追加して Firebase を初期化する

  1. src/index.jsファイルを開き、 TODOの下に次の行を追加して、Firebase Performance Monitoring SDK を含めます。

index.js

// TODO: Import the Firebase Performance Monitoring library here.
 import {
   getPerformance,
   trace
 } from 'firebase/performance';
  1. また、使用する Firebase プロジェクトとウェブアプリに関する情報を含む構成オブジェクトを使用して、Firebase SDK を初期化する必要があります。 Firebase Hosting を使用しているため、この構成を行う特別なスクリプトをインポートできます。この Codelab では、 public/index.htmlファイルの末尾に次の行が既に追加されていますが、そこにあることを再確認してください。

index.html

<!-- This script is created by webpack -->
<script type="module" src="scripts/main.js"></script>
  1. src/index.jsファイルで、 TODOの下に次の行を追加して、パフォーマンス モニタリングを初期化します。

index.js

// TODO: Initialize Firebase Performance Monitoring.
getPerformance();

ユーザーがサイトを使用すると、Performance Monitoring がページの読み込みとネットワーク リクエストの指標を自動的に収集するようになりました。自動ページ読み込みトレースの詳細については、ドキュメントを参照してください。

最初の入力遅延ポリフィル ライブラリを追加します

ユーザー インタラクションに応答するブラウザーは、アプリの応答性に関する第一印象をユーザーに与えるため、初回入力遅延は役立ちます。

最初の入力遅延は、ボタンやハイパーリンクのクリックなど、ユーザーがページ上の要素を最初に操作したときに始まります。ブラウザーが入力に応答できるようになるとすぐに停止します。つまり、ブラウザーはコンテンツの読み込みや解析でビジーではありません。

このポリフィル ライブラリは、パフォーマンス監視の統合ではオプションです。

public/index.htmlファイルを開き、次の行のコメントを外します。

index.html

<!-- TODO: Enable First Input Delay polyfill library. -->
<script type="text/javascript">!function(n,e){var t,o,i,c=[],f={passive:!0,capture:!0},r=new Date,a="pointerup",u="pointercancel";function p(n,c){t||(t=c,o=n,i=new Date,w(e),s())}function s(){o>=0&&o<i-r&&(c.forEach(function(n){n(o,t)}),c=[])}function l(t){if(t.cancelable){var o=(t.timeStamp>1e12?new Date:performance.now())-t.timeStamp;"pointerdown"==t.type?function(t,o){function i(){p(t,o),r()}function c(){r()}function r(){e(a,i,f),e(u,c,f)}n(a,i,f),n(u,c,f)}(o,t):p(o,t)}}function w(n){["click","mousedown","keydown","touchstart","pointerdown"].forEach(function(e){n(e,l,f)})}w(n),self.perfMetrics=self.perfMetrics||{},self.perfMetrics.onFirstInputDelay=function(n){c.push(n),s()}}(addEventListener,removeEventListener);</script>

この時点で、コードで Firebase Performance Monitoring との統合が完了しました。

次の手順では、Firebase Performance Monitoring を使用してカスタム トレースを追加する方法について学習します。自動トレースのみを収集する場合は、「イメージのデプロイと送信の開始」セクションに進んでください。

6. アプリにカスタム トレースを追加する

Performance Monitoring では、カスタム トレースを作成できます。カスタム トレースは、アプリ内の実行ブロックの期間に関するレポートです。 SDK が提供する API を使用して、カスタム トレースの開始と終了を定義します。

  1. src/index.jsファイルでパフォーマンス オブジェクトを取得し、画像メッセージをアップロードするためのカスタム トレースを作成します。

index.js

// TODO: Create custom trace to monitor image upload.
const t = trace(perf, "saveImageMessage");
  1. カスタム トレースを記録するには、トレースの開始点と停止点を指定する必要があります。トレースはタイマーと考えることができます。

index.js

// TODO: Start the "timer" for the custom trace.
t.start();

 ...

    // TODO: Stop the "timer" for the custom trace.
    t.stop();

カスタム トレースが正常に定義されました。コードをデプロイした後、ユーザーが画像メッセージを送信すると、カスタム トレースの期間が記録されます。これにより、実際のユーザーがチャット アプリで画像を送信するのにかかる時間がわかります。

7. カスタム指標をアプリに追加します。

カスタム トレースをさらに構成して、そのスコープ内で発生するパフォーマンス関連のイベントのカスタム メトリックを記録できます。たとえば、メトリクスを使用して、前のステップで定義したカスタム トレースの画像のサイズがアップロード時間に影響するかどうかを調査できます。

  1. 前のステップのカスタム トレースを見つけます ( src/index.jsファイルで定義)。
  2. TODOの下に次の行を追加して、アップロードされた画像のサイズを記録します。

index.js

 ...

// TODO: Record image size.
t.putMetric('imageSize', file.size);

 ...

このメトリクスにより、パフォーマンス モニタリングが可能になり、カスタム トレース期間とアップロードされたイメージ サイズを記録できます。

8. アプリにカスタム属性を追加する

前の手順に基づいて、カスタム トレースでカスタム属性を収集することもできます。カスタム属性は、アプリ固有のカテゴリ別にデータをセグメント化するのに役立ちます。たとえば、イメージ ファイルの MIME タイプを収集して、MIME タイプがパフォーマンスに与える影響を調べることができます。

  1. src/index.jsファイルで定義されたカスタム トレースを使用します。
  2. TODOの下に次の行を追加して、アップロードされた画像の MIME タイプを記録します。

index.js

 ...

// TODO: Record image MIME type.
t.putAttribute('imageType', file.type);

 ...

この属性により、アップロードされたイメージの種類に基づいてカスタム トレース期間を分類するためのパフォーマンス モニタリングが可能になります。

9. [拡張] User Timing API でカスタム トレースを追加する

Firebase Performance Monitoring SDK は、非同期で読み込むことができるように設計されているため、ページの読み込み中にウェブアプリのパフォーマンスに悪影響を与えることはありません。 SDK が読み込まれる前は、Firebase Performance Monitoring API は使用できません。このシナリオでは、 User Timing APIを使用してカスタム トレースを追加できます。 Firebase performance SDK は、 measure()から期間を取得し、カスタム トレースとしてログに記録します。

User Timing API を使用して、アプリのスタイリング スクリプトの読み込み時間を測定します。

  1. public/index.htmlファイルに次の行を追加して、アプリのスタイリング スクリプトの読み込みの開始をマークします。

index.html

<!-- TODO: Mark the starting of `timer` for loading App Styling script. -->
<script type="text/javascript">performance && performance.mark('loadStylingStart');</script>
  1. 次の行を追加して、アプリ スタイリング スクリプトの読み込みの終了をマークし、開始から終了までの時間を測定します。

index.html

<!-- TODO: Mark the ending of `timer` for loading App Styling script. Measure the duration from start to end. -->
<script type="text/javascript">
  performance && performance.mark('loadStylingEnd');
  performance && performance.measure('loadStyling', 'loadStylingStart', 'loadStylingEnd');
</script>

ここで作成したエントリは、Firebase Performance Monitoring によって自動的に収集されます。後で Firebase Performance コンソールでloadStylingというカスタム トレースを見つけることができます。

10. イメージのデプロイと送信の開始

Firebase Hosting にデプロイする

Firebase Performance Monitoring をコードに追加したら、次の手順に従ってコードを Firebase Hosting にデプロイします。

  1. コマンドラインがアプリのローカルのperformance-monitoring-startディレクトリにアクセスしていることを確認してください。
  2. 次のコマンドを実行して、ファイルを Firebase プロジェクトにデプロイします。
firebase deploy
  1. コンソールには次のように表示されます。
=== Deploying to 'friendlychat-1234'...

i  deploying firestore, storage, hosting
i  storage: checking storage.rules for compilation errors...
✔  storage: rules file storage.rules compiled successfully
i  firestore: checking firestore.rules for compilation errors...
✔  firestore: rules file firestore.rules compiled successfully
i  storage: uploading rules storage.rules...
i  firestore: uploading rules firestore.rules...
i  hosting[friendlychat-1234]: beginning deploy...
i  hosting[friendlychat-1234]: found 8 files in ./public
✔  hosting[friendlychat-1234]: file upload complete
✔  storage: released rules storage.rules to firebase.storage/friendlychat-1234.appspot.com
✔  firestore: released rules firestore.rules to cloud.firestore
i  hosting[friendlychat-1234]: finalizing version...
✔  hosting[friendlychat-1234]: version finalized
i  hosting[friendlychat-1234]: releasing new version...
✔  hosting[friendlychat-1234]: release complete

✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/friendlychat-1234/overview
Hosting URL: https://friendlychat-1234.firebaseapp.com
  1. 独自の 2 つの Firebase サブドメイン ( https://<projectId>.firebaseapp.comおよびhttps://<projectId>.web.appで、Firebase Hosting を使用して完全にホストされているウェブ アプリにアクセスします。

パフォーマンス監視が有効になっていることを確認する

Firebase コンソールを開き、 [パフォーマンス]タブに移動します。 「SDK が検出されました」というウェルカム メッセージが表示された場合は、Firebase Performance Monitoring と正常に統合されています。

30df67e5a07d03b0.png

イメージメッセージを送る

チャット アプリで画像を送信して、パフォーマンス データを生成します。

  1. チャット アプリにサインインした後、画像のアップロード ボタンをクリックします。 13734cb66773e5a3.png .
  2. ファイル ピッカーを使用して画像ファイルを選択します。
  3. カスタム メトリックとカスタム属性の分布をテストできるように、複数の画像を送信してみてください (いくつかのサンプルはpublic/images/に保存されています)。

新しいメッセージは、選択した画像とともにアプリの UI に表示されます。

11. ダッシュボードを監視する

ウェブアプリをデプロイし、ユーザーとして画像メッセージを送信したら、パフォーマンス モニタリング ダッシュボード（Firebase コンソール内）でパフォーマンス データを確認できます。

ダッシュボードにアクセスする

  1. Firebase コンソールで、 Friendly Chatアプリを含むプロジェクトを選択します。
  2. 左側のパネルで、 [品質]セクションを見つけて、 [パフォーマンス]をクリックします。

デバイス上のデータを確認する

パフォーマンス モニタリングによってアプリのデータが処理されると、ダッシュボードの上部にタブが表示されます。データやタブがまだ表示されていない場合は、後でもう一度確認してください。

  1. [デバイス上]タブをクリックします。
  • ページ読み込みテーブルには、ページの読み込み中にパフォーマンス監視が自動的に収集するさまざまなパフォーマンス メトリックが表示されます。
  • Durationテーブルには、アプリのコードで定義したカスタム トレースが表示されます。
  1. [期間]テーブルで[saveImageMes​​sage]をクリックして、トレースの特定のメトリックを確認します。

e28758fd02d9ffac.png

  1. Aggregateをクリックして、画像サイズの分布を確認します。このカスタム トレースの画像サイズを測定するために追加したメトリックを確認できます。

c3cbcfc0c739a0a8.png

  1. 前の手順で[集計]の横にある[時間経過]をクリックします。カスタム トレースの期間を表示することもできます。 [さらに表示]をクリックして、収集されたデータをさらに詳しく確認します。

16983baa31e05732.png

  1. 開いたページで、 imageTypeをクリックして、画像の MIME タイプごとに期間データをセグメント化できます。カスタム トレースに追加した imageType 属性のために、この特定のデータがログに記録されました。

8e5c9f32f42a1ca1.png

ネットワーク データの確認

HTTP/S ネットワーク要求は、ネットワーク呼び出しの応答時間とペイロード サイズをキャプチャするレポートです。

  1. パフォーマンス監視ダッシュボードのメイン画面に戻ります。
  2. [ネットワーク]タブをクリックして、Web アプリのネットワーク要求エントリの一覧を表示します。
  3. それらをブラウズして遅いリクエストを特定し、アプリのパフォーマンスを改善するための修正に取り掛かりましょう!

26a2be152a77ffb9.png

12.おめでとう！

パフォーマンス モニタリング用に Firebase SDK を有効にし、自動トレースとカスタム トレースを収集して、チャット アプリの実際のパフォーマンスを測定しました。

カバーした内容:

  • Firebase Performance Monitoring SDK をウェブアプリに追加します。
  • コードにカスタム トレースを追加します。
  • カスタム トレースに関連付けられたカスタム メトリックを記録します。
  • カスタム属性を使用したパフォーマンス データのセグメント化。
  • パフォーマンス監視ダッシュボードを使用してアプリのパフォーマンスに関する洞察を得る方法を理解する。

もっと詳しく知る：