網頁版 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

啟用 Google 登入 Firebase 驗證功能

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

您需啟用 Google 登入功能：

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

7f3040a646c2e502.png

設定 Cloud Firestore

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

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

  1. 在 Firebase 控制台的左側面板中，展開「Build」，然後選取 「Firestore database」。
  2. 按一下 [Create database] (建立資料庫)。
  3. 保留「Database 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 託管在本機提供網頁應用程式，並將網頁應用程式部署至 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/ 中)，以便測試自訂指標和自訂屬性的分佈情形。

新訊息應與您選取的圖片一併顯示在應用程式的使用者介面中。

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 加入網頁應用程式。
  • 在程式碼中新增自訂追蹤記錄。
  • 記錄與自訂追蹤記錄相連結的自訂指標。
  • 使用自訂屬性區隔成效資料。
  • 瞭解如何使用效能監控資訊主頁，深入瞭解應用程式的效能。

瞭解詳情：