新一代性能指標(biāo) Web Vitals

什么是 Web Vitals ？

Web Vitals，即 Google 給的定義是一個(gè)良好網(wǎng)站的基本指標(biāo)（Essential metrics for a healthy site）

上面我們已經(jīng)介紹了很多指標(biāo)，為什么 Google 還要再去定義一個(gè)新的指標(biāo)集

這是因?yàn)?，在過(guò)去要去衡量一個(gè)高質(zhì)量網(wǎng)站，需要的指標(biāo)太多，且有些指標(biāo)計(jì)算很復(fù)雜，所以，Google 推出 Web Vitals 就是為了簡(jiǎn)化這個(gè)過(guò)程，用戶僅僅需要關(guān)注 Web Vitals 即可。

在 Web Vitals 中，Core Web Vitals 是最核心的，它包含以下三個(gè)指標(biāo)：

• LCP （Largest Contentful Paint）：最大內(nèi)容繪制時(shí)間，用來(lái)衡量加載體驗(yàn)，谷歌要求LCP最好在頁(yè)面首次開(kāi)始加載后的2.5秒內(nèi)發(fā)生；
• FID （First Input Delay）：首次輸入延遲時(shí)間，用于衡量頁(yè)面交互性，谷歌要求頁(yè)面的FID最好小于100毫秒；
• CLS （Cumulative Layout Shift）：累計(jì)布局位移，用于衡量視覺(jué)穩(wěn)定性，谷歌要求頁(yè)面的CLS最好保持小于0.1。

下面我們?cè)敿?xì)介紹各大核心指標(biāo)以及測(cè)量工具

三大核心指標(biāo)

LCP：衡量加載體驗(yàn)

Largest Contentful Paint，最大內(nèi)容繪制，用于記錄視窗內(nèi)最大的元素繪制的時(shí)間，該時(shí)間會(huì)隨著頁(yè)面渲染變化而變化，因?yàn)轫?yè)面中的最大元素在渲染過(guò)程中可能會(huì)發(fā)生改變，另外該指標(biāo)會(huì)在用戶第一次交互后停止記錄。

指標(biāo)變化如下圖：

LCP 比 FP、FCP、FMP 更能體現(xiàn)一個(gè)頁(yè)面的性能好壞程度，因?yàn)檫@個(gè)指標(biāo)會(huì)持續(xù)更新。舉個(gè)例子：當(dāng)頁(yè)面出現(xiàn)骨架屏或者 Loading 動(dòng)畫(huà)時(shí) FCP 其實(shí)已經(jīng)被記錄下來(lái)了，但此時(shí)頁(yè)面內(nèi)容其實(shí)并未呈現(xiàn)

在 2.5 秒內(nèi)表示體驗(yàn)優(yōu)秀

LCP 目前并不會(huì)計(jì)算所有元素，因?yàn)檫@樣會(huì)使這個(gè)指標(biāo)變得非常復(fù)雜，它現(xiàn)在只關(guān)注下面的元素：

• <img> 元素
• <image>元素內(nèi)的<svg>元素
• <video> 元素
• 通過(guò) url() 函數(shù)加載背景圖片的元素
• 包含文本節(jié)點(diǎn)或其他內(nèi)聯(lián)文本元素子級(jí)的塊級(jí)元素。

FID：衡量頁(yè)面交互性

First Input Delay，首次輸入延遲，用于記錄用戶首次與頁(yè)面交互時(shí)響應(yīng)的延遲，即從用戶首次與頁(yè)面進(jìn)行交互（即當(dāng)他們單擊鏈接、按鈕、輸入框等）到瀏覽器實(shí)際上能夠響應(yīng)該交互之間的時(shí)間

FID 在 FCP 和 TTI 之間，這個(gè)階段頁(yè)面已經(jīng)部分呈現(xiàn)，但還不具備完全可持續(xù)交互的狀態(tài)，如果其中有長(zhǎng)任務(wù)發(fā)生的話那么勢(shì)必會(huì)造成響應(yīng)時(shí)間變長(zhǎng)

Google 推薦響應(yīng)用戶交互在 100ms 以內(nèi)：

CLS：衡量視覺(jué)穩(wěn)定性

