First Contentful Paint 指标

First Contentful Paint

FCP(first-contentful-paint)，从页面加载开始到页面内容的任何部分在屏幕上完成渲染的时间。内容指的是文本、图像（包括背景图像）、<svg>元素或非白色的<canvas>元素，如果不存在这些内容元素，那么不会触发 FCP，即使存在 css 样式，但是没有内容，也是不会触发的。

比如说我们的 html 里只有一个 <div>text</div>，它的 performance 为：

因为要渲染的内容都是 text 这个文本，因此 FP、FCP LCP 的时间基本相同。

指标的计算:

const fcp = performance.getEntries('paint').filter(entry => entry.name == 'first-contentful-paint')[0];
fcp

注意，FCP 包括前一页面的所有卸载时间、连接设置时间、首字节时间 (TTFB)。

除了直接用 performance.getEntries() 获取到全部性能对象后在进行过滤外，还可以通过 PerformanceObserver 实例进行监听：

const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    if(entry.name === 'first-contentful-paint') {
        console.log(entry);
    }
  });
});

observer.observe({ type: "paint", buffered: true });

那么 FCP 会不会因为 css 文件的加载而受到影响？或者说 FCP 的触发只跟可见的元素有关，只要渲渲染 html 中可见的元素就会触发 FCP？

答案是会，浏览器首先会在所有 CSS 样式加载、解析完成之后才会触发 FCP，这是为了确保页面的视觉一致性和用户体验。如果浏览器在 CSS 样式完全解析和应用之前展示节点，可能会导致用户看到样式不完整或错误的页面，这样的用户体验是不可接受的。为了避免这些问题，浏览器通常会等到关键的 CSS 完全加载并应用之后，再进行内容的初次渲染，从而触发 FCP。

FCP 得分

为了提供良好的用户体验，网站应努力使 First Contentful Paint 的时长不超过1.8秒。

FCP 优化

理想的 First Contentful Paint 时间应尽可能短，通常目标是 1 秒以内，但 2 秒以内也被认为是良好的。通过优化资源加载、减少阻塞渲染的操作、改善页面结构以及优化图片和字体的加载，可以显著提升 FCP 时间，从而提供更好的用户体验。

如果 FCP 耗时过久，可以在以下几种情况中排查、优化（基本跟 FP 一样）：

• 消除阻塞渲染的资源
• 压缩 CSS
• 移除未使用的 CSS
• 移除未使用的 JavaScript
• 预先连接到所需的源
• 缩短服务器响应用时 (TTFB)
• 避免多个网页重定向
• 预加载密钥请求
• 避免网络载荷过大
• 使用高效的缓存提供静态资源
• 避免 DOM 规模过大
• 最大限度地减少关键请求深度
• 确保文本在网页字体加载期间保持可见
• 尽量减少请求数量并减小传输大小

使用 api 获取的 FCP 在某些情况下存在一定问题

可以使用 Google 团队开发的