網頁版 Firebase Performance Monitoring

1. 總覽

在本程式碼研究室中，您將瞭解如何使用 Firebase Performance Monitoring 評估即時通訊網頁應用程式的效能。請前往 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 網頁應用程式新增至專案

  1. 按一下網站圖示 58d6543a156e56f9.png，建立新的 Firebase 網頁應用程式。
  2. 使用暱稱 Friendly Chat 註冊應用程式，然後勾選「同時為這個應用程式設定 Firebase 託管」旁的方塊。
  3. 按一下 [Register app] (註冊應用程式)。
  4. 按一下其餘步驟。你現在不必按照畫面上的指示操作；我們會在本程式碼研究室的後續步驟中詳細說明這些方法。

ea9ab0db531a104c.png

啟用 Google 登入 Firebase 驗證功能

為允許使用者透過自己的 Google 帳戶登入即時通訊應用程式，我們會使用 Google 登入方式。

您需啟用 Google 登入功能：

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

7f3040a646c2e502.png

啟用 Cloud Firestore

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

您必須啟用 Cloud Firestore：

  1. 在 Firebase 控制台的「開發」專區中，按一下「資料庫」。
  2. 按一下 Cloud Firestore 窗格中的「建立資料庫」。
  3. 選取「以測試模式啟動」選項，閱讀安全性規則免責事項後，按一下「啟用」。

本程式碼研究室的範例程式碼包含更安全的規則。我們稍後會在程式碼研究室中部署這些內容。

24bd1a097492eac6.png

啟用 Cloud Storage

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

您必須啟用 Cloud Storage：

  1. 在 Firebase 控制台的「開發」專區中，按一下「儲存空間」。
  2. 點選「Get Started」(開始使用)。
  3. 詳閱 Firebase 專案安全性規則免責事項，然後按一下「我知道了」。

範例程式碼含有基本安全性規則，稍後將在程式碼研究室中部署。

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 網頁版的方法有很多種，詳情請參閱說明文件。在這個程式碼研究室中，我們將從主機網址啟用效能監控功能。

新增效能監控功能並初始化 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 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 託管

將 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.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. 前往目前使用 Firebase 託管在兩個專屬 Firebase 子網域中完全託管的網頁應用程式：https://<projectId>.firebaseapp.com 和 https://<projectId>.web.app。

確認已啟用效能監控功能

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

30df67e5a07d03b0.png

傳送圖片訊息

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

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

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

11. 監控資訊主頁

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

存取資訊主頁

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

查看裝置端資料

效能監控功能處理完應用程式資料後，資訊主頁頂端就會顯示分頁。如果還沒看到任何資料或分頁，請稍後再回來查看。

  1. 按一下「裝置上」分頁標籤。
  • 「網頁載入」表格會顯示效能監控功能在網頁載入時自動收集的各種成效指標。
  • 「時間長度」表格會顯示您在應用程式程式碼中定義的所有自訂追蹤記錄。
  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 加入網頁應用程式。
  • 在程式碼中加入自訂追蹤記錄。
  • 記錄與自訂追蹤記錄相連結的自訂指標。
  • 使用自訂屬性區隔成效資料。
  • 瞭解如何使用效能監控資訊主頁，取得應用程式效能的深入分析。

瞭解詳情：