瞭解網頁載入效能資料 (網頁應用程式)

Performance Monitoring 會使用追蹤記錄收集應用程式中受監控程序的資料。 追蹤記錄是指在兩個時間點之間擷取的資料 。

如果是網頁應用程式,Performance Monitoring 會自動收集每個網頁的追蹤記錄 稱為網頁載入追蹤記錄。每次載入網頁的追蹤記錄都會收集 下列預設指標:

  • 「first 繪製」- 用於測量兩次 使用者前往某個頁面,並在「任何」視覺變更發生時

  • first Contentful Pa - 用於測量指標的指標 從使用者前往網頁到有意義內容之間需要的時間 例如圖片或文字

  • domInteractive - 用於測量兩次 當使用者前往某個網頁,且系統判定為互動式網頁時,就會觸發這個事件 目標使用者

  • domContentLoadedEventEnd - 用來評估 從使用者前往網頁到初次 HTML 程式碼 文件已完全載入並剖析完畢

  • loadEventEnd - 用來測量兩次 使用者前往網頁,以及目前文件的載入事件時 完成

  • 首次輸入延遲時間 - 用於測量兩次 當使用者與網頁互動,且瀏覽器能回應 那個輸入

您可以在 追蹤記錄表格,位於「效能」資訊主頁底部 (瞭解詳情 請參閱本頁後續章節,瞭解如何使用控制台)。

網頁載入追蹤記錄的定義

這項追蹤記錄會評估多種指標,例如應用程式載入網頁的方式 特別是載入常見載入點所需的時間,例如 回應式應用程式

網頁載入追蹤記錄 網站體驗核心指標 內容繪製作業

收集網頁載入追蹤記錄的指標

這些是立即可用的追蹤記錄,因此您無法新增自訂指標或 自訂屬性

畫面首次顯示所需時間

這項指標能評估從使用者前往網頁到 任何視覺變更都會觸發。

這項指標非常實用,因為使用者首次看到頁面顯示該網頁 開始載入。

  • 在使用者前往頁面時啟動。

  • 在發生「任何」視覺變更 (包括背景顏色變更或 正在載入標頭。

首次顯示內容所需時間

這項指標能評估使用者從造訪網頁到 顯示有意義的內容,例如圖片或文字

這個指標有助於深入瞭解使用者 應用程式的實際內容,而不只是新的背景顏色或標題。

  • 在使用者前往頁面時啟動。

  • 瀏覽器從 DOM 轉譯第一個內容後立即停止, 包括任何文字、圖片 (包括背景圖片)、非白色畫布,或 SVG。

domInteractive

這項指標能評估從使用者前往網頁到 視為使用者與網頁互動。

這個指標對於瞭解使用者 與應用程式元素互動,例如按鈕和超連結 你不必在畫面上查看請注意,這不代表瀏覽器 就會回應互動 (就這項指標而言, 「首次輸入延遲時間」追蹤記錄)。

  • 在使用者前往頁面時啟動。

  • 在使用者代理程式設定目前的 HTML 文件之前立即停止 可設為「可互動」。

domContentLoadedEventEnd

這項指標能評估從使用者前往網頁到 初始的 HTML 文件都完全載入並剖析完畢

  • 在使用者前往頁面時啟動。

  • 在初始 HTML 文件完全載入後立即停止,並 剖析 (DOMContentLoaded),但這並不代表樣式表、圖片、 子頁框載入完畢

loadEventEnd

這個指標能評估使用者從使用者瀏覽網頁到 目前文件的 load 事件完成時。

這個指標很適合用來深入瞭解載入所有 內容,包括樣式表和圖片

  • 在使用者前往頁面時啟動。

  • 在目前的 HTML 文件載入事件完成後立即停止。

初次輸入延遲時間

這項指標能評估使用者與網頁互動並 瀏覽器能回應輸入值時

這項指標很實用,因為瀏覽器會回應使用者互動 使用者對應用程式的回應性的第一印象。

  • 當使用者「首次」與網頁上的元素互動時啟動,例如 點按按鈕或超連結

  • 在瀏覽器能夠回應輸入內容後立即停止, 瀏覽器並未忙碌載入或剖析內容。

請注意,如要測量第一次輸入延遲時間指標,您需要新增 polyfill 為這個指標選取程式庫如需安裝操作說明,請參閱程式庫的 說明文件

追蹤、查看及篩選成效資料

如要查看即時成效資料,請確認您的應用程式使用效能 與即時資料處理相容的監控 SDK 版本。 進一步瞭解即時成效資料

在資訊主頁上追蹤重要指標

如要瞭解主要指標的變化趨勢,請將這些指標新增至頁面頂端 效能資訊主頁。您可查看逐週變化,快速找出迴歸問題 變更,或確認程式碼近期的變更是否改善成效。

Firebase Performance Monitoring 資訊主頁中的指標看板

如要在指標板中新增指標,請按照下列步驟操作:

  1. 前往 Firebase 控制台的「效能資訊主頁。
  2. 按一下空白指標資訊卡,然後選取要加入資訊主面板的現有指標。
  3. 按一下 在已填入的指標資訊卡上,,可查看更多選項, 例如取代或移除指標

指標面板會以圖表形式顯示一段時間內收集到的指標資料 數值百分比的變化

進一步瞭解如何使用資訊主頁

查看追蹤記錄和相關資料

如要查看追蹤記錄,請前往 「效能」資訊主頁 在 Firebase 控制台中,向下捲動至追蹤記錄表格,然後點選適當的子標籤。 這份表格會顯示每筆追蹤記錄的一些熱門指標,您甚至可以依照 百分比的變化

Performance Monitoring 會在 Firebase 控制台提供疑難排解頁面,醒目顯示指標 方便您快速處理,並盡量減少 應用程式和使用者如要瞭解潛在商機,請利用疑難排解頁面 效能問題,如下列情況:

  • 您在資訊主頁上選取相關指標後,發現出現大幅差異。
  • 在追蹤記錄表格中,我們以頂端顯示最大的差異。您會看到 百分比呈現顯著變化
  • 您會在出現成效問題時收到電子郵件快訊,

您可以透過下列方式存取疑難排解頁面:

  • 在指標資訊主頁中,按一下「查看指標詳細資料」按鈕。
  • 在任何指標資訊卡上選取「 =>查看詳細資料。「疑難排解」頁面會顯示指標相關資訊 這個虛擬機器
  • 在追蹤記錄表格中,按一下追蹤記錄名稱或該資料列中的任何指標值 追蹤記錄。
  • 按一下電子郵件快訊中的「立即調查」

只要點選追蹤記錄表格中的追蹤記錄名稱,您就能進一步查看 興趣。按一下 「篩選」 按鈕,用於篩選資料 依屬性區分,例如:

圖片:依屬性篩選 Firebase Performance Monitoring 資料
  • 依「網頁網址」篩選,查看網站中特定網頁的資料
  • 依「有效連線類型」篩選,瞭解 3G 連線對 應用程式
  • 依「國家/地區」篩選,確保資料庫位置不會影響特定 區域

進一步瞭解 正在查看以下項目的資料: 追蹤記錄

後續步驟

  • 進一步瞭解 使用屬性來查看成效資料。

  • 進一步瞭解如何 追蹤成效問題的 Firebase 控制台。

  • 針對影響排名降低的網頁載入設定快訊 應用程式的效能舉例來說,您可以設定 如果特定網頁的首次輸入延遲時間超過 門檻值