CoreWeb中最有意义的内容绘制（FCP）教程

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

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

什么是 First Paint (FCP)？

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

FCP 不会考虑网站中包含的任何内容。 也不是非内容绘画，比如背景颜色的变化。 那是 First Paint，它不是什么。

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

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

如何测量 FCP

尽管 FCP 由于用户感知而很重要，但它是一个可以衡量和评分的量化指标。 尽管如此，您可以使用这些工具来指示 FCP 在现场（对真实用户）和实验室（用于测试目的的模拟页面加载）的影响。

什么是好的 FCP 分数？

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

下面，我们列出了各种工具，您可以使用这些工具来查看您的网站属于这些类别中的哪一个。

现场工具

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

FCP 文档显示这些是确定 FCP 的最佳现场工具：

此外，也许最好的工具是真实用户监控 (RUM)。 这是您跟踪和观察真实用户与您的网站互动的地方。 您可以使用上面列出的工具定量跟踪他们的加载时间，然后您可以直接从他们那里获得他们对 FCP 的主观评价和您的页面加载速度。 就 FCP 的最完整视图及其对访问者的影响而言，RUM 绝对名列前茅。 然而，它也是最复杂和最难执行的。

实验室工具

用于 FCP 检测的实验室工具倾向于模仿理想的 FCP 结果。 不建议将这些实验室工具用于延迟、带宽、网络拥塞和其他障碍的真实场景，而是让您了解您的站点如何以最佳状态运行。

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

如何优化网站 FCP 分数

当然，上面的工具可以为您提供网站速度和 FCP 的概览和评分。 但它们与其他网站速度测量工具（如 GT 和 GD）一起，还可以让您深入了解如何优化 FCP 分数并使其绘制速度更快。 我们将概述一些关于如何修复首次内容绘制时间的最常见步骤，以便您知道如何解决测试和工具拍摄的任何问题。

移除渲染阻塞资源

这可能是减少 FCP 时间的第一个页面因素。 呈现阻止资源是您网站上的网页必须呈现的文件。 其中包括 HTML、字体和 CSS 文件。 使它们“呈现阻塞”的原因是它们优先于页面上的任何其他内容，在完成之前停止任何其他内容的加载过程。 任何图像、纯文本或其他面向用户的内容都将被搁置，直到重要文件完成。

此次持有导致 FCP 大幅上涨，原因有二：

通过从关键渲染路径中移除这些资源，您可以为丰富的绘画打开空间。 您可以延迟资源的加载，避免对 CSS 使用 @（使用 @media 代替条件 CSS），并确保最小化和组合您的 CSS、HTML 和文件（我们将在本文后面讨论）。

用户可以在 WP 等缓存插件中找到一些渲染阻止选项，启用这些选项也有助于减少 FCP 时间。 或参考进一步优化。

在字体加载之前和期间显示文本

您是否见过一个网站，当所有其他内容已经存在时，页面上的所有文本神奇地同时出现？

那是因为浏览器隐藏了它。 在准备好阅读之前，网站的文本内容不会加载。 文本通常只有几个字节的内容。 但在许多网站上，加载时间会呈指数级增长。 因为字体文件还没有“准备好”显示。 在 FCP 时间极快的所有方法中，绘制网站的文本内容可能是最好的。

你可以使用各种字体显示参数，你可以告诉浏览器立即使用系统字体加载站点的文本网站优化，加载后用你指定的显示字体替换。

文本内容的文件很小，通常只有几个字节，可以通过告诉浏览器立即显示它来使您的 FCP 几乎不存在。 只需将 font-:swap 添加到您拥有的任何 @font- 即可。 仅此一项就可以解决很多首次内容绘制时间问题。

极简主义的 HTML、CSS 和

缩小是指从网站的 HTML、CSS 和文件中删除无关字符（例如空格）。 虽然间距使人们更容易阅读和解析，但浏览器和服务器不需要它们。 这些空格仍然是占用字节的字符。 通过缩小 CSS 文件之类的东西，您可以减小页面大小。 这提高了页面速度并减少了 FCP 时间。

《网站CSS、HTML文件瘦身压缩教程》深入讲解如何进行极简操作。

删除未使用的 CSS

如果您的样式表中有未使用的代码，为什么要保留它？ 任何旧的或未使用的代码都应该被删除，这样它就不会在每次请求您的网站时加载。 （我们在上面链接）可以在选项卡下显示 CSS 的哪些部分正在加载但未呈现。

删除未使用的 CSS 的最佳方法是通过一般网站管理员的插件！

