什么是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 秒）。此时页面的 “主要” 内容可见。

FCP 和 LCP 时间的差异

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

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

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

谷歌的 FCP 时间指南

在您深入研究用于检查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（分析）” 按钮。

稍等片刻，您就会看到结果。

如果您的网站有足够的流量被纳入 Chrome 浏览器用户体验报告，您将看到两个不同的 FCP 时间：

• “发现真实用户的体验”部分中的时间是网站真实访问者的平均 FCP 时间。
• “诊断性能问题” 部分中的时间基于模拟测试。您可以在数字下方的灰色框中看到模拟测试的条件。

您还可以使用顶部的选项卡在移动和桌面结果之间进行切换。

谷歌 PageSpeed Insights 工具中的 FCP 时间

要测试网站上的其他页面，可以重复同样的过程。

页面不同，FCP 时间也会不同，因此我们建议测试多个页面，以便对网站性能有一个良好的感觉。

例如，您可以测试主页、博客列表页、单篇博客文章等。同样，确保同时查看移动和桌面数据。

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

测量 FCP 时间的其他方法

PageSpeed Insights 提供了一种最简单的方法来查看网站的真实和模拟 FCP 时间，但您也可以使用其他性能测试工具来补充或替代 PageSpeed Insights。

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

对于使用工具对网站速度进行测试时，我们应该根据实际情况选择现场工具，还是实验室工具。

现场工具

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

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

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

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

实验室工具

用于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. 避免重定向（尤其是多重重定向）

1. 使用更快的主机

说到 FCP，有一个无法回避的事实：

如果您网站的底层主机速度慢，即使您的网站经过完美优化，您的 FCP 仍然会很慢。

实施本列表中的其他提示会使您网站的 FCP 更好，但您网站的性能始终会受到主机质量的制约。

因此，您可以先实施本列表中的其他提示。但如果您在采取了其他一切措施后，仍在为 FCP 速度慢而苦恼，那么您可能只需要换一个速度更快的主机了。

2. 使用页面缓存（最好是在服务器级别）

如果您使用 WordPress 建立网站，那么它需要为每一位访问者动态处理服务器端代码（默认情况下）。

当访问者访问您的网页时，您的主机服务器需要执行 WordPress 的 PHP 并查询您网站的数据库，以便生成完整的 HTML 文档并传送到用户的浏览器。

这需要时间，尤其是在低功率主机上，这会对网站的 FCP 时间产生很大影响。

通过页面缓存，您可以 “缓存” 每个页面的 HTML 成品。每次访问时，您的服务器无需处理服务器端代码，而是会立即响应缓存中的 HTML 完成版。

服务器级别的页面缓存是在服务器上配置缓存，而不依赖于WordPress插件。这通常可以通过使用Nginx或Apache的缓存模块来实现更高效的缓存。以下是如何为WordPress网站实现服务器级缓存策略的一些基本步骤。

使用 Nginx 的 FastCGI 缓存

1. 安装和配置 Nginx：确保 Nginx 已安装，并在 WordPress 网站的配置文件中启用 FastCGI 缓存。通常这些配置文件位置在 /etc/nginx/sites-available/  目录。

2. 配置缓存路径和参数：在 Nginx 配置文件中，你需要指定缓存的路径和一些缓存行为参数。以下是配置 FastCGI 缓存的示例：

fastcgi_cache_path /etc/nginx/cache levels=1:2 keys_zone=WORDPRESS:100m inactive=60m;
fastcgi_cache_key "\$scheme\$request_method\$host\$request_uri";

server {
    # ... 其他配置 ...

    location ~ \.php\$ {
        # ... 其他配置 ...

        fastcgi_cache WORDPRESS;
        fastcgi_cache_valid 200 60m;
    }

    location ~ /purge(/.*) {
        fastcgi_cache_purge WORDPRESS "\$scheme\$request_method\$host\$1";
    }
}

这将定义 FastCGI 缓存的位置、大小、何时视为失效以及缓存键的配置。

