如何改进 WordPress 中的 First Contentful Paint (FCP)

First Contentful Paint 简介

First Contentful Paint 是一个有用的指标，可以监控您的页面加载速度。 有多种类似的指标可以衡量网站的性能。 FCP 特别关注第一条内容出现在页面上所花费的时间。 一旦生成了 FCP，用户就知道剩下的就在路上了。

它类似于 Google 的 Core Web Vitals 中的 Largest Contentful Paint (LCP) 指标。 但是，虽然 LCP 衡量的是网站“主要”内容加载所需的时间，但 FCP 只关注第一部分内容，它可能是也可能不是主要内容。

影响您的 FCP 分数的因素有很多。 JavaScript 文件和优化不佳的 HTML 是性能低下的常见原因，因为处理它们需要大量资源。 此外，渲染阻止脚本会影响您的 FCP 分数，因为它们需要在执行任何其他操作之前进行处理。

您的 FCP 分数很重要，因为它是您整体网站速度的指标。 性能不仅对您的用户体验至关重要，而且它也是 Google 等搜索引擎在决定如何对您的网页进行排名时考虑的一个因素。 性能不佳会导致搜索排名较低。 这意味着如果您不知道如何改进 First Contentful Paint，它可能会影响您网站的知名度。

如何测量 First Contentful Paint

虽然 FCP 为您提供了一个了解用户感知的窗口，但它仍然是一个可以通过实验室测试和现场数据客观衡量的指标。 例如，PageSpeed Insights 是一种工具，可让您了解真实用户的体验（只要您的网站有足够的流量可以包含在 Chrome 用户体验报告中）。

即使您的网站没有足够的数据来查看真实的用户体验，PageSpeed Insights 仍然可以帮助您在其模拟实验室测试中收集 FCP 数据。

要使用它，只需输入您的 URL 并立即获得结果：

您还可以在移动和桌面视图之间切换，以查看您的网站在各种设备上的响应情况。

另一个测量 FCP 的有用工具是 WebPageTest，它需要更长的时间，但可以提供更深入的分析。

什么是好的 FCP 时间？

根据 Chrome，如果您的网站低于 1.8 秒，则其 FCP 分数很高。 当您的 FCP 分数超过三秒时，就会引起关注。

然而，即使您的网站目前的 FCP 分数很高，也总有改进的余地。

如何改进 WordPress 中的 First Contentful Paint（6 种技巧）

现在您对 FCP 有了更多的了解，让我们来看看如何通过六种有效的方法改进您网站上的 First Contentful Paint：

1. 使用内容分发网络 (CDN)
2. 优化和压缩图像
3. 消除渲染阻塞资源
4. 减少你的 DOM 大小
5. 改善服务器响应时间
6. 避免过多的页面重定向

1.使用内容分发网络（CDN）

内容分发网络 (CDN) 是提高整体加载时间的简单方法。 如果没有，当用户访问您的网站时，他们将需要等待必要的数据在您网站的主服务器和他们的位置之间传输。 对于地理位置远离托管服务提供商服务器的用户，这可能会导致更长的等待时间。

另一方面，CDN 提供分布在全球各地的服务器网络。 因此，内容可以从距离每个访问者物理距离最近的服务器传送。

CDN 的一个流行示例是 Cloudflare，它在全球拥有超过 275 个数据中心：

借助 Cloudflare，您可以利用其他优化技术，例如无损图像优化。

通常，CDN 还使用缓存和其他策略来改进 FCP。 例如，您的 CDN 提供商可能会提供缩小和文件压缩功能来简化您的网站。 这有助于您减少延迟、改善用户体验并减轻主服务器上的负载。

2.优化压缩图片

图片很少是您网站上加载的第一个元素。 但是，如果您经营一个媒体密集型网站，例如作品集或摄影展示，优化和压缩图像以提高您的 FCP 分数（和整体性能）就很重要。

优化图像的一种方法是切换到不同的文件格式。 例如，如果您目前依赖 JPG/JPEG 或 PNG，则可以转向压缩效果更好的格式，例如 SVG 或 WebP。

您还应该将图像调整为适合您需要的最小尺寸，并压缩它们以进一步减小尺寸。

虽然您可以使用在线工具手动完成所有这些操作，但对于 WordPress 用户来说，更简单的方法是使用图像优化插件。

例如，免费的 Optimole 插件可以自动调整大小、压缩和转换您的图像。 此外，它还可以通过其内置的 CDN 为他们提供服务，一箭双雕。

