Sentry Web 性能監控 - Web Vitals

目錄

Web Vitals 是谷歌定義的一組度量指標，用於度量渲染時間 (render time)、響應時間 (response time) 和佈局偏移 (layout shift)。每個數據點都提供了關於應用程序總體性能的見解。

瀏覽器內的 Sentry SDK 收集 Web Vitals 信息（如果支持）並將該信息添加到前端事務 (transaction) 中。然後將這些重要信息彙總在幾個圖表中，以便快速瞭解每個前端事務 (transaction) 對您的用戶的執行情況。

核心 Web Vitals

這些 Web Vitals 被谷歌認爲是最重要的，直接衡量用戶體驗。Google 報告稱，截至 2021 年 5 月，這些指標也會影響您的搜索排名。

最大內容繪製 (LCP)

Largest Contentful Paint (LCP) 測量最大內容出現在視口中的渲染時間。這可以是來自文檔對象模型 (DOM) 的任何形式，例如 image、SVG 或 text block。它是視口中最大的像素區域，因此具有最直觀的定義。LCP 幫助開發人員瞭解用戶看到頁面上的主要內容需要多長時間。

首次輸入延遲 (FID)

First Input Delay (FID) 測量用戶嘗試與視口交互時的響應時間。操作可能包括單擊按鈕、鏈接或其他自定義 Javascript controller。FID 提供有關應用程序頁面上成功或不成功交互的關鍵數據。

累積佈局偏移 (CLS)

Cumulative Layout Shift (CLS) 是渲染過程中每個意外元素偏移的單個佈局偏移分數的總和。想象一下導航到一篇文章並嘗試在頁面完成加載之前單擊鏈接。在您的光標到達那裏之前，鏈接可能由於圖像渲染而向下移動。CLS 分數代表了破壞性和視覺不穩定轉變的程度，而不是使用持續時間來表示此 Web Vital。

使用影響 (impact) 和距離 (distance) 分數計算每個佈局偏移分數。影響分數是元素在兩個渲染幀之間影響的總可見區域。距離分數測量它相對於視口移動的距離。

Layout Shift Score = Impact Fraction * Distance Fraction
佈局移位得分 = 影響分數 * 距離分數

讓我們看一下上面的例子，它有一個不穩定的元素——主體文本 (body text)。影響部分大約是頁面的 50%，並將主體文本向下移動 20%。佈局偏移得分爲0.1，等於 0.5*0.2 的乘積。因此，CLS 爲 0.1。

其它 Web Vitals

這些 Web Vitals 通常不太容易被用戶看到，但對於排除 Core Web Vitals 的問題很有用。

首次繪製 (FP)

First Paint (FP) 測量第一個像素出現在視口中所花費的時間，呈現與先前顯示內容相比的任何視覺變化。這可以是來自文檔對象模型 (DOM) 的任何形式，例如 background color 、canvas 或 image。FP 可幫助開發人員瞭解渲染頁面是否發生了任何意外。

首次內容繪製 (FCP)

First Contentful Paint (FCP) 測量第一個內容在視口中渲染的時間。這可以是來自文檔對象模型 (DOM) 的任何形式，例如 image、SVG 或 text block。FCP 經常與 First Paint (FP) 重疊。FCP 幫助開發人員瞭解用戶在頁面上看到任何內容更改需要多長時間。

首字節時間 (TTFB)

Time To First Byte (TTFB) 測量用戶瀏覽器接收頁面內容的第一個字節所需的時間。TTFB 幫助開發人員瞭解他們的緩慢是由初始響應 (initial response) 引起的還是由於渲染阻塞內容 (render-blocking content) 引起的。

閾值

Google 的 “好(Good)”、“需要改進(Needs Improvement)”和“差(Poor)”閾值用於將數據點分類爲綠色、黃色和紅色，用於對應的 Web Vitals。“Needs improvement” 在 Sentry 中被稱爲 “Meh”。

sQAu2N

一些 Web Vitals（例如 FP、FCP、LCP 和 TTFB）是相對於 transaction 的開始進行測量的。與使用其他工具（如 Lighthouse）生成的值相比，值可能會有所不同。

lighthouse：https://github.com/GoogleChrome/lighthouse

分佈直方圖

Web Vitals 直方圖顯示數據分佈，它可以通過揭示異常來幫助您識別和診斷前端性能問題。

默認情況下，將從直方圖中排除異常值，以提供這些重要信息的更詳細視圖。離羣值 (Outlier) 是使用上外框 (upper outer fence a) 作爲上限來確定的，高於上限的任何數據點都被視爲離羣 (outlier) 值。

每個 Web Vital 的垂直標記是觀察到的數據點的第 75 個百分位。換句話說，25% 的記錄值超過了該數量。

如果您注意到任何直方圖上的感興趣區域，請單擊並拖動該區域以放大以獲得更詳細的視圖。您可能還想在直方圖中查看與 transaction 相關的更多信息。單擊所選 Web Vital 下方的 “Open in Discover” 以構建自定義查詢以進行進一步調查。有關更多詳細信息，請參閱 Discover Query Builder 的完整文檔。

如果您希望查看所有可用數據，請打開下拉菜單並單擊 “View All”。單擊 “View All” 時，您可能會看到極端異常值。您可以單擊並拖動某個區域以放大以獲得更詳細的視圖。

瀏覽器支持

SMQbUb

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/QZQ8-48MD3zgGmSrr_oWwQ

猜你喜歡