網頁版 Firebase Performance Monitoring

1. 總覽

在本程式碼研究室中，您將學習如何使用 Firebase 效能監控來評估即時通訊網頁應用程式的效能。請造訪 https://fireperf-friendlychat.web.app/ 查看實際操作示範。

3b1284f5144b54f6.png

課程內容

  • 如何在網頁應用程式中新增 Firebase Performance Monitoring，以便取得即用指標 (網頁載入和網路要求)。
  • 如何使用自訂追蹤記錄評估特定程式碼。
  • 如何記錄與自訂追蹤記錄相關聯的其他自訂指標。
  • 如何使用自訂屬性進一步細分成效資料。
  • 如何使用效能監控資訊主頁，瞭解網頁應用程式的效能。

事前準備

  • 您偏好的 IDE 或文字編輯器，例如 WebStorm、Atom、Sublime 或 VS Code
  • 終端機/主控台
  • 你選擇的瀏覽器，例如 Chrome
  • 程式碼研究室的程式碼範例 (請參閱本程式碼研究室的下一節，瞭解如何取得程式碼)

2. 取得程式碼範例

從指令列複製程式碼研究室的 GitHub 存放區：

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

或者，如果您沒有安裝 Git，可以將存放區下載為 ZIP 檔案。

匯入範例應用程式

使用 IDE 開啟或匯入複製的存放區中的 📁? performance-monitoring-start 目錄。這個 📁? performance-monitoring-start 目錄包含程式碼研究室的起始程式碼，也就是聊天網頁應用程式。

3. 建立及設定 Firebase 專案

建立 Firebase 專案

  1. 在 Firebase 控制台中，按一下「新增專案」。
  2. 將 Firebase 專案命名為 FriendlyChat。

請記下 Firebase 專案的專案 ID。

  1. 按一下 [Create Project] (建立專案)。

升級 Firebase 定價方案

如要使用 Cloud Storage for Firebase，您的 Firebase 專案必須採用即付即用 (Blaze) 定價方案，也就是說已連結至 Cloud Billing 帳戶。

  • 您必須提供付款方式 (例如信用卡)，才能建立 Cloud Billing 帳戶。
  • 如果您是 Firebase 和 Google Cloud 的新手，請確認您是否符合$300 美元的抵免額和免費試用 Cloud Billing 帳戶的資格。
  • 如果您是為了參加活動而進行這個程式碼研究室，請向活動主辦單位詢問是否有任何 Cloud 抵用金。

如要將專案升級至 Blaze 方案，請按照下列步驟操作：

  1. 在 Firebase 控制台中，選取「升級方案」。
  2. 選取 Blaze 方案。按照畫面上的指示將 Cloud Billing 帳戶連結至專案。
    如果您需要在升級過程中建立 Cloud Billing 帳戶，可能需要返回 Firebase 控制台的升級流程，才能完成升級。

將 Firebase 網頁應用程式新增至專案

  1. 按一下網頁圖示 58d6543a156e56f9.png，建立新的 Firebase 網頁應用程式。
  2. 使用暱稱 Friendly Chat 註冊應用程式，然後勾選「Also set up Firebase Hosting for this app」旁的方塊。
  3. 按一下 [Register app] (註冊應用程式)。
  4. 按照畫面上顯示的剩餘步驟操作。您現在不必按照畫面上的指示操作，我們會在本程式碼研究室的後續步驟中說明這些操作。

ea9ab0db531a104c.png

為 Firebase 驗證啟用 Google 登入

為了讓使用者可以使用 Google 帳戶登入聊天應用程式，我們會使用 Google 登入方式。

您必須啟用 Google 登入功能：

  1. 在 Firebase 主控台左側面板中，找到「Develop」部分。
  2. 依序點選「驗證」和「登入方式」分頁標籤 ( 前往控制台)。
  3. 啟用 Google 登入供應器，然後按一下「儲存」。

7f3040a646c2e502.png

設定 Cloud Firestore

這個網頁應用程式會使用 Cloud Firestore 儲存即時通訊訊息，並接收新的即時通訊訊息。

