Sentry Web 效能監控 - Web Vitals

為少發表於2021-09-09
Web

系列

目錄

  • 核心 Web Vitals
    • 最大內容繪製 (LCP)
    • 首次輸入延遲 (FID)
    • 累積佈局偏移 (CLS)
  • 其它 Web Vitals
    • 首次繪製 (FP)
    • 首次內容繪製 (FCP)
    • 首位元組時間 (TTFB)
  • 閾值
  • 分佈直方圖
  • 瀏覽器支援
公眾號：黑客下午茶

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”。

Web Vital Good Meh Poor
最大內容繪製 (LCP) <= 2.5s <= 4s > 4s
首次輸入延遲 (FID) <= 100ms <= 300ms > 300ms
累積佈局偏移 (CLS) <= 0.1 <= 0.25 > 0.25
首次繪製 (FP) <= 1s <= 3s > 3s
首次內容繪製 (FCP) <= 1s <= 3s > 3s
首位元組時間 (TTFB) <= 100ms <= 200ms > 600ms

一些 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” 時，您可能會看到極端異常值。您可以單擊並拖動某個區域以放大以獲得更詳細的檢視。

瀏覽器支援

Web Vital Chrome Edge Opera Firefox Safari IE
最大內容繪製 (LCP) ✓ ✓ ✓ - - -
首次輸入延遲 (FID) ✓ ✓ ✓ ✓ ✓ ✓
累積佈局偏移 (CLS) ✓ ✓ ✓ - - -
首次繪製 (FP) ✓ ✓ ✓ - - -
首次內容繪製 (FCP) ✓ ✓ ✓ ✓ ✓ -
首位元組時間 (TTFB) ✓ ✓ ✓ ✓ ✓ ✓ 
公眾號：黑客下午茶

相關文章