在现代 Web 开发中，性能优化是一个极为重要的议题。使用工具获取页面性能数据和用户行为数据，对于提升用户体验和页面营销效果都有显著的改善。在浏览器端，浏览器性能指标即 Web Vitals 已成为衡量网站用户体验的首要标准。今天，我们将介绍如何使用 npm 包的 web-vitals 来获取关键的 Web Vitals 数据。
什么是 Web Vitals
Web Vitals 是由 Google 官方提出的一组关键的 Web 性能指标。这些指标强调了响应时间、页面稳定性和可用性三个方面的受欢迎度。目前，Google 从官方角度推荐的 Web Vitals 包括三个核心指标：
LCP（Largest Contentful Paint，最大内容播放时间）：指页面加载最“重要”的屏幕元素所需要的时间，一般是页面内容的矩形区域（例如图像、文本和背景色）。
FID（First Input Delay，首次输入延迟）：指页面响应用户首次交互的速度，例如处理第一个点击或键盘输入的时间。
CLS（Cumulative Layout Shift，累计布局位移）：指页面上所有元素在页面生命周期内因加载或更改而导致的可见布局位移的总和。
安装并使用 web-vitals
安装 web-vitals 包非常简单。你可以使用 npm 或 yarn 包管理器。
npm install web-vitals --save
或者使用 yarn:
yarn add web-vitals
在使用之前，我们需要了解 web-vitals 获取指标数据的方式，然后再讨论如何将获取到的数据发送到服务器上。
获取指标数据
web-vitals 提供了一个函数 getCLS(), getFID() 和 getLCP() 来分别获取 CLS、FID 和 LCP 的数据。你可以选择性地调用这些方法，或者使用 getVitals() 函数一次性获取所有高级别指标数据，请参阅以下示例代码：
-- -------------------- ---- ------- ------ - ------- ------- ------- ------- ------- - ---- ------------- -- --- ---- ------ -- -- --------- -------- --------------- ----- ------ ---- - ---------------------- ----- ------- -- -------- ----- ---- ------------- - -- --- --- ------- ---- --- ---- -- ------- ---------------- ---------------- ---------------- ---------------- -----------------
发送指标数据
获取这些数据后，将它们发送到服务器的实现方式因不同商业场景而异。以下代码展示了一个简单的在用户离开页面时发送统计数据到 backend 的做法：
// Add an event listener to send the data to an analytics endpoint.
addEventListener('unload', () => {
navigator.sendBeacon('/analytics', JSON.stringify({
"CLS": cls,
"FID": fid,
"LCP": lcp
}));
});我们建议你将 Web Vitals 数据发送到 Google Analytics 或第三方异步 JavaScript 提交 API 接受者。有关更多详细信息，请参见 Google Analytics 文档。
总结
通过 Web Vitals，我们可以更好地了解页面性能和用户体验。借助 web-vitals 包，我们可以轻松地收集和分析这些指标，并针对 Google 官方定义的标准进行优化。
在实际开发中，你也可以分享这些评估数据来与其他开发人员协作分析性能瓶颈，甚至可以将它们与网站分析和用户数据组合使用，以更好地为客户和企业提供服务和支持。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedca45b5cbfe1ea06123c6