此页面由 Cloud Translation API 翻译。

First Contentful Paint (FCP)

Philip Walton

浏览器支持

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

来源

什么是 FCP？

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

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

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

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

FCP 得分如何？

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

良好 FCP 值不超过 1.8 秒，不佳值大于 3.0 秒，且介于两者之间的所有值都需要改进 — 理想的 FCP 值为 1.8 秒或更短。不良值超过 3.0 秒

如何衡量 FCP

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});

</ph> 警告：此代码展示了如何将 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() 的源代码。

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

如何改进 FCP

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

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

更新日志

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

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

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