白屏时间(FP), 首屏时间(FCP)与最大内容绘制时间(LCP)

发布时间:2023-10-11 15:30

怎么获取到这两个数据

通过web-vitals-extension插件

web-vitals-extension插件

效果
\"白屏时间(FP),

通过chrome开发者工具Performance选项卡

\"白屏时间(FP),

通过chrome开发者工具Lighthouse选项卡

\"白屏时间(FP),

通过JS计算

web-vitals

FP & FCP & LCP

FP:(First Paint / 首次绘制) 页面第一次绘制像素的时间,实际也是白屏时间

FCP: (First Content Paint / 首次内容绘制) 这个指标用于记录页面首次绘制文本、图片、非空白 Canvas 或 SVG 的时间。这个就是实际有意义的首屏时间,也就是我们通常要优化的首屏时间

LCP: (Largest Contentful Paint / 最大内容绘制) 用于记录视窗内最大的元素绘制的时间,该时间会随着页面渲染变化而变化,因为页面中的最大元素在渲染过程中可能会发生改变,另外该指标会在用户第一次交互后停止记录。例子如下(绿色区块就表示最大内容,可以看到他是随着页面渲染而变化的
\"白屏时间(FP),

\"白屏时间(FP),

上图是官方推荐的时间区间,在 2.5 秒内表示体验优秀。

参考文章

首屏时间(FCP) VS 白屏时间(FP)
还在看那些老掉牙的性能优化文章么?这些最新性能指标了解下
新一代性能指标 Web Vitals

ItVuer - 免责声明 - 关于我们 - 联系我们

本网站信息来源于互联网,如有侵权请联系:561261067@qq.com

桂ICP备16001015号