了解頁面載入效能資料(Web 應用程式)

效能監控使用追蹤來收集有關應用程式中受監控進程的資料。追蹤是包含應用程式中兩個時間點之間捕獲的數據的報告。

對於 Web 應用程序,效能監控會自動收集應用程式每個頁面的追蹤(稱為頁面載入追蹤) 。每個頁面載入追蹤收集以下預設指標:

  • 第一次繪製-衡量使用者導航到頁面和發生任何視覺變化之間的時間的指標

  • 第一次內容繪製-衡量使用者導航到頁面和顯示有意義的內容(例如圖像或文字)之間的時間的指標

  • domInteractive — 衡量使用者導航到頁面與該頁面被視為對使用者俱有互動性之間的時間的指標

  • domContentLoadedEventEnd — 衡量使用者導覽至頁面與初始 HTML 文件完全載入與解析之間的時間的指標

  • loadEventEnd — 衡量使用者導覽至頁面與目前文件的載入事件完成之間的時間的指標

  • 首次輸入延遲-衡量使用者與頁面互動和瀏覽器能夠回應該輸入之間的時間的指標

您可以在追蹤表的「頁面載入」子標籤中查看這些追蹤中的數據,該表位於「效能」儀表板的底部(稍後將在本頁中了解有關使用控制台的更多資訊)。

頁面載入追蹤的定義

此追蹤測量有關應用程式中的頁面如何載入的多個指標,特別是到達常見載入點(例如響應式應用程式)所需的時間。

頁面載入追蹤可協助您追蹤應用程式的核心網路生命週期,例如首次內容繪製。

為頁面加載追蹤收集的指標

這些追蹤是開箱即用的跟踪,因此您無法向其中添加自訂指標或自訂屬性。

第一次油漆

此指標衡量使用者導航到頁面和發生任何視覺變化之間的時間。

這個指標非常有用,因為第一次繪製會向使用者發出頁面正在開始載入的訊號。

  • 當使用者導航到頁面時啟動。

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

第一個內容豐富的油漆

此指標衡量使用者導航至頁面與顯示有意義的內容(例如圖像或文字)之間的時間。

此指標對於了解用戶多久看到應用程式的任何實際內容(而不僅僅是新的背景顏色或標題)非常有用。

  • 當使用者導航到頁面時啟動。

  • 在瀏覽器渲染 DOM 中的第一個內容(包括任何文字、圖像(包括背景圖像)、非白色畫布或 SVG)後立即停止。

dom互動

此指標測量使用者導航到頁面與該頁面被視為對使用者俱有互動性之間的時間。

此指標有助於了解用戶多久可以實際與應用程式中的元素(如按鈕和超連結)進行交互,而不僅僅是在螢幕上看到它們。請注意,這並不意味著瀏覽器將響應互動(對於此指標,請參閱第一個輸入延遲追蹤)。

  • 當使用者導航到頁面時啟動。

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

domContentLoadedEventEnd

此指標可測量使用者導覽至頁面與初始 HTML 文件完全載入和解析之間的時間。

  • 當使用者導航到頁面時啟動。

  • 在初始 HTML 文件完全載入和解析 ( DOMContentLoaded ) 後立即停止,但這並不表示樣式表、圖像和子框架已完成載入。

載入事件結束

此指標測量使用者導覽至頁面與目前文件的載入事件完成之間的時間。

此指標對於了解載入所有內容(包括樣式表和圖像)所需的時間非常有用。

  • 當使用者導航到頁面時啟動。

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

第一個輸入延遲

此指標衡量使用者與頁面互動和瀏覽器能夠回應該輸入之間的時間。

這個指標非常有用,因為響應用戶互動的瀏覽器可以讓用戶對應用程式的回應能力產生第一印象。

  • 當使用者第一次與頁面上的元素互動時啟動,例如點擊按鈕或超連結。

  • 在瀏覽器能夠回應輸入後立即停止,這意味著瀏覽器不忙於加載或解析您的內容。

請注意,要測量第一個輸入延遲指標,您需要為此指標新增 polyfill 庫。有關安裝說明,請參閱庫的文件

追蹤、查看和過濾性能數據

若要查看即時效能數據,請確保您的應用程式使用與即時數據處理相容的效能監控 SDK 版本。了解有關即時性能數據的更多資訊

追蹤儀表板中的關鍵指標

若要了解關鍵指標的趨勢,請將它們新增至績效儀表板頂部的指標板。您可以透過查看每週的變更來快速識別回歸,或者驗證程式碼中的最新變更是否正在提高效能。

Firebase 效能監控儀表板中指標板的影像

若要將指標新增至指標板,請執行下列步驟:

  1. 前往 Firebase 控制台中的效能儀表板
  2. 點擊空指標卡,然後選擇現有指標以新增到您的看板中。
  3. 點擊填滿的指標卡上的可取得更多選項,例如取代或刪除指標。

指標板以圖形形式和數字百分比變化的形式顯示隨時間推移收集的指標資料。

了解有關使用儀表板的更多資訊。

查看踪跡及其數據

若要查看跟踪,請前往 Firebase 控制台中的效能儀表板,向下捲動至追蹤表,然後按一下對應的子標籤。該表顯示每個追蹤的一些主要指標,您甚至可以按特定指標的百分比變化對清單進行排序。

效能監控在 Firebase 控制台中提供了一個故障排除頁面,突出顯示了指標更改,從而可以輕鬆快速解決效能問題並最大程度地減少其對應用程式和使用者的影響。當您了解潛在的效能問題時,您可以使用故障排除頁面,例如,在以下場景中:

  • 您在儀表板上選擇相關指標,您會注意到一個很大的增量。
  • 在追蹤表中,您進行排序以在頂部顯示最大增量,並且您會看到顯著的百分比變化。
  • 您會收到一封電子郵件警報,通知您出現效能問題。

您可以透過以下方式進入故障排除頁面:

  • 在指標儀表板上,按一下查看指標詳細資訊按鈕。
  • 在任何度量卡上,選擇 => 查看詳情。故障排除頁面顯示有關您選擇的指標的資訊。
  • 在追蹤表中,按一下追蹤名稱或與該追蹤關聯的行中的任何指標值。
  • 在電子郵件警報中,按一下立即調查

當您按一下追蹤表中的追蹤名稱時,您可以深入了解感興趣的指標。點選過濾器按鈕可按屬性過濾數據,例如:

按屬性過濾的 Firebase 效能監控資料的影像
  • 頁面 URL過濾以查看網站特定頁面的數據
  • 有效連線類型過濾,了解 3g 連線如何影響您的應用
  • 按國家/地區過濾以確保您的資料庫位置不會影響特定區域

了解有關查看追蹤數據的更多資訊。

下一步

  • 了解有關使用屬性檢查效能資料的詳細資訊。

  • 詳細了解如何在 Firebase 控制台中追蹤效能問題

  • 針對會降低應用程式效能的頁面載入設定警報。例如,如果特定頁面的首次輸入延遲超過您設定的閾值,您可以為您的團隊設定電子郵件警報。