在 WordPress 中改进 FCP 的 8 种可行方法

本文将介绍几种简单的方法，您可以在 WordPress 中改进 FCP 或 First Contentful Paint。 通过改进此性能指标，您的 WordPress 网站将拥有更好的用户体验，在 Google 上的排名更高，并且加载速度明显更快。 首先，让我们快速了解一下 FCP 是什么，然后讨论几种在 WordPress 网站上改进该指标的简单方法。

什么是 FCP？

FCP，也称为 First Contentful Paint，是通过 Chrome 用户体验报告从真实用户那里收集的统计数据。 这是真实世界用户体验的更现实的衡量标准之一。 它旨在衡量个人访问者和用户如何看待网站的性能。 这也是谷歌将开始在其网站愉悦活动中使用的众多速度统计数据之一，旨在为消费者在所有网站上提供更好的用户体验。

First Contentful Paint 是为最终用户呈现视觉内容的第一个实例。 在此示例中，FCP 出现在第二帧中，它是为用户呈现的第一个内容元素。 拥有更快的 FCP 可确保用户在所有内容加载之前都留在您的网站上，因为此内容加载的感知时间要快得多。

正如我们在详尽说明 FCP 和 LCP 是什么的文章中所述，您应该了解这会根据网站和特定页面而变化。 因此，您的 FCP 可以是一页上的一件事，另一页上的另一件事。 这给优化过程增加了一点复杂性，但是只要您了解 FCP 是什么并按照本文中讨论的方法进行操作，就可以开始了。

请记住，Google 将于 2021 年 3 月开始将这些指标用作重要的排名指标，因此在此之前弄清楚您的 First Contentful Paint 符合您的最大利益。

测试和理解第一个内容油漆

了解和测试您的 First Contentful Paint 指标非常容易。 您只需要使用 Google pagespeed 工具即可。 只需输入您的 URL，第一个指标就会在几秒钟内告诉您网站加载的速度。

关于 FCP 在 1 秒内加载的网站被归类为快速，在 3 秒内 FCP 加载的网站被称为中等，而具有 3 秒或更长时间的 First Contentful Paint 的网站被称为慢。 正如你所看到的，这里没有太多的回旋余地，你肯定需要一个速度快于 3 秒的 FCP 才能在 Google 上获得良好的排名。

好消息是，在 WordPress 上改进您的 First Contentful Paint 有几种可行的方法，可以立即和持久地进行改进。 这些解决方案中的大多数都涉及为您自动执行优化过程的插件，从而使 WordPress 上的 FCP 优化变得更加容易。

因此，在介绍完 FCP 之后，让我们了解如何改进这个指标。 即使您拥有良好的 FCP，即使提高几毫秒也可以提高您的用户体验，并直接导致 WordPress 网站上的转化次数增加和跳出率降低。

专注于第一个字节的时间

要减少 FCP 时间并提高此分数，您可以做的第一件也是最可行的事情是专注于您的 Time To First Byte。 许多网站的 TTFB 非常慢，或者说浏览器接收第一口网页内容所花费的时间。 TTFB 是获取 HTTP 请求、处理该请求以及 HTTP 请求本身的响应时间所花费的时间的总和。

通俗地说，如果您的网站连接到服务器的时间比平均时间长，那么最终用户的内容渲染和下载速度就会变慢，从而导致 FCP 变慢。

FCP 是第一个出现的指标，因此它几乎与 TTFB 直接相关。 您可以在 WordPress 网站上提高首字节时间的两种主要方法，直接增加您的 First Contentful Paint 分数是选择快速的 WordPress 主机和使用高质量的 CDN。

如果您有一个快速的 WordPress 主机，数据发送到访问者浏览器的速度比正常速度快得多，从而增加了 TTFB。 如果您的用户从相对于服务器位置而言地理位置较远的位置加载网站，则使用具有物理上更靠近最终用户的单个节点的 CDN 将大大增加您的 TFB 并导致更好的 First Contentful Paint 分数。

在推荐好的 WordPress 主机和 CDN 时，我们总是说这应该是一个集成的解决方案。 您不应该寻找单独的 CDN 和单独的 WordPress 主机，而应该寻找在其服务中包含 CDN 的非常快速的 WordPress 主机。 这不仅可以为您节省资金，而且它的复杂性会大大降低，并且由于集成可能更快。

所以，你可以做的第一件事来改善你的 FCP 是看一个好的主机。 具有集成 CDN（Cloudflare 企业，包括自动平台优化）的最佳主机是 Rocket.net。

这是我们用来每月为近 100,000 名访问者提供博客服务的 WordPress 主机，由于它与高级 CDN 和闪电般快速的硬件以及整页缓存的集成，TTFB 非常低，这意味着我们的 FCP 不受限制。

消除渲染阻塞资源

您可以做的下一个可操作的事情是尽量减少 FCP 时间，即消除渲染阻塞资源。 渲染阻塞资源是网站的元素，通常是 CSS 和 JavaScript，它们在网页的渲染过程中被调用。

因为这些阻塞渲染过程，浏览器需要等待真正向访问者显示 DOM 元素，下载渲染阻塞资源，解析它，然后继续渲染整个页面。