Cumulative Layout Shift，累積布局偏移，是一個(gè)重要的、以用戶為中心的衡量視覺(jué)穩(wěn)定性的指標(biāo)，因?yàn)樗兄诹炕脩趔w驗(yàn)意外布局位移的頻率，低 CLS 有助于確保頁(yè)面令人愉快。

在使用 app 時(shí)，我們經(jīng)常會(huì)遇到這樣的問(wèn)題，當(dāng)我們點(diǎn)擊一個(gè)按鈕或其他操作時(shí)，或?qū)㈨?yè)面滑動(dòng)到某一位置時(shí)，突然文本或按鈕沒(méi)有任何警告的移動(dòng)，這對(duì)于用戶來(lái)說(shuō)體驗(yàn)是非常糟糕的

為什么會(huì)發(fā)生這種毫無(wú)預(yù)警的移動(dòng)喃？主要是因?yàn)轫?yè)面可能使用某些異步或 DOM 元素加載資源，或者動(dòng)態(tài)將某些元素添加到頁(yè)面上，或者具有未知維度的圖像或視頻，或者默認(rèn)字體大小與后面真實(shí)呈現(xiàn)的字體不匹配、或者是動(dòng)態(tài)調(diào)整大小的第三方廣告或窗口小部件等等。

因此谷歌在 Core Web Vitals 中用 CLS 來(lái)衡量頁(yè)面的累積布局偏移，偏移越大，得分越低。

其他Web Vitals

除了核心之外，還有其他類型的 Web Vitals，當(dāng)然這些一般都是核心的補(bǔ)充，為一些特定的場(chǎng)景提供服務(wù)。

例如，Time to First Byte (TTFB) 和 First Contentful Paint (FCP) 都是關(guān)于加載性能的，兩者都有助于診斷 LCP  (緩慢的服務(wù)端響應(yīng)，或者渲染阻塞的資源)。

同上，Total Blocking Time (TBT) 和 Time to Interactive (TTI) 則是影響 FID 的實(shí)驗(yàn)性指標(biāo)，他們不屬于核心，因?yàn)椴荒軠y(cè)試現(xiàn)場(chǎng)數(shù)據(jù)，不能反映用戶為核心的關(guān)鍵結(jié)果。

如何測(cè)量

web-vitals（npm包）

Google 提供了一個(gè)小而美 npm 包：web-vitals，

Chrome 插件

Google 總共在六種工具上新增了 Web Vitals 的衡量功能，如下圖所示：

其中 TBT (Total Blocking Time) 總阻止時(shí)間其實(shí)和 FID 很相關(guān)。TBT 越短越好，TBT 越長(zhǎng)，首次輸入時(shí)恰好在阻止時(shí)間段的可能性越大， FID 可能更長(zhǎng)

其中 web-vitals-extension 是 Google 提供一個(gè)新的插件，如果你是新手，建議使用它

create-react-app

在最近的 create-react-app 腳手架已經(jīng)包含 web-vitals，主要代碼是：

const reportWebVitals = onPerfEntry => {
  if (onPerfEntry && onPerfEntry instanceof Function) {
    // 引入一個(gè) web-vitals 的庫(kù)
    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
      getCLS(onPerfEntry);
      getFID(onPerfEntry);
      getFCP(onPerfEntry);
      getLCP(onPerfEntry);
      getTTFB(onPerfEntry);
    });
  }
};
export default reportWebVitals;

如果你要測(cè)量任何受支持的指標(biāo)，只需將函數(shù)傳遞到 index.js 中的 reportWebvitals 函數(shù)中：

reportWebVitals(console.log);

當(dāng)指標(biāo)的最終值在頁(yè)面上完成計(jì)算時(shí)，將觸發(fā)此函數(shù)。我們就可以通過(guò)它將結(jié)果記錄到控制臺(tái)或發(fā)送到特定端點(diǎn)

總結(jié)

本文重點(diǎn)介紹了Core Web Vitals，Google 等平臺(tái)對(duì) Web Vitals 的重視以及作出的努力，讓性能優(yōu)化指標(biāo)不再像之前那么難以理解與測(cè)量，極大的方便了研發(fā)人員

參考鏈接

• https://web.dev/vitals/
• SEJ