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

Performance Monitoring 會使用追蹤記錄,收集應用程式中受監控程序的資料。追蹤記錄是一份報表,內含應用程式中兩個時間點之間擷取的資料。

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

  • 最大內容繪製:這項指標會評估使用者前往網頁到發生最大視覺變化之間的時間

  • Interaction to Next Paint:這項指標會測量從使用者與網頁互動到下一次繪製之間的最長時間

  • Cumulative Layout Shift:評估網頁中非預期版面配置位移並評分的指標

  • 首次繪製:這項指標會評估使用者前往網頁到發生「任何」視覺變化之間的時間

  • 首次顯示內容所需時間:這項指標會評估使用者前往網頁到顯示有意義內容 (例如圖片或文字) 之間的時間

  • domInteractive:這項指標會評估從使用者前往網頁,到網頁可供使用者互動之間的時間

  • domContentLoadedEventEnd:這項指標會評估從使用者前往網頁,到初始 HTML 文件完全載入並剖析完成之間的時間

  • loadEventEnd:這項指標會評估從使用者前往網頁到目前文件的載入事件完成之間的時間

您可以在追蹤記錄資料表的「載入網頁」 子標籤中查看這些追蹤記錄的資料,該資料表位於「效能資訊主頁」 底部 (請參閱本頁後續內容,進一步瞭解如何使用控制台)。

載入網頁追蹤記錄的定義

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

載入網頁追蹤記錄可協助您追蹤應用程式的 Core Web Vitals,例如 First Contentful Paint。

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

這些追蹤記錄是現成追蹤記錄,因此您無法在其中新增其他自訂指標或自訂屬性。

Largest Contentful Paint

這項指標會評估使用者前往網頁,到顯示「最大」圖片、文字或影片內容之間的時間。

這項指標有助於瞭解網頁主要內容多快會向使用者顯示。

  • 在使用者前往網頁時開始。

  • 當最大視覺變化發生時 (包括圖片、文字或影片元素),就會停止。詳情請參閱「Core Web Vitals」。

「Largest Contentful Paint 元素」是自訂屬性,用於識別與 Largest Contentful Paint 對應的元素。除了 Largest Contentful Paint 時間外,系統也會擷取這項資訊。

Interaction to Next Paint

這項指標會評估使用者與網頁互動到下一次繪製之間的時間。

這項指標可評估網頁對使用者輸入內容的回應速度,因此相當實用。

  • 使用者與網頁互動 (點按滑鼠、輕觸裝置或輸入鍵盤) 時開始。

  • 在下次繪製時停止。詳情請參閱「Core Web Vitals」。

「最長的 Interaction to Next Paint」是自訂屬性,可識別發生 Interaction to Next Paint 事件時,使用者與哪個元素互動。除了 Interaction to Next Paint 時間外,系統也會擷取這項資訊。

Cumulative Layout Shift

這項指標會針對網頁整個生命週期發生的每次意外版面配置位移,評估最快速密集的版面配置位移分數。

這項指標相當實用,因為非預期的版面配置位移可能會干擾使用者體驗。這項指標會根據版面配置不穩定 API 回報分數。如要進一步瞭解分數的計算方式,請參閱 Core Web Vitals。

「Largest layout shift target」是自訂屬性,用於識別發生最大內容位移時,位移的元素。除了 Cumulative Layout Shift 分數外,系統也會擷取這項資訊。

畫面首次顯示所需時間

這項指標會評估使用者前往網頁到發生「任何」視覺變化之間的時間。

這項指標相當實用,因為首次顯示畫面會向使用者表示網頁開始載入。

  • 在使用者前往網頁時開始。

  • 當任何視覺變化發生時停止,包括背景顏色變更或標頭載入。

首次顯示內容所需時間

這項指標會評估使用者前往網頁到顯示有意義內容 (例如圖片或文字) 之間的時間。

這項指標有助於深入瞭解使用者多快能看到應用程式的實際內容,而不只是新的背景顏色或標頭。

  • 在使用者前往網頁時開始。

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

domInteractive

這項指標會評估使用者前往網頁,到網頁可供使用者互動之間的時間。

這項指標有助於深入瞭解使用者實際與應用程式中的元素 (例如按鈕和超連結) 互動的速度,而不只是在畫面上看到這些元素。請注意,這不代表瀏覽器會回應互動 (如需這項指標,請參閱「Interaction to Next Paint 追蹤記錄」)。

  • 在使用者前往網頁時開始。

  • 在使用者代理程式將目前 HTML 文件的準備狀態設為「互動」之前,立即停止。

domContentLoadedEventEnd

這項指標會評估從使用者前往網頁,到初始 HTML 文件完全載入並剖析完成的時間。

  • 在使用者前往網頁時開始。

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

loadEventEnd

這項指標會評估使用者前往網頁到目前文件的載入事件完成之間的時間。

這項指標有助於深入瞭解載入所有內容 (包括樣式表和圖片) 所需的時間。

  • 在使用者前往網頁時開始。

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

First Input Delay (已淘汰)

這項指標會評估使用者與網頁互動,到瀏覽器能夠回應輸入內容之間的時間。

這項指標相當實用,因為瀏覽器回應使用者互動的方式,會讓使用者對應用程式的回應速度留下第一印象。

  • 使用者首次與網頁上的元素互動 (例如點選按鈕或超連結) 時,就會開始計算。

  • 瀏覽器能夠回應輸入內容後,就會立即停止,這表示瀏覽器並未忙於載入或剖析內容。

如要評估首次輸入延遲時間,必須使用舊版 Polyfill。請參閱疑難排解。

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

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

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

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

<span class=Firebase Performance Monitoring 資訊主頁」/>

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

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

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

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

查看追蹤記錄和相關資料

如要查看追蹤記錄,請前往 Firebase 控制台的「Performance」(效能) 資訊主頁,向下捲動至追蹤記錄表格,然後按一下適當的子分頁。表格會顯示每個追蹤記錄的一些重要指標,您甚至可以依特定指標的百分比變化排序清單。

Performance Monitoring 在 Firebase 控制台中提供疑難排解頁面,醒目顯示指標變化,方便您快速解決效能問題,並盡可能降低對應用程式和使用者的影響。當您發現潛在的效能問題時,可以使用疑難排解頁面,例如在下列情況:

  • 您在資訊主頁上選取相關指標,發現有很大的差異。
  • 在追蹤記錄表中,您將資料排序,在頂端顯示最大差異,並看到顯著的百分比變化。
  • 您收到電子郵件快訊,通知您有效能問題。

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

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

在追蹤記錄表格中點選追蹤記錄名稱,即可深入查看感興趣的指標。按一下「Filter」(篩選) 按鈕,即可依屬性篩選資料,例如:

<span class=Firebase Performance Monitoring data being filtered by attribute" />
  • 依「網頁網址」篩選,查看網站特定網頁的資料
  • 依「有效連線類型」篩選,瞭解 3G 連線對應用程式的影響
  • 依「國家/地區」篩選,確保資料庫位置不會影響特定區域

進一步瞭解如何查看追蹤記錄資料。

後續步驟

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

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

  • 設定快訊,在載入網頁導致應用程式效能降低時通知您。舉例來說,您可以設定電子郵件快訊,在特定網頁的首次輸入延遲時間超過設定的門檻時,通知團隊。