缩短首字节时间 (TTFB)

本质上，TTFB 是将数据的第一个字节传输到浏览器的时间。 FCP 取决于这个指标，所以它越快，你的 First Paint 就会越快。 减少 TTFB 和提高页面速度的最佳方法非常简单：

确保妥善处理这三个要素可以显着降低您的 TTFB，进而降低您的 FCP。

保持你的 DOM 尺寸小

这可能是一个噱头。 但通常，快速首次内容绘制的最大限制因素之一是大型 DOM。 你试图一次做太多。 谷歌声明“最佳 Doom 大小应该少于 32 个元素和少于 60 个子/父元素。”

我们中的许多人为了给访问者留下深刻印象而使主页和登录页面过于复杂。 但是，这些添加的元素会使 DOM 膨胀并导致更高的 FCP 时间。 你可以通过减少你使用的 CSS 选择器的数量来帮助解决这个问题，也许使用比 ID 或特殊媒体查询更多的基于类的 CSS。 伪选择器也会使事情复杂化并增加 DOM 的大小。

除此之外，您还可以减少选择器适用的元素数量。 与 10 个元素相比，为 5 个元素加载和应用样式所需的时间更少。 对于旧版和过时的浏览器尤其如此，尽管我们尽了最大努力，人们仍然每天都在使用这些浏览器。

使用 SVG 或 WebP 图片

这可能不会影响每个人的网站，这就是我们将其排在列表最后的原因。 图像通常不是第一个绘制到页面上的东西，尤其是在文本或附加框架上，但是显着减小重要/突出图像（例如您的站点徽标）的文件大小可以帮助 FCP。

虽然 .gif、.jpg 和 .png 是您最常用的图像文件，但将它们转换为 .webp 或 .svg 文件可以节省大量时间。 有时文件大小在字节范围内而不是千字节范围内，您的图像将在眨眼之间加载。 如果您是用户，版本 5.8 内置了 .webp 支持，我们之前已经写过关于使用 SVG 图像的文章。

最有可能的是，这种方法对 Paint (LCP) 的影响比 FCP 更大，但是足够小的 SVG 徽标肯定是用户首先看到的。

全方位影响网站的FCP分数。 如果您对网站速度优化着迷，我建议您阅读文章“如何获得完整的测试分数”。

FCP 常见问题解答 FCP 如何适应我网站的整体性能？

作为网站性能的直接指标网站优化，并不多。 FCP 是一个以用户为中心的感知指标，并不一定代表网站性能。 正如我们在本文前面提到的，两个网站的加载时间可能完全相同，但 FCP 时间较低的网站可能被认为更快。 这种看法即使不影响整体网站性能，也会影响用户体验。

然而，要将整体网站性能提升到一个新的水平，First Paint 是一个很好的衡量标准。 您为降低 FCP 所做的任何操作也会降低整体页面速度。 所以你几乎可以把它当作你整体表现的一个信号。

较低的 FCP 时间通常不会与较高的总体加载时间一致，因此如果您需要使用单一指标来查看您的立场，FCP 可能是一个很好的路标。 您还可以将它与 LCP 或 Max 配对，以更全面地了解用户在访问您网站的前几秒内看到的内容。

First Paint 和 First Paint 有什么区别？

尽管这两个术语有时可以互换使用，但从技术上讲，它们是两个不同的指标。 正如我们所讨论的，First Paint 是浏览器在页面上呈现第一个 DOM 元素的时候。 您可以将其视为页面上的任何可用（如果不是交互式）内容。 例如，背景图像、文本或标题菜单 div。

但是，First Paint 是浏览器呈现信息的第一个字节时，无论它是否是内容。 背景颜色的变化（不是背景图片的加载）并不令人满意。 用户不能将其作为内容消费，因此它不是 FCP 的示例。

First Paint 可以与您的 First Paint 完全相同。 但是您的 FCP 可能与您的 First Paint 不同。

概括

FCP 是您网站绝对重要的指标。 将页面速度视为页面排名最重要的方面之一。 用户将页面速度视为他们是否留在您网站上的决定因素之一。 较低的 First Paint 可让用户留在您的网站上，并帮助他们首先找到您的网站。 虽然 FCP 通常是一个难以确定和掌握的指标，但任何减少 FCP 时间的优化都将增加用户体验，并从网站的整体加载时间中节省宝贵的秒数和毫秒数。

除非注明，否则均为未来可期SEO原创文章，转载必须以链接形式标明本文链接

本文链接：https://www.szsinotech.com/seo_4676.html