[[422861]]

本文轉(zhuǎn)載自微信公眾號(hào)「黑客下午茶」，作者為少。轉(zhuǎn)載本文請(qǐng)聯(lián)系黑客下午茶公眾號(hào)。

目錄

• 核心 Web Vitals
  • 最大內(nèi)容繪制 (LCP)
  • 首次輸入延遲 (FID)
  • 累積布局偏移 (CLS)
• 其它 Web Vitals
  • 首次繪制 (FP)
  • 首次內(nèi)容繪制 (FCP)
  • 首字節(jié)時(shí)間 (TTFB)
• 閾值
• 分布直方圖
• 瀏覽器支持

Web Vitals 是谷歌定義的一組度量指標(biāo)，用于度量渲染時(shí)間(render time)、響應(yīng)時(shí)間(response time)和布局偏移(layout shift)。每個(gè)數(shù)據(jù)點(diǎn)都提供了關(guān)于應(yīng)用程序總體性能的見解。

• https://web.dev/vitals/

瀏覽器內(nèi)的 Sentry SDK 收集 Web Vitals 信息(如果支持)并將該信息添加到前端事務(wù)(transaction)中。然后將這些重要信息匯總在幾個(gè)圖表中，以便快速了解每個(gè)前端事務(wù)(transaction)對(duì)您的用戶的執(zhí)行情況。

核心 Web Vitals

這些 Web Vitals 被谷歌認(rèn)為是最重要的，直接衡量用戶體驗(yàn)。Google 報(bào)告稱，截至 2021 年 5 月，這些指標(biāo)也會(huì)影響您的搜索排名。

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

最大內(nèi)容繪制 (LCP)

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

https://web.dev/lcp/

首次輸入延遲 (FID)

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

• https://web.dev/fid/

累積布局偏移 (CLS)

Cumulative Layout Shift (CLS) 是渲染過程中每個(gè)意外元素偏移的單個(gè)布局偏移分?jǐn)?shù)的總和。想象一下導(dǎo)航到一篇文章并嘗試在頁面完成加載之前單擊鏈接。在您的光標(biāo)到達(dá)那里之前，鏈接可能由于圖像渲染而向下移動(dòng)。CLS 分?jǐn)?shù)代表了破壞性和視覺不穩(wěn)定轉(zhuǎn)變的程度，而不是使用持續(xù)時(shí)間來表示此 Web Vital。

使用影響(impact)和距離(distance)分?jǐn)?shù)計(jì)算每個(gè)布局偏移分?jǐn)?shù)。影響分?jǐn)?shù)是元素在兩個(gè)渲染幀之間影響的總可見區(qū)域。距離分?jǐn)?shù)測量它相對(duì)于視口移動(dòng)的距離。

Layout Shift Score = Impact Fraction * Distance Fraction 
布局移位得分 = 影響分?jǐn)?shù) * 距離分?jǐn)?shù) 

布局移位得分 = 影響分?jǐn)?shù) * 距離分?jǐn)?shù)

讓我們看一下上面的例子，它有一個(gè)不穩(wěn)定的元素——主體文本(body text)。影響部分大約是頁面的 50%，并將主體文本向下移動(dòng) 20%。布局偏移得分為0.1，等于 0.5*0.2 的乘積。因此，CLS 為 0.1。

其它 Web Vitals

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

首次繪制 (FP)

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

首次內(nèi)容繪制 (FCP)

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

首字節(jié)時(shí)間 (TTFB)

Time To First Byte (TTFB) 測量用戶瀏覽器接收頁面內(nèi)容的第一個(gè)字節(jié)所需的時(shí)間。TTFB 幫助開發(fā)人員了解他們的緩慢是由初始響應(yīng)(initial response)引起的還是由于渲染阻塞內(nèi)容(render-blocking content)引起的。

閾值

Google 的 “好(Good)”、“需要改進(jìn)(Needs Improvement)”和“差(Poor)”閾值用于將數(shù)據(jù)點(diǎn)分類為綠色、黃色和紅色，用于對(duì)應(yīng)的 Web Vitals。“Needs improvement” 在 Sentry 中被稱為 “Meh”。

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

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

分布直方圖

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

默認(rèn)情況下，將從直方圖中排除異常值，以提供這些重要信息的更詳細(xì)視圖。離群值(Outlier)是使用上外框(upper outer fence a)作為上限來確定的，高于上限的任何數(shù)據(jù)點(diǎn)都被視為離群(outlier)值。

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

每個(gè) Web Vital 的垂直標(biāo)記是觀察到的數(shù)據(jù)點(diǎn)的第 75 個(gè)百分位。換句話說，25% 的記錄值超過了該數(shù)量。

如果您注意到任何直方圖上的感興趣區(qū)域，請(qǐng)單擊并拖動(dòng)該區(qū)域以放大以獲得更詳細(xì)的視圖。您可能還想在直方圖中查看與 transaction 相關(guān)的更多信息。單擊所選 Web Vital 下方的 “Open in Discover” 以構(gòu)建自定義查詢以進(jìn)行進(jìn)一步調(diào)查。有關(guān)更多詳細(xì)信息，請(qǐng)參閱 Discover Query Builder 的完整文檔。

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

如果您希望查看所有可用數(shù)據(jù)，請(qǐng)打開下拉菜單并單擊 “View All”。單擊 “View All” 時(shí)，您可能會(huì)看到極端異常值。您可以單擊并拖動(dòng)某個(gè)區(qū)域以放大以獲得更詳細(xì)的視圖。

瀏覽器支持