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

怎么获取到这两个数据

通过web-vitals-extension插件

web-vitals-extension插件

效果
白屏时间(FP), 首屏时间(FCP)与最大内容绘制时间(LCP)_第1张图片

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

白屏时间(FP), 首屏时间(FCP)与最大内容绘制时间(LCP)_第2张图片

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

白屏时间(FP), 首屏时间(FCP)与最大内容绘制时间(LCP)_第3张图片

通过JS计算

web-vitals

FP & FCP & LCP

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

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

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

白屏时间(FP), 首屏时间(FCP)与最大内容绘制时间(LCP)_第5张图片

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

参考文章

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

你可能感兴趣的:(前端-浏览器相关,前端-网络相关,前端,javascript,css3)