精品软件与实用教程
首次内容绘制 (FCP) 是测量感知加载速度的一个以用户为中心的重要指标，因为该项指标会在用户首次在屏幕上看到任何内容时，在页面加载时间轴中标记出相应的点，迅捷的 FCP 有助于让用户确信某些事情正在进行。
什么是 FCP？
首次内容绘制 (FCP) 指标测量页面从开始加载到页面内容的任何部分在屏幕上完成渲染的时FCP间。对于该指标，"内容"指的是文本、图像（包括背景图像）、
在上方的加载时间轴中，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 的常见方式（针对任何网站），请参阅以下性能指南：
