使用 web-vitals 监控 web app 的性能

使用 web-vitals 监控 web app 的性能

本文经作者授权转载，原文作者：HD Superman，原文链接：使用 web-vitals 监控 web app 的性能

是什么？

Vitals

英汉翻译:

n. 命脉（vital的复数）；（人体的）重要器官；要害

网络释义:

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

web vitals 指的是一些关键指标，可以用来量化网页的用户体验，定义如何改进网页的质量（这是 google 推出的用户体验量化指标）。从 React 16 到 React 17 我们可以看到一个变化是原先 /src 目录下的 serviceWorker 被替换成了 webVitals，React 团队可能认为对于大多数 web 应用 webVitals 相比 serviceWorker 更有用。这里有一个 google 开源的实现，相关下载也很简单：

npm install web-vitals

有哪些关键指标

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-N12p8ccx-1615556689516)(https://content.markdowner.net/pub/OkozV8-0b1mVNL)]

这些关键指标只是 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 插件，可以直接看到网页的指标，如图：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fPDXhPem-1615556689517)(https://content.markdowner.net/pub/3e2oe1-a1Oz7Q5)]

怎样的指标才算好？

一般可以按下面表格评估应用的用户体验：

	良好	需要改进	速度慢
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);

这样可以看到类似的打印信息：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zy1oXdkG-1615556689518)(https://content.markdowner.net/pub/2awVWM-dPxEG8Q)]

与 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，可以看到监控数据：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5ARjimFE-1615556689520)(https://content.markdowner.net/pub/bWmEVn-zkqPM6k)]

可以看到整体 CLS <= 0.1，说明网页加载过程中没有过大的页面跳动，用户体验较好

参考资料

Web Vitals

GoogleChrome/web-vitals

Getting started with measuring Web Vitals

Measuring Performance

"核心网页指标"报告

Google Analytics中gtag.js和analytics.js到底有什么区别