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

怎么获取到这两个数据

通过web-vitals-extension插件

web-vitals-extension插件

效果

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

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

通过JS计算

web-vitals

FP & FCP & LCP

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

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

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

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

参考文章

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