首次内容绘制 (FCP) 是一项以用户为中心的重要指标，用于衡量感知的加载速度。它标记了网页加载时间轴中用户可以看到屏幕上任何内容的第一个点。快速的 FCP 有助于让用户确信正在发生的事情。
FCP 衡量的是从用户首次导航到相应网页到该网页的任何部分呈现在屏幕上所用的时间。对于此指标，“内容”是指文本、图片（包括背景图片）、<svg> 元素或非白色 <canvas> 元素。
呈现第一个内容元素时，并非所有内容都会呈现。这是 FCP 和 Largest Contentful Paint (LCP) 之间的重要区别，LCP 衡量的是网页主要内容何时完成加载。
FCP 得分良好是多少？
为了提供良好的用户体验，网站的 FCP 不得超过 1.8 秒。为确保您的大多数用户都能达到此目标，建议您衡量第 75 个百分位的网页加载情况（按移动设备和桌面设备细分）。
如何衡量 FCP
野外工具
实验工具
衡量 JavaScript 中的 FCP
如需在 JavaScript 中测量 FCP，请使用 Paint Timing API。以下示例展示了如何创建一个 PerformanceObserver，用于监听名为 first-contentful-paint 的 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});
在此示例中，记录的 first-contentful-paint 条目会告诉您第一个内容元素的绘制时间。不过，在某些情况下，此条目对衡量 FCP 无效。
以下部分列出了 API 报告的内容与指标计算方式之间的差异。
指标与 API 的区别
- API 会为后台标签页中加载的网页分派
first-contentful-paint条目，但在计算 FCP 时应忽略这些网页。只有当网页始终在前台运行时，系统才会考虑首次渲染时间。 - 从往返缓存中恢复网页时，API 不会报告
first-contentful-paint条目，但在这些情况下，应衡量 FCP，因为用户将它们视为不同的网页访问。 - API 可能不会报告跨源 iframe 的绘制时间，但为了正确衡量 FCP，您必须考虑所有帧。子帧可以使用该 API 将其绘制时间报告给父帧以进行汇总。
- API 从导航启动时开始测量 FCP，但对于预渲染的网页，应通过
activationStart测量 FCP，因为 FCP 对应于用户经历的 FCP 时间。
开发者可以使用 web-vitals JavaScript 库来衡量 FCP，而无需记住所有这些细微差异，该库会尽可能为您处理这些差异（iframe 中除外）：
import {onFCP} from 'web-vitals';
// Measure and log FCP as soon as it's available.
onFCP(console.log);
如需查看有关如何在 JavaScript 中测量 FCP 的完整示例，请参阅 onFCP() 的源代码。
如何提高 FCP
如需了解如何改进特定网站的 FCP，您可以运行 Lighthouse 性能审核，并关注审核建议的任何特定机会或诊断。
如需了解如何从总体上改进 FCP（针对任何网站），请参阅以下性能指南：
- 移除阻塞渲染的资源
- 缩减 CSS 大小
- 移除未使用的 CSS
- 移除未使用的 JavaScript
- 预先连接到所需的源
- 缩短服务器响应时间 (TTFB)
- 避免多次网页重定向
- 预加载密钥请求
- 避免网络负载庞大
- 采用高效的缓存政策提供静态资源
- 避免 DOM 规模过大
- 最大限度地缩短关键请求深度
- 确保文本在网页字体加载期间保持可见状态
- 尽量减少请求数量，减少传输大小
更新日志
有时，bug 会在用于衡量指标的 API 中发现，有时会在指标本身的定义中发现。因此，有时必须进行更改，这些更改可能会在内部报告和信息中心内显示为改进或回归。
为了帮助您管理这一点，变更日志中列出了对这些指标的实现或定义的所有更改。
如果您对这些指标有反馈意见，请在 web-vitals-feedback Google 网上论坛中提供。