首次内容绘制（FCP）：如何优化获得更好的用户体验？
First Contentful Paint 首次内容绘制 (FCP) 是一种 Web 性能指标，用于衡量页面第一个元素在用户浏览器中呈现和显示所需的时间。
尽管 FCP 不是核心网络生命力指标，但如果关心用户体验，就不应该忽视它。
为什么？因为快速的 FCP 意味着用户能够清晰地看到内容正在加载，而加载速度的高低直接影响着他们的满意度。 用户越满意，就越渴望停留在你的页面上，探索你的内容，最终实现转化。
事不宜迟，学习如何衡量和提高 FCP 分数，为网站访问者提供积极的体验。
文章目录
首次内容绘制 (FCP) 是什么意思？
首次内容绘制 (FCP) 是一种以用户为中心的指标，用于计算在浏览器中加载的页面上呈现第一个内容元素所需的时间。
换句话说，FCP 跟踪页面开始加载和第一个内容元素在用户浏览器中可见之间的时间。
更准确地说， FCP 测量渲染第一个文档对象模型 (DOM) 元素所需的时间 ：
- 文本，
- 图像（包括背景图像）
- 非白<canvas>元素，或
- <svg>元素。
从 UX 角度来看，FCP 是一个重要指标，因为它可以衡量真实用户对页面加载的感受，并决定用户对页面的第一印象。
例如，假设用户等待页面加载的时间太长，只能看到默认背景。
多长时间才算“太长”，以至于用户感到烦躁并想要退出页面？ 足够长是指用户已经能够感觉到延迟。
快速 FCP 表示后台正在发生“某些事情”。对于用户来说，屏幕上渲染的第一个元素反映了以下情况：
- 页面运行正常，并且
- 页面上有一些内容用户可能想要进一步探索和互动。
从这个角度来看，FCP 是一个你不应该忽视的指标。
如何测量 FCP？
可以根据现场和实验室数据来分析首次内容绘制（FCP） 。
结合这两种衡量性能的方法，以确保 FCP 结果的公正性。
实验室工具
实验室数据允许在具有预定义设置的测试环境中测量 FCP 分数。
以下工具可以帮助你跟踪实验室测量的 FCP：
Chrome 开发者工具
Lighthouse
要在 Lighthouse 中测量 FCP 分数 ，请前往 Chrome DevTools 并打开“Lighthouse”选项卡以运行性能审核。
Lighthouse 将收集数据并在“指标”部分生成概述 FCP 分数的报告。
现场工具
为了提高 FCP 分数以获得更好的用户体验，现场数据是一个非常宝贵的信息来源，因为它显示了真实用户如何与网络上的网站进行互动。
重要的是，Google 的现场数据基于 Chrome 用户体验报告 (CrUX)， “Google 搜索会使用该报告来告知页面体验排名因素”。 这意味着通过跟踪和优化 CrUX 中收集的真实用户数据，直接影响 Google 对页面性能的评估。
以下工具可以帮助你根据现场数据跟踪 FCP：
PageSpeed Insights
要使用 PageSpeed Insights 测量 FCP，只需在工具的搜索栏中插入要分析的 URL。
除了在“指标”部分看到的 Lighthouse 实验室数据之外，PageSpeed Insights 还允许查看真实用户在移动设备和桌面设备上对分析页面的体验。
此外，与 Lighthouse 类似，PageSpeed Insights 在“机会”和“诊断”部分提供了有关改进 FCP 的详细建议。
Chrome 用户体验报告
Chrome 用户体验报告 (CrUX) 代表了现实世界的 Chrome 用户在网络上的体验。
有几种方法可以访问网站的 CrUX 数据：
- 使用 CrUX API。如果没有使用 API 的经验，请咨询开发人员或遵循 Google 官方的 CrUX API 文档 。
- 使用现成的模板创建 Looker Studio CrUX 仪表板 。 （此选项对初学者友好，但不提供详细数据。
- 使用 Google BigQuery 查询 CrUX 数据集 。
JavaScript API
如果有使用 JavaScript 的经验，可以使用 Paint Timing API 来捕获页面加载中的 FCP。
然而， 实际的 FCP 指标计算方式和 API 反映的内容可能有所不同 。因此，为了避免不必要的混淆，Google 建议使用 web-vitals JavaScript 库来测量 FCP。
但请记住， web-vitals 库也有其局限性 。例如，在 JavaScript 中无法测量跨域 iframe，而要计算 FCP，则需要能够测量所有 iframe。
理想的首次内容绘制分数是多少？
由于 FCP 衡量的是页面第一个元素呈现并在屏幕上可见所需的时间，因此分数越低越好，这样就可以为网站访问者提供积极的浏览体验。
这意味着你的 FCP 得分应该不超过 1.8 秒。 更准确地说，谷歌建议 75% 的页面浏览量 FCP 得分不超过 1.8 秒。
为了确保大多数用户都能达到这一目标，一个很好的衡量阈值是页面加载的第 75 个百分位数 ，分为移动和桌面设备。————来源： web.dev
首次内容绘制的阈值
为了更好地了解 FCP 分数，应该遵循 Google 制定的阈值。
每个 FCP 阈值都标有不同的颜色，以便更容易使用各种工具解释分数。
以下是为 FCP 值指定的精确阈值：
| FCP 时间 | 如何分析分数 |
|---|---|
| 0-1.8秒 | 良好（绿色） |
| 1.8-3秒 | 需要改进（橙色） |
| 超过3秒 | 差（红色） |
为了确定 FCP 分数，Google 会将网页的结果与 HTTP 存档中的真实网站数据进行比较。
什么原因导致首次内容绘制较高？
影响页面加载初期资源加载和渲染速度的各种因素可能会对首次内容绘制 (FCP) 分数产生负面影响。
然而，在导致 FCP 分数高的最常见原因中， 会发现：
- 服务器响应时间慢，服务器响应时间慢，
- 阻塞渲染的 CSS 和 JavaScript 资源，
- 首屏延迟加载，
- DOM 尺寸过大，以及
- 字体加载时间慢。
尽管了解哪些因素可能导致 FCP 不佳至关重要，但请记住，分析 FCP 分数并找出问题的潜在原因是成功的一半。
为什么？因为只有深入诊断问题才能帮助你有效地优化 FCP，以获得更好的加载速度和用户体验。
因此，让我们深入研究 FCP 优化。
如何提高首次内容绘制？
首先，可以使用 Lighthouse 性能审计中“机会”和“诊断”部分中包含的具体 FCP 建议。
另一方面，可能还想知道哪些方面无需进一步优化即可获得更好的 FCP 分数。可以在 Lighthouse 的“已通过审核”部分找到这些信息。
但总的来说，根据 Google 的官方文档 ，有几种方法可以提高任何网站的 FCP。让我们深入了解一下。
| 建议 | 行动计划 |
|---|---|
| 消除渲染阻塞资源 | 通过内联提供关键 CSS 和 JS、延迟非关键资源以及删除未使用的资源来优化阻止页面首次绘制的资源。 |
| 缩小或删除未使用的 CSS 和 JavaScript | 缩小未使用的 CSS 并减少 JavaScript， 以最大限度地减少网络活动消耗的资源，例如，推迟非关键 CSS 或使用代码拆分。 |
| 减少服务器响应时间（TTFB） | 例如，通过使用 CDN 托管和服务工作者来优化首次字节时间 (TTFB) 。 |
| 避免多次页面重定向 | 避免多次重定向循环和链，以防止可能出现的重定向错误以及页面加载前的额外延迟。 |
| 预加载密钥请求 | 优先获取页面加载后请求的资源，方法是使用 <link rel =preload>。 |
| 预连接到所需来源 | 通过添加预连接或 dns-prefetch 资源提示，与重要的第三方来源建立早期连接。 |
| 保持有效载荷尺寸较小 | 通过推迟请求直到需要它们、缓存它们或使用 WebP 图像而不是 JPEG 或 PNG 来避免较大的网络负载。 |
| 使用缓存提供静态资产 | 通过设置服务器返回 Cache-Control HTTP 响应标头，配置 HTTP 缓存以加快对页面的重复访问。 |
| 避免 DOM 尺寸过大 | 移除未使用的 DOM 节点，仅在需要时创建新的 DOM 节点。如果您已经拥有较大的 DOM 树，请简化 CSS 选择器。 |
| 最小化关键请求深度 | 减少关键资源的数量，优化其加载顺序，考虑使用异步或延迟属性，并优化关键字节数以减少下载时间。 |
| 确保文本在网页字体加载期间保持可见 | 确保字体加载时用户可见。通过在 @font-face 样式中添加 font-display: swap 来避免不可见文本闪烁 (FOIT)。 |
| 最小化请求数量和有效载荷大小 | 优化图像和字体，用视频替换 GIF，优化第三方资源，并处理阻塞渲染的 CSS 和 JS 资源。 |
如你所见，Google 官方推荐了许多方法来优化较差的 FCP 分数。
然而，由于每个网站都是独一无二的，只有专家对你的具体性能问题进行分析才能让你找到问题的真正原因并提高 FCP 分数。
因此，如果你不想自己完成优化过程，我们可以为你处理。
后续步骤
首次内容绘制与其他 Web 性能指标对比
首次内容绘制并不是衡量页面元素在屏幕上呈现和加载速度的唯一指标。
因此，FCP 经常与其他以用户为中心的性能指标混淆 ，尽管它们衡量的是页面性能的不同方面。
让我们深入研究并将 FCP 与其他密切相关的指标进行比较。
首次内容绘制 vs. 最大内容绘制
首次内容绘制 (FCP) 衡量页面上第一个元素的渲染时间，而最大内容绘制 (LCP) 计算页面上最大元素的渲染时间。
这里要记住的重要一点是，页面上第一个加载的元素不一定是最大的元素。
另一个重要的区别是 LCP 是核心网络生命力之一 ——由 Google 排名因素证实。
有关此核心网络生命力指标的更多详细信息，请阅读我们的最大内容绘制 (LCP) 文章，以了解其重要性以及如何优化它。
首次内容绘制 vs. 首次有意义绘制
与衡量第一个元素在页面上呈现的时间的首次内容绘制 (FCP) 相反，首次有意义绘制 (FMP) 计算页面首屏主要内容何时可见。
据 Google 称 ，当页面上第一个呈现的元素构成首屏内容时，FCP 和 FMP 可能相等。
另一方面，当首屏内容位于 iframe 内时，FCP 和 FMP 会有所不同，因为 FCP 默认不会测量它。
不过，重要的是， 从 Lighthouse 6.0 版本开始，FMP 已经不再使用，Google 建议使用 LCP。
Lighthouse 6.0 已弃用首次有效绘制 (FMP)。实践中，FMP 对页面加载过程中的细微差异过于敏感，导致结果不一致（双峰）。此外，该指标的定义依赖于特定浏览器的实现细节，这意味着它无法标准化，也无法在所有 Web 浏览器中实现。今后，请考虑改用 “最大内容绘制” 。————来源： Chrome 开发者
首次内容绘制 vs. 首次绘制
尽管首次内容绘制 (FCP) 和首次绘制 (FP) 看起来相同，但不应互换使用它们，因为它们衡量页面感知加载速度的不同方面。
FP 会考虑最细微的变化（例如更改默认背景颜色）来计算第一个像素在屏幕上渲染的时间。
另一方面，FCP 测量第一个 DOM 元素（如文本或图像）已呈现的时间。
为了给用户提供积极的用户体验， FCP 和 FP 应该同时发生，以便用户不会感到任何延迟。
首次内容绘制 vs. 可交互时间
首次内容绘制 (FCP) 和交互时间 (TTI) 分别衡量页面感知的加载速度和响应能力。
那么它们之间有什么关系呢？ FCP 可以帮助您计算（并优化） TTI 分数，因为 FCP 可以作为衡量 TTI 的起点。
换句话说，如果你想测量一个页面需要多长时间才能完全交互（TTI），你需要从 FCP 开始计算。
阅读我们关于交互时间 (TTI) 的文章 ，了解如何改进它，使你的页面具有更好的交互性和响应能力。
仅关注 FCP 可能不足以完全改善网站的性能和用户体验。
了解上述所有这些指标之间的区别和关系将帮助您在整个页面加载生命周期中优化页面的响应能力和交互性。
结束语
- 首次内容绘制 (FCP) 标记页面加载时间轴中第一个内容元素在用户浏览器中呈现并可见的时间。
- FCP 目标应小于 1.8 秒。请记住，快速的 FCP 会给用户带来明显的视觉效果，并有助于提升他们的浏览满意度。
- FCP 评分低的最常见原因是渲染阻塞资源、响应时间过慢以及 DOM 大小过大。解决这些问题将有助于加快页面加载速度并提高整体 FCP 评分。
- 虽然 FCP 可能与其他网络性能指标混淆，但了解它们的差异可能会有助于提高 FCP 分数并为网站带来更好的性能结果。
- 良好的用户体验的重要性毋庸置疑， 提升 FCP 不再是“是否”的问题，而是“如何”最大化您网页的潜力。 联系我们 ，了解针对网站的个性化行动计划如何带来无与伦比的 SEO 和业务成果。
Nat H.
您好！我是Nat，imrnat的创始人。感谢您将宝贵的时间托付给我们，我希望您在这篇博文中找到了问题的答案。
如果您仍然想知道如何确切地推进您的自然增长，请查看我们的服务页面并安排一次免费的对话，我们将为您完成所有繁琐的工作。
希望能尽快与您交谈！
