什么是FCP?First Contentful Paint 首次内容绘制 (FCP)

首次内容绘制 () 是测量感知加载速度的一个以用户为中心的重要指标,因为该项指标会在用户首次在屏幕上看到任何内容时,在页面加载时间轴中标记出相应的点,迅捷的 FCP 有助于让用户确信某些事情正在进行

什么是 FCP?

什么是FCP?First Contentful Paint 首次内容绘制 (FCP)-1

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

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

怎样算是良好的 FCP 分数?

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

如何测量 FCP

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

实测工具

实验室工具

在 JavaScript 中测量 FCP

要在 JavaScript 中测量 FCP,您可以使用绘制计时 API。以下示例说明了如何创建一个PerformanceObserver来侦听名称为first-contentful-paint的paint条目并记录在控制台中。

在上方的示例中,已记录的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 {getFCP} from 'web-vitals';
// 当 FCP 可用时立即进行测量和记录。
getFCP(console.log);

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

如何改进 FCP

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

要了解改进 FCP 的常见方式(针对任何网站),请参阅以下性能指南:

评分

留下评论

您的电子邮箱地址不会被公开。 必填项已用*标注