如何获取网页性能指标 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)

相关小抄

  • (暂无内容)