首次渲染（FP）/首次内容渲染（FCP）是一项以用户为中心的重要指标，用于衡量用户感知的加载速度，因为它标志着网页加载时间轴中用户首次在屏幕上看到内容的时刻。
什么是FP/FCP
FP（First Paint）
首次渲染（FP）用于衡量用户从打开页面到首个像素渲染到页面的时间。
FP通常反映页面的白屏时间，在FP时间点之前，用户看到的是没有任何内容的白色屏幕。白屏时间反映当前Web页面的网络加载性能情况，FP越短，白屏时间就越短，用户页面加载体验就越好。
FCP（First Contentful Paint）
首次内容渲染（FCP）用于衡量从用户首次导航至网页到页面上任意一部分内容呈现在屏幕上的时间。此处的“内容”是指文本、图像（包括背景图像）、
<svg>元素或非白色<canvas>元素。FCP通常反映页面首次呈现内容的时间。在FCP时间点之前，用户所见为没有任何实际内容的屏幕。首次呈现内容的时间能够反映当前Web页面的网络加载性能、页面DOM结构的复杂性以及内联脚本的执行效率等因素。FCP时间越短，首次呈现内容的时间也越短，从而提升用户的页面加载体验。。
注意：FCP包括上一个网页的所有卸载时间、连接设置时间、重定向时间和首字节时间（TTFB），在真实场景下，这些时间可能难以准确预估，从而导致实际测量结果与理论预期结果之间存在差异。
FP和FCP的主要区别是：
FP指的是浏览器开始将内容绘制到屏幕的时间节点，包括任何内容触发的视觉变化。
FCP指的是浏览器首次绘制DOM内容的时间点，该内容包括文本、图片（包括背景图片）、
<svg>元素或非白色<canvas>元素等。
FP和FCP得分参考值
FP：根据行业普遍标准，为了提供良好的用户体验，网站应尽量将FP值控制在1秒或更短的时间内。具体而言，FP值小于1秒被视为优秀，而大于2.5秒则被认为是糟糕的表现。为有效评估大多数用户是否能够达到该目标，一个合适的衡量阈值是网页加载时间的第75个百分位数。
FCP：类似FP，根据行业普遍标准，FCP值小于1.8秒视为优秀，大于3.0秒被视为糟糕，取网页加载时间的第75个百分位数作为衡量阈值。
如何获取FP和FCP
在JavaScript中，我们使用Paint Timing API来获取FP和FCP，。以下示例展示了如何创建一个 PerformanceObserver，用于监听名为first-contentful-paint的paint条目并将其记录到控制台。对于FP，需要监听的条目为first-paint。
new PerformanceObserver((entryList) => {
for (const entry of entryList.getEntriesByName('first-contentful-paint')) {
console.log('FCP candidate:', entry.startTime, entry);
}
}).observe({ type: 'paint', buffered: true });不过，在某些情况下，此条目不能直接用于衡量FCP。指标与API之间的差异列出了API上报的内容与指标计算方式之间的差异。
由于FCP指标获取并不都是直接根据Paint Timing API得到的，所以可能会存在FCP数值小于FP数值的情况。