发布时间:2023-10-11 15:30
web-vitals-extension插件
web-vitals
FP:(First Paint / 首次绘制) 页面第一次绘制像素的时间,实际也是白屏时间
FCP: (First Content Paint / 首次内容绘制) 这个指标用于记录页面首次绘制文本、图片、非空白 Canvas 或 SVG 的时间。这个就是实际有意义的首屏时间,也就是我们通常要优化的首屏时间
LCP: (Largest Contentful Paint / 最大内容绘制) 用于记录视窗内最大的元素绘制的时间,该时间会随着页面渲染变化而变化,因为页面中的最大元素在渲染过程中可能会发生改变,另外该指标会在用户第一次交互后停止记录。例子如下(绿色区块就表示最大内容,可以看到他是随着页面渲染而变化的
)
上图是官方推荐的时间区间,在 2.5 秒内表示体验优秀。
首屏时间(FCP) VS 白屏时间(FP)
还在看那些老掉牙的性能优化文章么?这些最新性能指标了解下
新一代性能指标 Web Vitals