3. 设置清除缓存逻辑（可选）：你可能还会想要配置一个机制来手动或自动清除缓存。在 Nginx 中，你可以使用 fastcgi_cache_purge 指令（需要额外的 Nginx 模块）。

使用 Apache 的 mod_cache 模块

若你使用的是 Apache 服务器，可以使用 mod_cache  和  mod_cache_disk 。

1. 启用 Apache 缓存模块：确保 mod_cache 和  mod_cache_disk 已安装并启用。

2. 配置缓存设置：在 Apache 的配置文件中，通常是 .htaccess  或 /etc/apache2/sites-available/  目录下的虚拟主机文件，添加如下配置：

<IfModule mod_cache.c>
    CacheEnable disk /
    CacheRoot /var/cache/apache2/mod_cache_disk
    CacheDefaultExpire 600
    CacheMaxExpire 86400
    CacheLastModifiedFactor 0.5
</IfModule>

上述指令设置了缓存的目录、默认过期时间、最大过期时间和 Last-Modified 头信息占缓存时间的系数。

3. 清除缓存逻辑（可选）：同Nginx一样，你可能还需要配置一个手动或自动清除缓存的机制，这通常需要一些服务器端脚本来完成。

不论使用哪种服务器软件，建议同时托管静态文件（如图片、CSS 和 JavaScript）通过 CDN，并启用浏览器缓存，以进一步提升网站加载速度。

注意：服务器缓存配置非常依赖于你的服务器设置和具体需求，上述指令仅供参考。在正式环境中进行此类修改之前，务必进行备份，并在测试环境中进行测试，确保配置正确，不会影响网站功能。如果对服务器不熟悉，建议由有经验的系统管理员或专业人士操作。

如果您对服务器配置优化感到困难，可以查看您的主机是否具有服务器级缓存功能，或者使用众多 WordPress 缓存插件之一，如 WP Rocket 和 FlyingPress。

3. 实施内容交付网络（CDN）

内容交付网络（CDN）是一个由服务器组成的全球网络，用于存储网站部分或全部内容/文件的副本。

当访问者访问您的网站时，CDN 会自动从距离访问者最近的位置提供网站文件。

Cloudflare 拥有由 300 多个地点组成的庞大全球网络。

由于物理距离对加载时间仍有影响（我们还没有超越光速！），访问者的浏览器将更快地接收到网站文件，从而缩短 FCP 时间。

如果您的网站面向的是国内访客，可以使用阿里云、腾讯云、百度云、华为云、七牛云、又拍云等提供商的 CDN 服务；面向国外或者全球用户，则可以使用 Cloudflare、Amazon CloudFront、Fastly 等提供商自行实施 CDN。

4. 使用速度更快的 DNS 提供商

在用户的浏览器连接到网站服务器之前，首先需要使用域名系统（DNS）找到与网站域名相关的实际网络服务器。

您配置域名时使用的 DNS 提供商会影响这一过程所需的时间，从而影响网站的 FCP。

例如，根据 DNSPerf 的数据，速度最快的提供商和速度最慢的提供商之间的差距超过 130 毫秒，这是一个相当大的差距。

如果您使用阿里云托管域名，可以使用阿里云的云解析 DNS 个人版或者企业标准版；腾讯云，则可以考虑他们 DNSpod 的专业版或者企业版 DNS 云解析。

海外服务器，可以优先考虑亚马逊或者 Cloudflare 提供的 DNS 解析服务。

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

• 使用优质服务器主机
• 通过CDN交付内容
• 使用速度更快的DNS
• 启用浏览器缓存（使用WP Rocket等插件）

确保这三个元素得到充分照顾可以显着降低TTFB，进而降低您的FCP。

5. 优化网站的 CSS

现在，您已经解决了服务器响应时间问题，是时候开始优化网站代码了，从 CSS 开始。

