First Contentful Paint (FCP)

Philip Walton

浏览器支持

• 60
• 79
• 84
• 14.1

来源

注意：首次内容绘制 (FCP) 是一项以用户为中心的重要指标，用于衡量感知的加载速度，因为它标记了网页加载时间轴上用户在屏幕上看到任何内容的第一个时间点，快速的 FCP 有助于让用户确信正在发生某件事。

什么是 FCP？

首次内容绘制 (FCP) 用于衡量从用户首次导航到网页到网页内容的任何部分在屏幕上呈现的时间。对于此指标，“内容”是指文字、图片（包括背景图片）、<svg> 元素或非白色的 <canvas> 元素。

要点：请务必注意，FCP 包括前一页面的所有卸载时间、连接设置时间、重定向时间和首字节时间 (TTFB)。在现场测量时，这非常重要，可能会导致现场测量结果与实验室测量结果之间出现差异。

在此加载时间轴中，FCP 发生在第二帧中，因为这是第一个文本和图片元素渲染到屏幕上的时间。

在上图描绘的加载时间轴中，FCP 发生在第二帧中，即第一个文本和图片元素渲染到屏幕上时。

您会发现，虽然部分内容已呈现，但并非所有内容都已呈现。这是 First Contentful Paint 与 Largest Contentful Paint (LCP) 之间的重要区别，后者旨在衡量网页的主要内容何时完成加载。

FCP 得分如何？

为了提供良好的用户体验，网站应努力使首次内容绘制时间不超过 1.8 秒。为确保大多数用户都能达到此目标，建议将网页加载的第 75 个百分位作为阈值衡量，并按移动设备和桌面设备细分。

理想的 FCP 值为 1.8 秒或更短。不良值超过 3.0 秒

如何衡量 FCP

FCP 可在实验室或现场测量，并且可在以下工具中使用：

实地工具

• PageSpeed Insights
• Chrome 用户体验报告
• Search Console（速度报告）
• web-vitals JavaScript 库

实验工具

• 灯塔
• Chrome 开发者工具
• PageSpeed Insights

在 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 条目记录到控制台，但使用 JavaScript 衡量 FCP 会比较复杂。请继续阅读以了解更多详情。

在前面的代码段中，记录的 first-contentful-paint 条目会告诉您第一个内容元素的绘制时间。但在某些情况下，此条目对于衡量 FCP 无效。

以下部分列出了 API 报告的内容与指标计算方式之间的差异。

指标与 API 之间的区别

• 该 API 会针对后台标签页中加载的网页分派 first-contentful-paint 条目，但在计算 FCP 时应忽略这些网页（只有当网页始终在前台运行时，才应考虑首次渲染时间）。
• 当网页从往返缓存中恢复时，API 不会报告 first-contentful-paint 条目，但在这种情况下，应对 FCP 进行衡量，因为用户将它们视为不同的网页访问。
• API 可能不会报告来自跨源 iframe 的渲染时间，但为了正确衡量 FCP，您应考虑所有帧。子帧可以使用该 API 将其绘制时间报告给父帧以进行汇总。
• 该 API 从导航开始开始测量 FCP，但对于预渲染的网页，FCP 应从 activationStart 开始衡量，因为这与用户实际体验到的 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() 的源代码。

注意：在某些情况下（例如跨源 iframe），您无法在 JavaScript 中衡量 FCP。如需了解详情，请参阅 web-vitals 库的限制部分。

如何改进 FCP

如需了解如何改进特定网站的 FCP，您可以运行 Lighthouse 性能审核，并关注审核建议的任何特定优化机会或诊断。

要了解如何从整体上改进 FCP（适用于任何网站），请参阅以下性能指南：

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

更新日志

有时，错误是在用于衡量指标的 API 中发现的，有时是在指标本身的定义中发现的。因此，有时必须进行更改，这些更改可能会在内部报告和信息中心显示为改进或回归。

为帮助您应对此问题，对这些指标的实现或定义所做的所有更改都会显示在此更新日志中。

如果您对这些指标有反馈意见，可以在 web-vitals-feedback Google 网上论坛中提供。