如果您假设这种渲染阻塞也阻塞了 First Contentful 元素，那么这是正确的。 并且这些资源阻塞渲染过程的时间越长，渲染 First Contentful 元素所需的时间就越长，从而导致更高的 FCP 时间分数。

消除渲染阻塞资源的最佳方法是使用名为 Asset Cleanup 的第三方插件来延迟和异步加载 JavaScript 和 CSS。 您甚至可以禁用网页上不使用的各种脚本，从而最大限度地减少未使用的 CSS，这是我们在本文后面讨论的内容。

内联关键 CSS

此外，内联关键 CSS 允许您将主 CSS 样式表的加载推迟到渲染过程结束。 这可以通过资产清理来完成，但我们也建议结合 WP Rocket，它是一个缓存和优化插件。 它有一个自动的关键 CSS 生成器，它在移除渲染阻塞资源方面效果很好。

消除了未使用的 CSS

接下来，正如我们提到的那样，将消除未使用的 CSS。 如果您在网页上加载未使用的样式，这些可能会阻塞渲染，但它们只会使您的页面更重，从而导致传输更多数据，从而导致 FCP 变慢。

摆脱这些未使用的 CSS 样式表是最小化传输数据量的好方法，为在您的网站上绘制关键的 First Contentful 元素扫清了道路。 这以有益的方式直接影响 FC 分数。

为此，没有自动化软件，但有一个插件可以帮助您从单个页面和页面范围中删除 CSS。 这就是我们上面提到的资产清理，它允许您打开和关闭样式和脚本。

然后，您可以测试您网站的前端，看看是否有任何问题，如果没有，您已经删除了未使用的 CSS，从而加快了网站的加载速度，并获得了更好的 FCP 分数。

删除首屏的脚本元素（如 JS 广告）

就您网站的实际构成而言，删除首屏基于脚本的元素是改进 WordPress 网站的首次内容绘制的可靠方法。 JavaScript 可以尽可能地优化，但是由于它的结构，它的渲染总是比直接的 HTML 和内联关键 CSS 慢。

因此，如果您有任何被视为网页的第一个内容绘制的 JavaScript（基本上位于首屏或加载给访问者的初始视口中的任何内容），您肯定希望摆脱它并替换它使用纯 HTML。

这通常是使用基于 JavaScript 的广告加载在首屏的内容网站的问题。 这些脚本也可能对您的累积布局转变产生重大负面影响。

由于 HTML 和 CSS 技术的本质，通过用更快的加载 HTML 替换它们，您将大大改进 First Contentful Paint。

禁用折叠上方的延迟加载（疯狂，我知道）

继续清除任何基于 JavaScript 的元素，如果您延迟加载显示在首屏上方的任何图像，您将需要实际禁用此功能。

延迟加载图像是提高 WordPress 网站性能的好方法，但它们实际上对 First Contentful Paint 有负面影响，因为它们利用 JavaScript 库来启用该功能。

因此，请禁用在首屏加载的图像的延迟加载，但要确保它们得到适当的优化。 这将包括将它们转换为 WebP 格式（使用 ShortPixel），以及将它们完全压缩到尽可能小，同时保持清晰度。

内联图像（SVG 或 Base64）

如果您想更疯狂地优化图像，对于没有主要分辨率要求的较小图像，您可以继续并内联它们。 如果您有一个特定的徽标或更小的图像加载到首屏，这很好。 通过将它们转换为 SVG 或 base 64 格式，您可以内联图像，减少下载它们的额外 HTTP 请求，从而改进您的 FCP。

请记住，此建议可能仅对特定用例有用，并且如果您有基于 HTTP2 的服务器，或者您尝试排列的图像非常重，最好保持原样。

但是，利用 SVG 和 base 64 徽标、搜索图标、社交媒体图标和背景，可能对您的 First Contentful Paint、提高您的 WordPress 网站在 Google 上的得分以及您的排名和用户体验有益。

关注 DOM 大小

您可以做的最后一件主要事情是关注您的 DOM 大小。 DOM 或文档对象模型是一种树状结构，本质上是指页面上的每个元素。

因此，正文中的任何 div、span 包装器、段落、标题、金属链接等都将被视为 DOM 元素。 页面上的元素越多，渲染时间越长，First Contentful Paint 的速度就越慢。

因此，通过减少 DOM 元素的数量，您将拥有一个更快的网站加载速度。 这可以通过使用放置在其中的任何元素来完全重建尽可能精简的页面，或者通过使用新的主题或页面构建器来完成。

例如，Elementor 将其元素包装在数十个不必要的 div 中，因此切换到具有较低代码膨胀的页面构建器可以最大限度地减少页面上 DOM 元素的数量，从而减少数据传输，从而加快渲染时间，从而在 Google 上获得更好的 First Contentful Paint 分数。

结论

因为 First Contentful Paint 源自您在 WordPress 网站上的真实用户体验，所以您不能用性能不佳的资产滑冰。 相反，您需要解决您的第一个问题并正面处理油漆分数，将这六种方法纳入您的优化中，从而获得更好的用户体验、更高的排名位置和更低的跳出率。

您可以使用许多其他方法来提高 WordPress 网站的整体性能，这也将有利于您的 First Contentful Paint，但是这六种方法是在 WordPress 网站上增加您的第一次寺庙绘画的最佳方法。 如果您有任何其他优化建议，请随时将它们留在下面的评论部分。