了解頁面加載性能數據(網絡應用)

性能監視功能使用痕跡來收集數據有關在應用過程進行監控。跟踪是一種報告,其中包含在您的應用中的兩個時間點之間捕獲的數據。

對於網絡應用程序,性能監控自動收集您的應用程序稱為一個頁面加載跟踪的每一頁痕跡。每個頁面加載跟踪收集以下默認指標:

  • 第一塗料-一個指標,可衡量用戶導航到一個頁面,當任何視覺變化發生的時間

  • 第一contentful塗料-甲度量措施當用戶導航到網頁,並且當有意義的內容的顯示器,像的圖像或文本之間的時間

  • domInteractive -一個指標,可衡量,當頁面被認為是用戶導航到一個頁面,用戶之間的互動時間

  • domContentLoadedEventEnd -甲度量措施當用戶導航到一個頁面之間的時間時,初始HTML文檔被完全加載並解析

  • loadEventEnd -一個指標,可衡量用戶導航到該頁面,當當前文檔的加載事件完成的時間

  • 首先輸入延遲-一個指標,可衡量一個頁面的用戶交互,當瀏覽器能夠回應稱輸入之間的時間

您可以查看從跟踪表的頁面加載子選項卡,這是在性能儀表板的底部這些痕跡的數據(了解更多關於使用控制台後來此頁)。

頁面加載跟踪的定義

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

頁面加載的痕跡幫助您跟踪應用程序的核心網絡命脈,就像第一contentful漆。

為頁面加載跟踪收集的指標

這些跟踪是開箱即用的跟踪,因此您無法向它們添加自定義指標或自定義屬性。

第一次油漆

這個指標代表當用戶導航到一個頁面,並在任何的視覺變化發生的時間。

該指標以來的第一次漆信號給用戶的頁面開始加載有用。

  • 當用戶導航到頁面時開始。

  • 任何視覺變化發生時,包括背景顏色變化或報頭加載停止。

第一個內容豐富的油漆

該指標衡量用戶導航到頁面與顯示有意義的內容(如圖像或文本)之間的時間。

此指標有助於深入了解您的用戶多久會看到您的任何應用的實際內容,而不僅僅是新的背景顏色或標題。

  • 當用戶導航到頁面時開始。

  • 在瀏覽器呈現來自 DOM 的第一個內容後立即停止,包括任何文本、圖像(包括背景圖像)、非白色畫布或 SVG。

domInteractive

該指標衡量用戶導航到頁面與頁面被視為用戶交互之間的時間。

該指標有助於深入了解用戶實際與應用中的元素(例如按鈕和超鏈接)交互的時間,而不僅僅是在屏幕上看到它們。請注意,這並不意味著瀏覽器才能響應交互(對於該指標是指先輸入延遲跟踪)。

  • 當用戶導航到頁面時開始。

  • 在用戶代理將當前 HTML 文檔的就緒狀態設置為“交互式”之前立即停止。

domContentLoadedEventEnd

該指標測量用戶導航到頁面與初始 HTML 文檔完全加載和解析之間的時間。

  • 當用戶導航到頁面時開始。

  • 停止後最初的HTML文檔被完全加載和解析( DOMContentLoaded ),但這並不意味著樣式表,圖片和子裝載完畢。

加載事件結束

這個指標代表當用戶導航到頁面,在當前文檔的加載事件完成的時間。

此指標有助於深入了解加載所有內容(包括樣式表和圖像)所需的時間。

  • 當用戶導航到頁面時開始。

  • 當前 HTML 文檔的加載事件完成後立即停止。

首次輸入延遲

該指標衡量用戶與頁面交互與瀏覽器能夠響應該輸入之間的時間。

該指標很有用,因為響應用戶交互的瀏覽器可以讓您的用戶對您的應用的響應能力有第一印象。

  • 啟動用戶交互第一時與頁面上的元素,如點擊按鈕或超鏈接。

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

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

跟踪、查看和過濾性能數據

要查看實時性能數據,請確保您的應用使用與實時數據處理兼容的性能監控 SDK 版本。了解詳情

在儀表板中跟踪關鍵指標

要了解您的關鍵指標是趨勢,在性能儀表板的頂部將它們添加到您的指標板。您可以通過查看每週更改或驗證代碼中的最近更改是否提高了性能來快速識別回歸。

Firebase 性能監控儀表板中指標板的圖像

要將指標添加到您的度量板,轉到性能儀表板在火力地堡控制台,然後單擊控制台選項卡。單擊一個空的指標卡,然後選擇一個現有的指標以添加到您的看板中。點擊人口密集度卡更多的選擇,喜歡更換或移除指標。

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

了解更多關於使用儀表板

查看跟踪及其數據

要查看你的痕跡,轉到性能儀表板在火力地堡控制台,向下滾動到的痕跡表,然後單擊相應的子選項卡。該表顯示了每個跟踪的一些主要指標,您甚至可以按特定指標的百分比變化對列表進行排序。

如果單擊跟踪表中的跟踪名稱,則可以單擊各個屏幕以瀏覽跟踪並深入了解感興趣的指標。在大多數頁面上,你可以使用過濾器按鈕(左上角屏幕)的屬性來過濾數據,例如:

按屬性過濾的 Firebase 性能監控數據的圖像
  • 通過網頁URL過濾,查看您網站的數據的特定頁面
  • 通過有效的連接類型過濾器,以了解如何3G連接影響您的應用程序
  • 國家篩選,以確保您的數據庫位置是不影響的特定區域

了解更多關於你的痕跡查看數據

下一步