このページは Cloud Translation API によって翻訳されました。

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

1。概要

このコードラボでは、Firebase PerformanceMonitoringを使用してチャットウェブアプリのパフォーマンスを測定する方法を学習します。訪問https://fireperf-friendlychat.web.app/をライブデモを見ること。

あなたが学ぶこと

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

必要なもの

など、お好みのIDEまたはテキストエディタ、 WebStorm 、アトム、サブライム、またはVSコード
ターミナル/コンソール
Chromeなどの選択したブラウザ
コードラボのサンプルコード（コードの取得方法については、このコードラボの次のセクションを参照してください）。

2.サンプルコードを取得します

クローンコードラボのGitHubのリポジトリ、コマンドラインから：

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

あなたはGitがインストールされていない場合は別の方法として、次のことができますzipファイルとしてレポをダウンロードしてください。

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

オープン、あなたのIDEを使用したり📁インポートperformance-monitoring-startクローン化されたリポジトリからディレクトリを。この📁 performance-monitoring-startディレクトリは、チャット、ウェブアプリでコードラボ、の開始コードが含まれています。

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

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

でFirebaseコンソール、クリックプロジェクトを追加します。
あなたのFirebaseプロジェクト名FriendlyChat 。

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

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

FirebaseWebアプリをプロジェクトに追加します

Webアイコンをクリックします新しいFirebaseWebアプリを作成します。
ニックネームでアプリを登録Friendly Chatし、次もこのアプリのホスティングFirebaseを設定する]チェックボックスをオンに。
登録アプリをクリックします。
残りの手順をクリックします。画面の指示に従う必要はありません。これらについては、このコードラボの後のステップで説明します。

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

あなたは、Googleのログインを有効にする必要があります：

Firebaseコンソールでは、左側のパネルで、開発セクションを見つけます。
認証をクリックし、サインインし、メソッドタブをクリックします（コンソールに移動します）。
Googleのサインインのプロバイダを有効にし、[保存]をクリックします。

CloudFirestoreを有効にする

ウェブアプリが使用するクラウドFirestoreをチャットメッセージを保存し、新しいチャットメッセージを受信します。

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

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

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

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

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

クラウドストレージを有効にする必要があります。

でFirebaseコンソールのセクションを開発し、ストレージをクリックします。
開始を取得]をクリックします。
あなたのFirebaseプロジェクトのためのセキュリティルールについて免責事項を読み、その後、ガットにそれをクリックしてください。

開始コードには基本的なセキュリティルールが含まれており、後でコードラボで展開します。

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

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

以下でCLIをインストールし、これらの命令をFirebaseドキュメントに。
ターミナルで次のコマンドを実行して、CLIが正しくインストールされていることを確認します。

firebase --version

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

次のコマンドを実行して、FirebaseCLIを承認します。

firebase login

アプリのローカルディレクトリ（コードラボで以前に複製したリポジトリ）からFirebaseHostingのアプリの構成をプルするようにウェブアプリテンプレートを設定しました。ただし、構成をプルするには、アプリをFirebaseプロジェクトに関連付ける必要があります。

あなたのコマンドラインアプリのローカルアクセスしていることを確認してくださいperformance-monitoring-startディレクトリを。
次のコマンドを実行して、アプリをFirebaseプロジェクトに関連付けます。

firebase use --add

プロンプトが表示されたら、プロジェクトIDを選択し、Firebaseプロジェクトにエイリアスを指定します。

エイリアスは、複数の環境（本番環境、ステージングなど）がある場合に役立ちます。しかし、このコードラボのために、ちょうどの別名使用してみましょうdefault 。

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

5.Firebaseパフォーマンスモニタリングと統合する

FirebaseパフォーマンスはWeb用のSDKの監視と統合するためのさまざまな方法があります（参照ドキュメント詳細）。このコードラボでは、我々はホスティングのURLから性能監視を可能にするでしょう。

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

開きsrc/index.jsファイルを、そして下に次の行を追加しますTODO Firebaseパフォーマンス監視SDKを含めること。

index.js

// TODO: Import the Firebase Performance Monitoring library here.
 import {
   getPerformance,
   trace
 } from 'firebase/performance';

また、Firebaseプロジェクトと使用するウェブアプリに関する情報を含む構成オブジェクトを使用してFirebaseSDKを初期化する必要があります。 Firebase Hostingを使用しているため、この設定を行う特別なスクリプトをインポートできます。このコードラボのために、我々はすでにの一番下にあなたのための次の行を追加したpublic/index.html 、それがあることは、ファイルが、ダブルチェック。

index.html

<!-- This script is created by webpack -->
<script type="module" src="scripts/main.js"></script>

src/index.jsファイル、下に次の行を追加します。 TODOパフォーマンス監視を初期化します。

index.js

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

パフォーマンスモニタリングは、ユーザーがサイトを使用するときに、ページの読み込みとネットワークリクエストの指標を自動的に収集するようになりました。マニュアルを参照してください自動ページロードトレースについての詳細を学ぶために。

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

まず、入力遅延は、ユーザーとの対話に応答して、ブラウザがユーザーにあなたのアプリケーションの応答性についての彼らの第一印象を与えるので、便利です。

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

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

開き、 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 PerformanceMonitoringとの統合が完了しました。

次の手順では、Firebase PerformanceMonitoringを使用してカスタムトレースを追加する方法について説明します。自動トレースのみを収集する場合は、「展開してイメージの送信を開始する」セクションに進みます。

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

パフォーマンスの監視は、カスタムトレースを作成することができます。カスタムトレースは、アプリの実行ブロック期間中のレポートです。 SDKが提供するAPIを使用して、カスタムトレースの開始と終了を定義します。

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