以下說明如何在 Firebase 專案中設定 Cloud Firestore：

  1. 在 Firebase 主控台的左側面板中展開「Build」，然後選取「Firestore database」。
  2. 按一下 [Create database] (建立資料庫)。
  3. 將「資料庫 ID」設為 (default)。
  4. 選取資料庫的位置，然後按一下「Next」。
    如果是實際應用程式，請選擇距離使用者較近的位置。
  5. 按一下「以測試模式啟動」。請詳閱安全性規則免責事項。
    在本程式碼研究室的後續部分，您將新增安全性規則來保護資料。請勿發布或公開應用程式，除非您已為資料庫新增安全性規則。
  6. 按一下「建立」。

設定 Cloud Storage for Firebase

網頁應用程式會使用 Cloud Storage for Firebase 儲存、上傳及分享圖片。

以下說明如何在 Firebase 專案中設定 Cloud Storage for Firebase：

  1. 在 Firebase 主控台的左側面板中，展開「Build」，然後選取「Storage」。
  2. 按一下「開始使用」。
  3. 選取預設儲存體值區的位置。
    US-WEST1、US-CENTRAL1 和 US-EAST1 中的值區可使用 Google Cloud Storage 的「永遠免費」方案。其他所有位置的值區都會遵循 Google Cloud Storage 的定價和用量。
  4. 按一下「以測試模式啟動」。請詳閱安全性規則免責事項。
    在本程式碼研究室的後續部分，您將新增安全性規則來保護資料。請勿發布或公開應用程式，否則請為儲存空間值區新增安全規則。
  5. 按一下「建立」。

4. 安裝 Firebase 指令列介面

Firebase 指令列介面 (CLI) 可讓您使用 Firebase 代管功能，在本機上提供 Web 應用程式，以及將 Web 應用程式部署至 Firebase 專案。

  1. 請按照 Firebase 說明文件中的這些操作說明安裝 CLI。
  2. 在終端機中執行下列指令，確認 CLI 已正確安裝：
firebase --version

請確認您使用的 Firebase CLI 版本為 8.0.0 以上版本。

  1. 請執行下列指令，授權 Firebase CLI：
firebase login

我們已設定網頁應用程式範本，從應用程式的本機目錄 (您先前在程式碼研究室中複製的存放區) 提取應用程式適用於 Firebase 代管的設定。不過，我們必須將您的應用程式與 Firebase 專案建立關聯，才能擷取設定。

  1. 請確認指令列是存取應用程式的本機 performance-monitoring-start 目錄。
  2. 執行下列指令，將應用程式與 Firebase 專案建立關聯：
firebase use --add
  1. 系統顯示提示時，請選取專案 ID，然後為 Firebase 專案指定別名。

如果您有多個環境 (實際工作環境、暫存環境等)，別名就很實用。不過，在本程式碼研究室中，我們只會使用 default 別名。

  1. 按照指令列中的指示完成其餘步驟。

5. 與 Firebase Performance Monitoring 整合

您可以透過多種方式整合 Firebase Performance Monitoring SDK for Web (詳情請參閱說明文件)。在本程式碼研究室中，我們會啟用 代管網址的效能監控功能。

新增成效監控並初始化 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 SDK，其中包含 Firebase 專案和要使用的網頁應用程式相關資訊。由於我們使用 Firebase 代管，因此您可以匯入特殊指令碼，讓系統為您完成這項設定。在這個程式碼研究室中，我們已在 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 會自動收集網頁載入和網路要求指標！如要進一步瞭解自動網頁載入追蹤記錄，請參閱說明文件。

新增首次輸入延遲時間的 polyfill 程式庫

首次輸入延遲時間很實用，因為瀏覽器會回應使用者互動，讓使用者對應用程式的回應速度留下第一印象。

首次輸入延遲時間是指使用者首次與網頁元素互動 (例如按下按鈕或超連結) 時開始計算的時間。當瀏覽器能夠回應輸入內容時，就會立即停止，表示瀏覽器不會忙於載入或剖析內容。

