什么是FCP以及如何针对您的网站优化

首次内容绘制 (FCP) 是Google Core Web Vitals中最有意义的指标之一。与其他绘制和加载指标相比，FCP不是关于响应时间的纯技术指标。FCP以用户体验和他们在网站上首先感知的内容为中心，而不是后台加载的内容。通过优化您网站的First Contentful Paint，您不仅可以加快整体加载时间并提高页面速度评级，还可以从字面上向访问者展示他们的请求正在处理中并且加载没有停止。

我们将深入探讨什么是First Contentful Paint，如何衡量和优化它，并回答一些关于FCP的常见问题，以便您可以确保您的网站尽可能高效和可用。

什么是首次内容绘制 (FCP)？

网站的首次内容绘制是浏览器在您的页面上呈现第一个DOM元素的时间。这包括图像、画布元素（非白色）或文本。通俗地说，FCP是指用户可以看到页面的某些部分发生变化。通常，这是作为标题栏或背景图像出现的。此元素可能不是从服务器呈现或加载的第一个元素，但它是用户可以看到的第一个元素，因此它对您网站的UX至关重要。

网站在iframe 中包含的任何内容都不会被FCP考虑在内。也不是非内容绘画，例如背景颜色的变化。那是First Paint，而不是 First Contentful Paint。

FCP是一个有趣的指标。虽然您可以定量衡量它，但它也相对主观。拥有快速的首次内容绘制很重要，因为它会使用户感觉到您的网站正在快速加载。不管是不是真的。您的站点的首次交互延迟（用户可以与站点互动的时间）可能比竞争对手长得多，但由于您的FCP更快，因此在用户看来它可能更快。

也就是说，FCP并不是要欺骗您的用户。较低的FCP时间通常是页面速度的良好指标，优化它的方法也会影响其他页面速度指标（例如最大内容绘制）。

First Contentful Paint，通常简称为 FCP，是一个以用户体验为中心的性能指标，用于衡量页面的第一部分在用户屏幕上显示所需的时间。

FCP 是一个重要指标，因为它会影响感知性能。当访问者第一次访问您的网站时，他们的浏览器会显示一个空白屏幕，这对访问者来说不是一个好的体验。

一旦内容开始加载，访问者至少会感觉 “有东西” 在发生，页面的全部内容很快就会加载完毕。因此，快速的 FCP 时间可以让用户感觉网站速度很快，即使加载其他内容仍需要一些时间。

相比之下，FCP 时间过慢则会让用户感到沮丧，因为这会让用户真正意识到页面加载时间过长。没有什么比让访问者坐在那里盯着空白的屏幕，怀疑你的网站是否还在运行更糟糕的了。

首次内容绘制 vs 最大内容绘制

最大内容绘制（LCP）是另一个以用户体验为中心的流行指标，其运行方式与首次内容绘制类似。

由于这两个指标非常相似，因此很难理解 First Contentful Paint 与 Largest Contentful Paint 之间的区别。

以下是它们之间的基本区别：

• FCP — 衡量第一个对象出现所需的时间。它可以是任何东西，只要页面上出现了某种类型的内容。
• LCP — 衡量页面主要内容出现所需的时间。

由于存在这种差异，页面的 FCP 时间至少应比页面的 LCP 时间快一点。根据指标的定义，LCP 时间不可能快于 FCP 时间。虽然如果加载的 “第一个” 元素与 “主要” 元素相同，两者在技术上可以相等，但这在大多数页面上都不会发生。

为了说明这一点，下面是我们在闪电博主页上运行的 WebPageTest 分析的可视化时间轴。

• FCP 出现在 1.0 秒的影片带中（准确地说是 0.924 秒）。这是它第一次从空白的白页变成有一些可视内容。
• LCP 出现在 1.3 秒的影片带中（准确时间为 1.217 秒）。此时页面的 “主要” 内容可见。

First Contentful Paint 时间为多少才算好？

谷歌建议您将网站页面的首次内容绘制时间控制在 1.8 秒以内。

谷歌认为，FCP 时间在 1.8 至 3.0 秒之间为 “需要改进”，而 FCP 时间超过 3.0 秒为 “差”。

