如何获取网页性能指标 Web Vitals

背景

Web Vitals 是一组关键的用户体验指标，旨在帮助网站开发人员和设计师更好地评估和改进网站的性能、可用性和兼容性。这些指标由 Google 提出，包括：

• LCP (Largest Contentful Paint) —— 最大内容渲染
• FID (First Input Delay) —— 首次输入延时
• CLS (Cumulative Layout Shift) —— 累积布局偏移

它们描述了用户在网站上的关键体验，如页面加载速度、交互响应时间和内容的稳定性。优秀的 Web Vitals 指标是良好用户体验的关键因素，并且可以提高搜索引擎排名。

浏览器 API

这三大指标可以通过 PerformanceObservor 接口来获取。

• LCP 观察的条目类型是 largest-contentful-paint。

  new PerformanceObserver((entryList) => {
  	for (const entry of entryList.getEntries()) {
  		console.log('LCP candidate:', entry.startTime, entry)
  	}
  }).observe({type: 'largest-contentful-paint', buffered: true})
  

  largest-contentful-paint 这个类型条目并不会只触发一次。浏览器会在每次渲染操作后核对上次触发的 largest-contentful-paint 是不是还是当前最大的元素。如果这个结果发生变化，则浏览器就会再触发一次 largest-contentful-paint 这个类型条目。

• CLS 观察的条目类型是 layout-shift。

• FID 观察的条目类型是 first-input。

坑

• 浏览器 API 不能感知页面中的 iframe，输出的各项指标不包含 iframe 带来的影响。
• 对跨域图片的观察需要图片开启跨域响应头 Timing-Allow-Origin。

第三方库：web-vitals

Google 提供的 web-vitals 库可计算以下几个指标：

• 三大核心指标：LCP、FID、CLS
• 其他辅助指标：
  • FCP (First Contentful Paint) —— 首次有内容的渲染
  • TTFB (Time to First Byte) —— 首字节到达时间

这个库并不仅是直接调用浏览器 API，而且还对边缘场景做了处理。

代码片段

import { getLCP, getFID, getCLS } from 'web-vitals'

getCLS(console.log)
getFID(console.log)
getLCP(console.log)