index.js

// TODO: Create custom trace to monitor image upload.
const t = trace(perf, "saveImageMessage");

カスタムトレースを記録するには、トレースの開始点と停止点を指定する必要があります。トレースはタイマーと考えることができます。

index.js

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

 ...

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

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

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

あなたは、さらに設定することができ、カスタムトレースをその範囲内で発生するパフォーマンス関連のイベントのために、レコードのカスタム指標に。たとえば、メトリックを使用して、アップロード時間が前の手順で定義したカスタムトレースの画像のサイズによって影響を受けるかどうかを調査できます。

（自分の中で定義された前のステップからカスタムトレースを見つけてsrc/index.jsファイル）。
下に次の行を追加します。 TODOアップロードされた画像の大きさを記録します。

index.js

 ...

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

 ...

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

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

前のステップで構築する、あなたはまた、収集することができ、カスタム属性をあなたにカスタムトレース。カスタム属性は、アプリに固有のカテゴリでデータをセグメント化するのに役立ちます。たとえば、イメージファイルのMIMEタイプを収集して、MIMEタイプがパフォーマンスにどのように影響するかを調査できます。

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

index.js

 ...

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

 ...

この属性を使用すると、パフォーマンスモニタリングで、アップロードされた画像タイプに基づいてカスタムトレース期間を分類できます。

9. [拡張] User TimingAPIを使用してカスタムトレースを追加します

Firebase Performance Monitoring SDKは、非同期で読み込むことができるように設計されているため、ページの読み込み中にウェブアプリのパフォーマンスに悪影響を与えることはありません。 SDKが読み込まれる前は、Firebase Performance MonitoringAPIは利用できません。このシナリオでは、あなたはまだ使用して、カスタムトレースを追加することができますユーザータイミングのAPIを。 FirebaseパフォーマンスSDKから期間をピックアップします（指標）とカスタムトレースとしてそれらをログに記録します。

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

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

次の行を追加して、アプリのスタイリングスクリプトの読み込みの終了をマークし、開始から終了までの期間を測定します。

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 PerformanceMonitoringによって自動的に収集されます。あなたはと呼ばれる独自のトレースを見つけることができるようになりますloadStyling後でFirebaseパフォーマンスコンソールで。

10.イメージをデプロイして送信を開始します

FirebaseHostingにデプロイする

コードにFirebasePerformance Monitoringを追加した後、次の手順に従ってコードをFirebaseHostingにデプロイします。

あなたのコマンドラインアプリのローカルアクセスしていることを確認してくださいperformance-monitoring-startディレクトリを。
次のコマンドを実行して、ファイルをFirebaseプロジェクトにデプロイします。

firebase deploy

コンソールに次のように表示されます。

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

：今、完全にあなたの非常に自身Firebaseサブドメインの2でホスティングFirebaseを使用してホストされているウェブアプリ訪れhttps://<projectId>.firebaseapp.comおよびhttps://<projectId>.web.app 。

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

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

画像メッセージを送信する

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

チャットアプリにサインインした後、画像アップロードボタンをクリックします。
ファイルピッカーを使用して画像ファイルを選択します。
（いくつかのサンプルが中に保存されている複数の画像を送信してみてくださいpublic/images/カスタム指標とカスタム属性の分布を調べることができるように）。

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

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

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

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

でFirebaseコンソール、あなたの持っているプロジェクトを選択Friendly Chatアプリを。
左側のパネルで、品質]セクションを探し、そしてパフォーマンス]をクリックします。

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

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

オンデバイス]タブをクリックします。

あなたのページのロード中にパフォーマンスを自動的に監視することをページのロードの表に示すさまざまなパフォーマンスメトリックが収集されます。
持続時間テーブルには、アプリのコード内で定義したので、任意のカスタムトレースを示しています。

トレースのための具体的な指標を検討する持続時間テーブルにsaveImageMessageをクリックします。

画像サイズの分布を確認する集計をクリックしてください。このカスタムトレースの画像サイズを測定するために追加したメトリックを確認できます。

前のステップで集計の隣にあるオーバー時間をクリックします。また、カスタムトレースの持続時間を表示することができます。より詳細に収集したデータを確認するために多くのビューをクリックしてください。

開いたページで、あなたのimageTypeをクリックすることで、セグメント画像MIMEタイプでデュレーションデータをすることができます。この特定のデータは、カスタムトレースに追加したimageType属性のためにログに記録されました。

ネットワークデータを確認する

HTTP / Sネットワーク要求は報告されているキャプチャ応答時間とネットワーク呼び出しのペイロードサイズ。

パフォーマンス監視ダッシュボードのメイン画面に戻ります。
あなたのWebアプリケーションのためのネットワーク要求エントリのリストを表示するには、[ネットワーク]タブをクリックします。
それらを参照して遅いリクエストを特定し、アプリのパフォーマンスを向上させるための修正作業を開始してください。

12.おめでとうございます！

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

私たちがカバーしたこと：

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

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

1。概要

あなたが学ぶこと

必要なもの

2.サンプルコードを取得します

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

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

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

FirebaseWebアプリをプロジェクトに追加します

Firebase認証でGoogleログインを有効にする

CloudFirestoreを有効にする

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

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

5.Firebaseパフォーマンスモニタリングと統合する

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

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

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

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

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

9. [拡張] User TimingAPIを使用してカスタムトレースを追加します

10.イメージをデプロイして送信を開始します

FirebaseHostingにデプロイする

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

画像メッセージを送信する

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

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

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

ネットワークデータを確認する

12.おめでとうございます！

私たちがカバーしたこと：

もっと詳しく知る：