什么是 FCP首次内容渲染 (FCP) 衡量从用户首次导航到网页到网页任何一部分内容呈现在屏幕上的时间。对于此指标，“内容”是指文本、图片（包括背景图片）、
在此加载时间轴中，FCP 发生在第二帧，因为这是第一个文本和图片元素渲染到屏幕上的时间。
在上图中所示的加载时间轴中，FCP 发生在第二帧，因为这是第一个文本或图片元素渲染到屏幕上的时间。
您会发现，虽然部分内容已呈现，但并非所有内容都已呈现。这是一个重要的区别，请注意_首次内容绘制时间和[最大_内容绘制时间 (LCP)](https://web.dev/articles/lcp?hl=zh-cn)，后者旨在衡量网页的主要内容何时加载完毕。
FCP 得分多少算好为了提供良好的用户体验，网站应尽量将首次有意义的绘制时间控制在 1.8 秒或更短的时间。为确保大多数用户都能达到此目标值，一个合适的衡量阈值是网页加载时间的第 75 个百分位数，并按移动设备和桌面设备进行细分。
更详细的数据可以参考 lighthouse 性能分计算
如何获取 FCP在 js 中，可以通过 PerformanceObserver对象来获取 FCP 的具体数据
new PerformanceObserver((entryList) => {
for (const entry of entryList.getEntriesByName('first-contentful-paint')) {
console.log('FCP candidate:', entry.startTime, entry);
}
}).observe({type: 'paint', buffered: true});PerformanceObserver 是用于监测性能条目的 API，可以观察特定类型的性能指标（如资源加载、长任务等）
代码验证如下：
通过测试 本网站的 FCP 数值是 396 ms，在 1.8s 以内，属于性能极好的。也是验证我们在 Lighthouse 性能分计算过程详解 过程中 100 分的结果
如何优化 FCPFCP 是用户首次输入网址 -> 网页任何一部分内容呈现在屏幕上的时间。因此，我们要保证内容可以最快渲染出来，阻塞的资源拆分或者之后再出
🌐 优化网络网络优化是web性能绕不开的话题，我们已经总结在 前端性能优化-网络篇 感兴趣的直接查阅即可。
这里给到优化思维导图：
🚀 减少阻塞渲染的资源
延迟非关键 CSS/JS：使用 async 或 defer 加载非关键脚本，避免阻塞 HTML 解析
内联关键 CSS：将首屏所需的 CSS 直接内联到