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

語言: CN / TW / HK

時間 2022-06-06 00:19:32 前端全棧開發者

是什麼？

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

「其他文章」