在您深入研究用于检查FCP的各种工具之前，您需要了解什么才是好的FCP分数。从Google关于确定指标分数的文档中，我们可以看到他们将FCP时间分为三类——好、需要改进和差——并讨论了他们如何实现Lighthouse工具使用的百分位评分。

• 好– 在 0 秒到 1.8 秒之间
• 需要改进– 在 1.8 秒到 3 秒之间
• 差– 超过 3 秒

如何测量首次内容绘制（FCP）

最简单的方法是使用 Google 的 PageSpeed Insights 工具来测量网站页面的首次内容绘制时间，当然您也可以使用其他工具。

PageSpeed Insights 的好处在于，它既能提供模拟测试结果，也能提供真实用户的 FCP 数据（如果你的网站有足够的流量，可以包含在 Chrome 用户体验报告中）。

它还涵盖桌面和移动性能，因为页面的 FCP 时间会因用户的设备和连接速度而异。

以下是测试页面的方法：

1. 打开 PageSpeed Insights 页面。
2. 输入要测试的网站页面的 URL。
3. 单击 “Analyze（分析）” 按钮。

测量 FCP 时间的其他方法

WebPageTest – 可让您使用不同的连接速度、设备和位置运行模拟测试。
Chrome开发者工具 – 可让您直接从浏览器运行性能测试。
DebugBear – 可让您从台式机和移动设备运行模拟测试，除 FCP 外还包括大量数据。
GTmetrix – 可让你在不同地点运行模拟测试。你可以在 “性能 “选项卡中看到 FCP 时间，我们的 GTmetrix 测试完整指南对此有更详细的介绍。

现场工具

现场工具是您可以用来跟踪页面对用户的显示方式的工具。真实用户。这些工具不依赖于API和关于您网站的假设。它们直接在您的服务器上实时运行，以便您尽可能获得最准确和最新的信息。

Google在https://web.dev上的FCP文档显示这些是确定FCP的最佳现场工具：

• PageSpeed Insights
• Chrome用户体验报告
• Search Console（速度报告）
• Web Vitals JavaScript 库

实验室工具

用于FCP检测的实验室工具倾向于模拟理想情况下 FCP 的结果。Google推荐的这些实验室工具不是在实际情况下发生延迟、带宽、网络拥塞和其他障碍的情况，而是让您了解您的网站在最佳运行时的表现。

• Lighthouse
• Chrome开发者工具
• PageSpeed Insights

此外，当您正在开发尚未投入生产的网站时，不可能在实际条件下对其进行测试。使用实验室工具还可以帮助您在项目整个开发周期中创建基准和里程碑。

哪些因素会影响网站的 FCP 时间？

从高层次来看，有两个 “方面” 的问题会导致 FCP 速度变慢：

• 服务器响应时间过慢 — 如果您的服务器向用户浏览器提供网站数据的时间过长，您的页面的 FCP 时间就会过慢。这可能包括托管或 DNS
  速度慢、未使用缓存（需要服务器做更多工作后才能提供页面）、未使用内容分发网络（CDN）等问题。
• 网站代码优化不佳 —即使服务器响应速度很快，但如果网站代码优化不佳，FCP 时间仍然会很慢。例如，您的页面可能包含大量
  JavaScript，从而阻碍了可见内容的加载。CSS、图片或网站代码的其他部分也可能存在问题。

根据您网站的具体情况，您可能只在一个方面遇到问题，也可能在两个方面都遇到问题。

如何优化网站FCP分数

既然您已经进一步了解了什么是 First Contentful Paint 以及为什么它很重要，那么我们就来介绍一些您可以实施的可行技巧，以提高您网站的运行时间。

实施这些技巧的好处在于，它们将改善网站的所有性能指标，而不仅仅是 FCP。

以下是该列表的快速摘要，我们将在下文中详细介绍：

1. 改用速度更快的主机
2. 使用页面缓存（最好是在服务器级别）
3. 实施内容交付网络（CDN）
4. 使用速度更快的 DNS 提供商
5. 优化网站的 CSS
6. 优化网站的 JavaScript
7. 禁用页面首屏的懒加载功能
8. 优化字体交付
9. 尽量缩小 DOM 大小
10. 避免重定向（尤其是多重重定向）

什么是FCP以及如何针对您的网站优化