什么是 FCP?
首次内容绘制 (FCP) 用于衡量从用户首次导航到网页到网页内容的任何部分在屏幕上呈现的时间。对于此指标,选择“内容”是指文本、图片(包括背景图片)、<svg>
元素或非白色 <canvas>
元素。
![google.com 提供的 FCP 时间轴](https://web.developers.google.cn/static/articles/fcp/image/fcp-timeline-googlecom.png?authuser=5&hl=ca)
在上图描绘的加载时间轴中,FCP 发生在第二帧中,即第一个文本和图片元素渲染到屏幕上时。
您会发现,虽然部分内容已呈现,但并非所有内容都已呈现。这是 First Contentful Paint 与 Largest Contentful Paint (LCP) 之间的重要区别,后者旨在衡量网页的主要内容何时完成加载。
FCP 得分如何?
为了提供良好的用户体验,网站应努力使首次内容绘制时间不超过 1.8 秒。为确保大多数用户都能达到此目标,建议将网页加载的第 75 个百分位作为阈值衡量,并按移动设备和桌面设备细分。
如何衡量 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 type="x-smartling-placeholder">
在前面的代码段中,记录的 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()
的源代码。
如何改进 FCP
如需了解如何改进特定网站的 FCP,您可以运行 Lighthouse 性能审核,并关注审核建议的任何特定优化机会或诊断。
要了解如何从整体上改进 FCP(适用于任何网站),请参阅以下性能指南:
- 消除阻塞渲染的资源
- 缩减 CSS 的大小
- 移除未使用的 CSS
- 移除未使用的 JavaScript
- 预先连接到所需的源
- 缩短服务器响应用时 (TTFB)
- 避免多个网页重定向
- 预加载密钥请求
- 避免网络载荷过大
- 使用高效的缓存政策提供静态资源
- 避免 DOM 规模过大
- 最大限度地减少关键请求深度
- 确保文本在网页字体加载期间保持可见
- 尽量减少请求数量并减小传输大小
更新日志
有时,错误是在用于衡量指标的 API 中发现的,有时是在指标本身的定义中发现的。因此,有时必须进行更改,这些更改可能会在内部报告和信息中心显示为改进或回归。
为帮助您应对此问题,对这些指标的实现或定义所做的所有更改都会显示在此更新日志中。
如果您对这些指标有反馈意见,可以在 web-vitals-feedback Google 群组中提供。