First Contentful Paint 首次内容绘制 (FCP)

Nov 7, 2019 — 更新日期 Oct 19, 2022

Available in: English, Español, Português, Русский, 日本語, and 한국어

Appears in: 指标

Philip Walton

Twitter GitHub Homepage

什么是 FCP？ #

首次内容绘制 (FCP) 指标测量页面从开始加载到页面内容的任何部分在屏幕上完成渲染的时间。对于该指标，"内容"指的是文本、图像（包括背景图像）、<svg>元素或非白色的<canvas>元素。

在上方的加载时间轴中，FCP 发生在第二帧，因为那是首批文本和图像元素在屏幕上完成渲染的时间点。

您会注意到，虽然部分内容已完成渲染，但并非所有内容都已经完成渲染。这是首次内容绘制 (FCP) 与*Largest Contentful Paint 最大内容绘制 (LCP)*（旨在测量页面的主要内容何时完成加载）之间的重要区别。

良好的 FCP 值是 1.8 秒或更短，差的值大于 3.0 秒，中间的任何东西都需要改进

怎样算是良好的 FCP 分数？ #

为了提供良好的用户体验，网站应该努力将首次内容绘制控制在1.8 秒或以内。为了确保您能够在大部分用户的访问期间达成建议目标值，一个良好的测量阈值为页面加载的第 75 个百分位数，且该阈值同时适用于移动和桌面设备。

如何测量 FCP #

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

实测工具 #

实验室工具 #

在 JavaScript 中测量 FCP #

Browser support

Chrome 60, Supported 60
Firefox 84, Supported 84
Edge 79, Supported 79
Safari 14.1, Supported 14.1

Source

要在 JavaScript 中测量 FCP，您可以使用绘制计时 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 将这些框架的绘制时机报告给父框架来进行聚合。

开发者不必记住所有这些细微差异，而是可以使用web-vitals JavaScript 库来测量 FCP，库会自行处理这些差异（在可能的情况下）：

import {onFCP} from 'web-vitals';

// 当 FCP 可用时立即进行测量和记录。
onFCP(console.log);

您可以参考onFCP()的源代码，了解如何在 JavaScript 中测量 FCP 的完整示例。

如何改进 FCP #

要了解如何改进某个特定网站的 FCP，您可以运行一次灯塔性能审计，并留心查看审计建议的各种具体机会或诊断。

要了解改进 FCP 的常见方式（针对任何网站），请参阅以下性能指南：

CHANGELOG #

Occasionally, bugs are discovered in the APIs used to measure metrics, and sometimes in the definitions of the metrics themselves. As a result, changes must sometimes be made, and these changes can show up as improvements or regressions in your internal reports and dashboards.

To help you manage this, all changes to either the implementation or definition of these metrics will be surfaced in this CHANGELOG.

If you have feedback for these metrics, you can provide it in the web-vitals-feedback Google group.

Last updated

Oct 19, 2022 — Improve article

Return to all articles