CSS 控制页面元素的设计和样式。虽然 CSS 是任何网站都不可或缺的一部分，但如果 CSS 的加载方式未经优化，和/或在不需要 CSS 的页面上加载了不必要的 CSS，则可能会拖慢 FCP 的运行速度。

我们有一整篇文章介绍如何优化 CSS，下面让我们来看看加速 FCP 的最重要策略。

删除未使用的 CSS

首先，您需要删除页面中不需要的 CSS。

其中一种方法是手动方法。PurifyCSS 等工具可以扫描页面中未使用的 CSS，然后手动删除这些代码。PageSpeed Insights 也会在其诊断中的 “减少未使用的 CSS “部分标记出未使用的 CSS。

不过，如果你使用的是 WordPress，有一些有用的插件可以帮你自动完成整个过程，这就方便多了（尤其是对于非开发人员来说）。WP Rocket、FlyingPress 和 Perfmatters 都是不错的选择。

所有这些插件都是高级工具。不过，我们认为它们值得投资，因为它们还能帮你实现本列表中的许多其他提示。

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

移除WordPress未使用的CSS，对于一般站长来说，最好的方式是通过插件来实现！

如何在 WP Rocket 中移除未使用的 CSS。

内联关键 CSS 并延迟非关键 CSS

默认情况下，您的网站可能会等到加载完所有 CSS 代码后才开始渲染页面上方的内容。不过，从用户体验的角度来看，这并不是最佳的做法，因为您只需要页面上方内容所需的 CSS，其他的都可以稍后再用。

页面上部内容的 CSS 被称为关键 CSS。

为了加快页面的 FCP 和其他性能指标，可以直接将关键 CSS 放在页面的 <head> 部分（又称内联），而不是作为外部样式表的一部分加载。

对于更高级的用户，你可以使用类似这样的工具手动生成页面的关键 CSS。

同样，在 WordPress 上，您可以使用 FlyingPress 或 WP Rocket 为网站上的每个页面自动生成关键 CSS。

一旦在页面上内联了关键 CSS，就可以安全地推迟加载页面的其他 CSS，直到页面加载过程的稍后阶段（页面首屏已经渲染完毕之后）。

作为关键 CSS 功能的一部分，WP Rocket 和 FlyingPress 都会自动为您完成这项工作，这也是考虑使用它们的另一个原因。

如何在 FlyingPress 中内联关键 CSS。

最小化 CSS 代码

最后，另一种提高网站 CSS 代码性能的方法是将其最小化。在对 CSS 代码进行最小化时，可以删除不必要的字符和空格，从而节省更多的空间。

WP Rocket 和 FlyingPress 等插件可以帮你做到这一点。您还可以找到专门的最小化插件，如 Fast Velocity Minify。

6. 优化网站的 JavaScript

除 CSS 外，网站的 JavaScript 也是您需要花时间优化网站代码的另一个领域。

与 CSS 一样，您可以采用几种不同的策略来减少 JavaScript 对网站 FCP 时间的影响。

不要在页面首屏使用依赖 JavaScript 的元素

如果您依赖 JavaScript 来实现页面上方的重要功能，例如网站的导航菜单（这在移动版网站中尤为常见，因为许多移动菜单都依赖 JavaScript），这会拖慢您的 FCP 时间，因为用户的浏览器在开始呈现页面之前需要加载繁重的 JavaScript。

如果您使用的是 WordPress，选择一个性能优化的主题应该可以帮助您避免这种情况，因为优秀的开发人员会避免在这些功能上依赖 JavaScript。

您还可以尽量避免在页面首屏区域使用滑块和其他 JavaScript 驱动的元素。

删除不必要的 JavaScript

虽然你要特别强调减少折叠元素中 JavaScript 的使用，但一般来说，从每个页面中删除尽可能多的不必要 JavaScript 也是一个好主意。

首先，你要删除任何对网站没有实际意义的 WordPress 插件，因为许多 WordPress 插件的功能都依赖 JavaScript。

