使用 web-vitals 監控 web app 的效能

語言: CN / TW / HK

是什麼?

Vitals

英漢翻譯:

n. 命脈(vital的複數);(人體的)重要器官;要害

網路釋義:

vitals: 重要器官 Striking the Vitals: 攻其要害

web vitals [1] 指的是一些關鍵指標,可以用來量化網頁的使用者體驗,定義如何改進網頁的質量(這是 google 推出的使用者體驗量化指標)。從 React 16 到 React 17 我們可以看到一個變化是原先 /src 目錄下的 serviceWorker [2] 被替換成了 webVitals,React 團隊可能認為對於大多數 web 應用 webVitals 相比 serviceWorker 更有用。 這裡 [3] 有一個 google 開源的實現,相關下載也很簡單:

npm install web-vitals

有哪些關鍵指標

這些關鍵指標只是 web vitals 的一個子集,不是全部,但幾乎每個網站都需要關注這三個指標:

LCP(Largest Contentful Paint)

最大內容渲染時間:指的是從使用者請求網址到視窗中渲染最大可見內容所需要的事件(最大可見內容通常是圖片或者視訊,或者大塊的文字)

FID(First Input Delay)

首次輸入延遲:指的是從使用者首次與網頁互動(點選連結、按鈕等)到瀏覽器響應此次互動直接的時間。用於判斷網頁進入互動狀態的時間。

CLS(Cumulative Layout Shift)

累計佈局偏移:得分範圍0-1,指的是網頁佈局在載入期間的偏移量,0表示沒有偏移,1表示最大偏移,這個指標指示使用者與網站的互動體驗,如果網址在載入過程佈局一直跳動,使用者體驗會很差。比如載入一張圖片,但沒有大小空白佔位,導致圖片顯示時頁面高度跳動。

哪些測量工具支援這些指標?

測量工具 LCP FID CLS
Chrome User Experience Report
PageSpeed Insights
Search Console (Core Web Vitals report)

如果你使用 chrome,還可以使用這個 chrome 外掛 [4] ,可以直接看到網頁的指標,如圖:

怎樣的指標才算好?

一般可以按下面表格評估應用的使用者體驗:

良好 需要改進 速度慢
LCP <=2.5 秒 <=4 秒 >4 秒
FID <=100 毫秒 <=300 毫秒 >300 毫秒
CLS <=0.1 <=0.25 >0.25

怎麼用?

簡單列印指標

React 17 開箱程式碼已經提供了基本使用方法:

import { ReportHandler } from 'web-vitals';



const reportWebVitals = (onPerfEntry?: ReportHandler) => {
if (onPerfEntry && onPerfEntry instanceof Function) {
import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {

getCLS(onPerfEntry);

getFID(onPerfEntry);

getFCP(onPerfEntry);

getLCP(onPerfEntry);

getTTFB(onPerfEntry);

});

}

};



export default reportWebVitals;

在 index.ts 中簡單使用:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.scss';
import App from './App';
import reportWebVitals from './reportWebVitals';



ReactDOM.render(

<React.StrictMode>

<App/>
</React.StrictMode>,

document.getElementById('root')

);



reportWebVitals(console.log);

這樣可以看到類似的列印資訊:

與 google analytics 結合使用(前提已經部署 analytics.js 或者 gtag.js 程式碼)

使用 analytics.js

function sendToGoogleAnalytics({name, delta, id}) {

ga('send', 'event', {

eventCategory: 'Web Vitals',

eventAction: name,

eventLabel: id,

// analytics 只能接受整數

eventValue: Math.round(name === 'CLS' ? delta * 1000 : delta),

nonInteraction: true,

transport: 'beacon',

});

}

使用 gtag.js

function sendToGoogleAnalytics({name, delta, id}) {
gtag('event', name, {
event_category: 'Web Vitals',
event_label: id,
value: Math.round(name === 'CLS' ? delta * 1000 : delta),
non_interaction: true,

});
}

可以在 google analytics 的事件中看到:

我們隨便點進一個事件 CLS,可以看到監控資料:

可以看到整體 CLS <= 0.1,說明網頁載入過程中沒有過大的頁面跳動,使用者體驗較好

參考資料

Web Vitals [5]

GoogleChrome/web-vitals [6]

Getting started with measuring Web Vitals [7]

Measuring Performance [8]

"核心網頁指標"報告 [9]

Google Analytics中gtag.js和analytics.js到底有什麼區別 [10]

References

[1] web vitals: https://web.dev/vitals/

[2] serviceWorker: https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API

[3] 這裡: https://github.com/GoogleChrome/web-vitals

[4] chrome 外掛: https://chrome.google.com/webstore/detail/web-vitals/ahfhijdlegdabablpippeagghigmibma?hl=en

[5] Web Vitals: https://web.dev/vitals/

[6] GoogleChrome/web-vitals: https://github.com/GoogleChrome/web-vitals

[7] Getting started with measuring Web Vitals: https://web.dev/vitals-measurement-getting-started/

[8] Measuring Performance: https://create-react-app.dev/docs/measuring-performance/

[9] "核心網頁指標"報告: https://support.google.com/webmasters/answer/9205520?hl=zh-Hans

[10] Google Analytics中gtag.js和analytics.js到底有什麼區別: https://www.guozhenyi.com/p/anb8h35744d8