Sentry Web 性能監控 - Web Vitals

系列

• 1 分鐘快速使用 Docker 上手最新版 Sentry-CLI - 建立版本
• 快速使用 Docker 上手 Sentry-CLI - 30 秒上手 Source Maps
• Sentry For React 完整接入詳解
• Sentry For Vue 完整接入詳解
• Sentry-CLI 使用詳解

目錄

• 核心

  Web Vitals

  • 最大内容繪制 (

    LCP

    )
  • 首次輸入延遲 (

    FID

    )
  • 累積布局偏移 (

    CLS

    )
• 其它

  Web Vitals

  • 首次繪制 (

    FP

    )
  • 首次内容繪制 (

    FCP

    )
  • 首位元組時間 (

    TTFB

    )
• 門檻值
• 分布直方圖
• 浏覽器支援

公衆号：黑客下午茶
           

Web Vitals

是谷歌定義的一組度量名額，用于度量渲染時間(

render time

)、響應時間(

response time

)和布局偏移(

layout shift

)。每個資料點都提供了關于應用程式總體性能的見解。

• https://web.dev/vitals/

浏覽器内的

Sentry SDK

收集

Web Vitals

資訊（如果支援）并将該資訊添加到前端事務(

transaction

)中。 然後将這些重要資訊彙總在幾個圖表中，以便快速了解每個前端事務(

transaction

)對您的使用者的執行情況。

核心 Web Vitals

這些

Web Vitals

被谷歌認為是最重要的，直接衡量使用者體驗。

Google

報告稱，截至

2021

年

5

月，這些名額也會影響您的搜尋排名。

• Google reports that as of May 2021, these metrics also impact your search ranking
• https://developers.google.com/search/blog/2020/11/timing-for-page-experience

最大内容繪制 (LCP)

Largest Contentful Paint (LCP)

測量最大内容出現在視口中的渲染時間。 這可以是來自文檔對象模型(

DOM

)的任何形式，例如

image

、

SVG

或

text block

。 它是視口中最大的像素區域，是以具有最直覺的定義。

LCP

幫助開發人員了解使用者看到頁面上的主要内容需要多長時間。

• https://web.dev/lcp/

首次輸入延遲 (FID)

First Input Delay (FID)

測量使用者嘗試與視口互動時的響應時間。 操作可能包括單擊按鈕、連結或其他自定義

Javascript controller

。

FID

提供有關應用程式頁面上成功或不成功互動的關鍵資料。

• https://web.dev/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

)值。

• upper outer fence：https://en.wikipedia.org/wiki/Outlier#Tukey's_fences

每個

Web Vital

的垂直标記是觀察到的資料點的第

75

個百分位。換句話說，

25%

的記錄值超過了該數量。

如果您注意到任何直方圖上的感興趣區域，請單擊并拖動該區域以放大以獲得更詳細的視圖。 您可能還想在直方圖中檢視與

transaction

相關的更多資訊。單擊所選

Web Vital

下方的

“Open in Discover”

以建構自定義查詢以進行進一步調查。有關更多詳細資訊，請參閱

Discover Query Builder

的完整文檔。

• Query Builder：https://docs.sentry.io/product/discover-queries/query-builder/

如果您希望檢視所有可用資料，請打開下拉菜單并單擊

“View All”

。 單擊

“View All”

時，您可能會看到極端異常值。您可以單擊并拖動某個區域以放大以獲得更詳細的視圖。

浏覽器支援

Web Vital	Chrome	Edge	Opera	Firefox	Safari	IE
最大内容繪制 (LCP)	✓	✓	✓	-	-	-
首次輸入延遲 (FID)	✓	✓	✓	✓	✓	✓
累積布局偏移 (CLS)	✓	✓	✓	-	-	-
首次繪制 (FP)	✓	✓	✓	-	-	-
首次内容繪制 (FCP)	✓	✓	✓	✓	✓	-
首位元組時間 (TTFB)	✓	✓	✓	✓	✓	✓

公衆号：黑客下午茶