另一种方法是使用 Asset CleanUp 或 Perfmatters 这样的脚本管理器插件来逐页禁用 JavaScript，这样就可以在不需要脚本的页面上禁用脚本，而在其他页面上仍然启用脚本。

我们还有一份技术性更强的指南，介绍如何逐页禁用插件。

消除阻塞渲染的 JavaScript（推迟或延迟）

无论如何，您可能仍然需要在页面上加载至少一些 JavaScript。为了确保这些 JavaScript 不会干扰页面上方内容的加载，您可以采用两种常见的策略：

• 推迟加载阻塞渲染的 JavaScript – 通过将 JavaScript 的加载推迟到页面渲染过程的稍后阶段，可以避免阻塞其他内容的加载。您可以使用 defer 或 async，WordPress 插件可以自动执行此过程。
• 将 JavaScript 推迟到用户交互之前 – 你可以完全等待加载网站的部分或全部 JavaScript，直到用户与页面进行交互（例如点击或滚动）。这种方法能最大限度地提高性能，但您可能需要手动排除某些脚本，以免造成问题。

您可以通过 WP Rocket 或 FlyingPress 等插件在 WordPress 上实施这两种策略。

如何使用 WP Rocket 优化 JavaScript。

我们还有关于如何延迟解析 JavaScript 以及如何消除渲染阻塞资源的指南。

关于渲染阻塞：

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

这种持有导致FCP急剧增加，原因有两个：

• 渲染阻塞文件通常很大
• 渲染阻塞文件通常不包含站点内容，只包含结构和格式

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

WordPress用户可以使用缓存插件（如WP Rocket）中找到一些渲染阻止选项，启用这些选项也有助于减少FCP时间。或者参考如何移除阻塞渲染的JavaScript和CSS进一步对WordPress进行优化。

最小化 JavaScript 代码

最后，您需要对网站剩余的 JavaScript 进行最小化处理，通过删除不必要的字符来实现一些额外的微小性能优势。

与对 CSS 进行最小化一样，大多数缓存和性能插件（包括 WP Rocket 和 FlyingPress）都可以帮您做到这一点。您也可以使用像 Fast Velocity Minify 这样有针对性的插件。

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

“WordPress网站CSS、JavaScript和HTML文件瘦身压缩教程”深入讲解如何进行执行极简化操作。

7. 禁用页面首屏图片的懒加载功能

使用图片懒加载功能，可以将网站图片的加载时间推迟到需要时（如用户向下滚动页面）。

通常情况下，如果懒加载的是页面首屏之后的图片，这对性能来说是件好事。但是，对页面首屏的图片使用懒加载实际上会对网站的 FCP 和 LCP 时间产生负面影响。

因此，你需要确保将页面首屏的图片排除在懒加载之外。

如果您使用的是 WordPress 的核心懒加载功能，WordPress 应该会自动这样做。但如果遇到问题，可以使用 wp_omit_loading_attr_threshold 函数手动调整这一行为。

如果您使用的是懒加载插件，希望该插件能提供这样的选项。例如，Perfmatters 可让您自动排除一定数量的前导图片，并在需要时手动排除特定图片。

如何在 Perfmatters 中将前导图片排除在懒加载之外。

如果您的插件不提供此功能，请考虑更换为提供此功能的插件。

温馨提示：不要忘记尽可能使用SVG或WebP图像

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

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

最有可能的是，与FCP相比，这种方法对您的最大内容绘制 (LCP) 的影响更大，但足够小的SVG徽标肯定会成为您的用户首先看到的东西。

影响网站FCP分数是方方面面的，如果你着迷于WordPress网站速度优化，建议你阅读“如何做到Google PageSpeed Insights测试满分”一文。

8. 优化字体交付

为确保文本内容在加载时可见（这会影响 FCP 的运行时间和用户体验），如果使用自定义字体（如在 Google Fonts 上找到的字体），还必须优化字体的加载方式。

为避免出现问题，您可以使用 Font-Display: Optional 或 Font-Display: Swap CSS 描述符。