此工具还可以让您快速提供高质量的图像，无论访问者使用什么设备访问您的网站。 您可以使用延迟加载和调整图像大小等功能来进一步完善您的图像。

3.消除渲染阻塞资源

渲染阻塞资源会阻止您的内容快速加载，因为浏览器需要首先处理它们——即使它们对于加载您网站的初始内容并不重要。 因此，它们会降低您的 FCP 分数。 这可以包括 HTML 代码、CSS 样式表和 JavaScript 文件。

如果您想知道如何改进 First Contentful Paint，有几种方法可以消除渲染阻塞资源。 如果您对开发感到满意并且发现页面上未使用的代码，您可以继续删除它。 您还可以使用 <script> 和 <style> 标记识别您的关键资源并将它们“嵌入”到您的页面中。

此外，可以延迟 JavaScript，因此您的内容在等待浏览器处理这些文件时不会延迟。 另外，您可以生成关键 CSS 以在“首屏”（用户立即看到的部分）显示内容。 如果您不是开发人员，像 Jetpack 这样的工具可以帮助您进行其中的一些更改。

4. 减少你的 DOM 大小

加载网页时，您的浏览器会创建一个文档对象模型 (DOM)。 这是构成页面的所有对象的表示。

如果页面上的 DOM 节点（HTML 标记）过多，或者它们嵌套得太深，浏览器处理页面的时间就会变长。 这可能会导致加载速度变慢和 FCP 分数不佳。

因此，您可以通过减小 DOM 大小来改进 FCP。 您可以手动执行此操作，方法是删除不必要的 <div> 标记、将长页面拆分为较小的页面以及限制存档或主页上的帖子数量。

最重要的是，您可以使用像 Optimole 这样的优化插件延迟加载 HTML 元素。 延迟加载是一种延迟加载内容直到需要的技术。 浏览器可以专注于交付那些立即可见的元素，而不是一次处理所有内容。

选择一个优化的主题还可以帮助减少您的 DOM 大小，因为许多主题（和页面构建器）使用了太多的 <div> 标签。 如果您正在寻找新主题，我们建议您查看 Neve，它速度快、轻量级且仅使用高质量代码。

5. 提高服务器响应时间

服务器响应时间也称为首字节时间 (TTFB)。 该指标测量从用户发出请求到服务器发送第一个信息字节之间所花费的时间。

有很多方法可以改善您的服务器响应时间（以及您的 FCP 分数）。

首先，选择优质的托管服务提供商很重要。 最好寻找专门针对 WordPress 网站的主机，并注意其服务器的位置。 理想情况下，您的主机应该拥有靠近您的主要受众的服务器。

如果您想提高主机的性能，您可以从我们以数据为后盾的速度最快的 WordPress 主机集合中选择一个提供商。

但是，如果您的托管服务提供商不提供方便的服务器，您始终可以选择 CDN，我们之前在讨论如何改进 First Contentful Paint 时谈到了这一点。

缓存是减少响应时间的好方法。 一些主机提供内置缓存。 或者，您可以安装缓存插件，例如 WP Rocket 或 WP Fastest Cache。

6.避免过多的页面重定向

当您访问一个立即将您重定向到另一个站点的页面时，您的浏览器必须向新位置发出另一个 HTTP 请求。 这可能会导致 FCP 分数不佳，因为它会延迟网页的加载。

您页面上的重定向越多，您的 FCP 分数可能就越差。 另外，过多的页面重定向会严重破坏您的用户体验。

如果问题发生在整个站点，您可能需要研究如何管理从 www 到非 www（或相反）和/或从 HTTP 到 HTTPS 的重定向。

例如，如果您从http://www.yoursite.com重定向到http://yoursite.com然后再重定向到https://yoursite.com ，一步完成会更有效。

如果重定向仅影响单个页面上的 FCP，您可能需要查看为该页面创建的所有重定向。

您可以手动管理重定向，尽管这可能很耗时。 通常最好选择像重定向这样的 WordPress 插件：

安装后，您可以使用此工具轻松快速地管理重定向。

今天改善您网站的 FCP 时间

在复杂或内容繁多的网站上，可能很难保持快速加载时间。 幸运的是，通过定位关键指标，例如 First Contentful Paint (FCP)，您可以评估和改进访问者查看您的内容所花费的时间。

回顾一下，以下是改进 WordPress 中的 First Contentful Paint 的方法：

有关加速网站的其他一些方法，请查看我们收集的加速 WordPress 的不同方法。

您对在 WordPress 中改进 FCP 有任何疑问吗？ 在下面的评论部分让我们知道！