這個 polyfill 程式庫是效能監控整合功能的選用項目。

開啟 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 效能監控機制新增自訂追蹤記錄。如果您只想收集自動追蹤記錄，請參閱「部署並開始傳送圖片」一節。

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

將 Firebase Performance Monitoring 新增至程式碼後，請按照下列步驟將程式碼部署至 Firebase 代管服務：

  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.firebasestorage.app
✔  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. 前往您的網頁應用程式，該應用程式現在已透過 Firebase 代管服務，在您專屬的兩個 Firebase 子網域 (https://<projectId>.firebaseapp.com 和 https://<projectId>.web.app) 中完全代管。

確認已啟用效能監控功能

開啟 Firebase 控制台，然後前往「成效」分頁。如果您看到「SDK 已偵測到」的歡迎訊息，表示您已成功整合 Firebase 效能監控！

30df67e5a07d03b0.png

傳送圖片訊息

透過在即時通訊應用程式中傳送圖片，產生一些效能資料。

  1. 登入聊天應用程式後，請按一下圖片上傳按鈕 13734cb66773e5a3.png。
  2. 使用檔案選擇器選取圖片檔。
  3. 請嘗試傳送多張圖片 (部分樣本儲存在 public/images/ 中)，以便測試自訂指標和自訂屬性的分布情形。

新訊息應會顯示在應用程式的 UI 中，並附上您選取的圖片。

11. 監控資訊主頁

部署網頁應用程式並以使用者身分傳送圖片訊息後，您可以在效能監控資訊主頁 (位於 Firebase 控制台) 中查看效能資料。

前往資訊主頁

  1. 在 Firebase 主控台中，選取含有 Friendly Chat 應用程式的專案。
  2. 在左側面板中找出「品質」部分，然後按一下「效能」。

查看裝置端資料

等到成效監控完成處理應用程式資料後，您會在資訊主頁頂端看到分頁。如果您尚未看到任何資料或分頁，請稍後再回來查看。

  1. 按一下「裝置」分頁標籤。
  • 「網頁載入」表格會顯示效能監控在網頁載入期間自動收集的各種成效指標。
  • 「Durations」表格會顯示您在應用程式程式碼中定義的任何自訂追蹤。
  1. 按一下「Durations」表格中的「saveImageMessage」，即可查看追蹤記錄的特定指標。

e28758fd02d9ffac.png

  1. 按一下「匯總」，查看圖片大小的分布情形。您可以看到新增用於評估此自訂追蹤記錄圖片大小的指標。

c3cbcfc0c739a0a8.png

  1. 在上一節中，按一下「匯總」旁的「隨時間變化」。您也可以查看自訂追蹤記錄的時間長度。按一下「查看更多」，即可查看收集到的詳細資料。

16983baa31e05732.png

  1. 在隨即開啟的頁面中，按一下「imageType」，即可依圖片 MIME 類型區隔片段資料。您在自訂追蹤記錄中新增了 imageType 屬性，因此系統記錄了這項特定資料。

8e5c9f32f42a1ca1.png

查看網路資料

HTTP/S 網路要求是一種報表，可擷取網路呼叫的回應時間和酬載大小。

  1. 返回成效監控資訊主頁的主畫面。
  2. 按一下「Network」分頁標籤，查看網頁應用程式的網路要求項目清單。
  3. 瀏覽這些資訊，找出速度緩慢的要求，並開始修正，以改善應用程式效能！

26a2be152a77ffb9.png

12. 恭喜！

您已啟用 Firebase SDK 進行效能監控，並收集自動追蹤記錄和自訂追蹤記錄，以評估即時通訊應用程式的實際效能！

涵蓋內容：

  • 將 Firebase Performance Monitoring SDK 新增至網頁應用程式。
  • 在程式碼中新增自訂追蹤記錄。
  • 記錄與自訂追蹤記錄相關聯的自訂指標。
  • 使用自訂屬性區隔成效資料。
  • 瞭解如何使用效能監控資訊主頁，深入瞭解應用程式的效能。

瞭解詳情：