使用 Font-Display: Optional：如果自定义字体加载速度不够快，您可以告诉用户浏览器使用后备字体。

如果你不想使用自己的 CSS 添加此功能，有许多 WordPress 插件可以为你优化字体加载，包括 WP Rocket、FlyingPress 和 Perfmatters。

如何通过 FlyingPress 优化字体。

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

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

您可以使用各种字体显示参数，您可以告诉浏览器立即使用系统字体加载站点的文本，然后在加载后将其替换为您指定的显示字体。

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

9. 尽量减小 DOM 大小

根据 Mozilla 的说法，文档对象模型（DOM）是 “构成网络文档结构和内容的对象的数据表示”。

虽然人类访问者不会直接与 DOM 交互，但页面的 DOM 对于帮助网络浏览器理解和显示页面内容非常重要。

一般来说，如果 DOM 较大、较复杂，FCP 的速度会比 DOM 结构较短、经过优化的 DOM 慢。

以下是一些减少网站 DOM 大小的技巧：

• 使用性能优化的 WordPress 主题 – 在 WordPress 中，主题对网站 DOM 的大小影响很大。请查看我们的数据支持文章，了解最快的 WordPress 主题和最快的 WooCommerce 主题。
• 使用分页符区块 – 您可以使用分页符区块分割长页面。
• 优化分页 – 您可以在 WordPress 中使用分页来分割列出博客文章（或其他自定义文章类型）的页面。
• 显示摘要 – 考虑在列表页面上显示摘要，而不是显示全文。
• 限制或避免使用 “臃肿” 页面构建工具 – 虽然从设计角度来看，可视化、拖放式页面构建工具确实很不错，但它们也会给 DOM 增加很多负担。从性能角度来看，使用原生编辑器会更好。你可能会发现，可视化构建器在性能上的折衷是值得的，因为它增加了设计能力，只要你执行了其他提示，这通常是没问题的。

这可能是一个噱头。但通常情况下，快速进行首次内容绘制的最大限制因素之一是DOM过大。你试图立即做太多事情。谷歌表示“最佳Doom规模应小于32个元素和少于60个子/父元素。”

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

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

10. 避免重定向（尤其是多重重定向）

重定向可让你在页面加载前将流量从一个 URL 发送到另一个 URL。例如，您可以将访问 HTTP 版本网站的用户重定向到 HTTPS 版本。

但是，由于重定向需要在用户浏览器加载页面之前完成，因此每次重定向通常都会给网站的 FCP 时间（和其他性能指标）增加数百毫秒的延迟。

以下是一些避免不必要重定向的提示：

• 如果从 HTTP 转为 HTTPS，更新硬编码 URL – 如果将网站转为 HTTPS，应实际更新网站数据库中的所有 URL 以使用 HTTPS，而不是依赖重定向。
• 将 URL 指向正确的 WWW 或非 WWW 版本 – 确保所有 URL 使用正确的版本，避免从 WWW 重定向到非 WWW（反之亦然）。
• 修复损坏的内部链接 – 更新任何损坏的内部链接，而不是依靠重定向将用户发送到正确的位置。
• 要求其他网站修复已损坏的外部链接（如果值得的话）– 如果你从第三方网站收到了大量指向已损坏链接的流量，你可以联系网站所有者，要求他们修复链接，而不是依赖重定向。

要查找重定向问题，可以使用免费的重定向检查工具。我们还有一篇关于 WordPress 重定向最佳实践的文章。

例如，在这里你可以看到，当我们输入 http://www.wordpress.org 作为 URL 时，重定向检查器检测到了多个重定向：

• 一次是从 HTTP 重定向到 HTTPS。
• 第二次从 WWW 重定向到非 WWW。

重定向检查工具检测到的多重重定向。

如果您看到类似的多重重定向，则需要进行修复。

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

FCP常见问题

FCP如何适应我网站的整体性能？

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

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

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

First Paint和First Contentful Paint有什么区别？

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

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

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

小结

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