新一代性能指標 Web Vitals

新一代性能指標 Web Vitals

什么是 Web Vitals ？

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

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

這是因為，在過去要去衡量一個高質(zhì)量網(wǎng)站，需要的指標太多，且有些指標計算很復雜，所以，Google 推出 Web Vitals 就是為了簡化這個過程，用戶僅僅需要關注 Web Vitals 即可。

在 Web Vitals 中，Core Web Vitals 是最核心的，它包含以下三個指標：

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

下面我們詳細介紹各大核心指標以及測量工具

三大核心指標

LCP：衡量加載體驗

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

指標變化如下圖：

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

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

LCP 目前并不會計算所有元素，因為這樣會使這個指標變得非常復雜，它現(xiàn)在只關注下面的元素：

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

FID：衡量頁面交互性

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

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

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

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

Cumulative Layout Shift，累積布局偏移，是一個重要的、以用戶為中心的衡量視覺穩(wěn)定性的指標，因為它有助于量化用戶體驗意外布局位移的頻率，低 CLS 有助于確保頁面令人愉快。

在使用 app 時，我們經(jīng)常會遇到這樣的問題，當我們點擊一個按鈕或其他操作時，或?qū)㈨撁婊瑒拥侥骋晃恢脮r，突然文本或按鈕沒有任何警告的移動，這對于用戶來說體驗是非常糟糕的

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

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

其他Web Vitals

除了核心之外，還有其他類型的 Web Vitals，當然這些一般都是核心的補充，為一些特定的場景提供服務。

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

同上，Total Blocking Time (TBT) 和 Time to Interactive (TTI) 則是影響 FID 的實驗性指標，他們不屬于核心，因為不能測試現(xiàn)場數(shù)據(jù)，不能反映用戶為核心的關鍵結(jié)果。

如何測量

web-vitals（npm包）

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

Chrome 插件

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

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

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

create-react-app

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

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

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

reportWebVitals(console.log);

當指標的最終值在頁面上完成計算時，將觸發(fā)此函數(shù)。我們就可以通過它將結(jié)果記錄到控制臺或發(fā)送到特定端點

總結(jié)

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

參考鏈接

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