FCP 的评分等级

在深入了解用于检查FCP的各种工具之前，我们需要知道什么是一个良好的FCP得分。根据Google关于确定指标得分的文档，我们可以看到他们将FCP时间分为三个类别：

以上表格显示了FCP时间按照良好、需要改进和较差三个类别进行划分的时间范围。

• 在0秒至1.8秒之间的FCP时间被认为是良好的
• 1.8秒至3秒之间的FCP时间需要改进
• 而超过3秒的FCP时间被认为是较差的

工欲善其事，必先利其器,下面我们就安装环境的不同，列举几个比较常用的工具。大家，业务中有匹配的，可以择优选择。

测试真实环境的工具

这些工具又被称为Field tools。它们是你可以用来跟踪页面在用户眼中的显示情况的工具。这些工具不依赖于网站的API。

它们直接针对你的服务器实时运行，以便你尽可能获得最准确和最新的信息。

在介绍FCP的Google文档中列举了几个比较好用的Field 工具：

• PageSpeed Insights
• Chrome User Experience Report
• Search Console (Speed Report)
• Web Vitals JavaScript library

测试模拟用户操作的工具

这些工具又被称为Lab tools,它们用于检查FCP的目的是模拟在理想情况下的FCP结果。与发生延迟、带宽、网络拥塞和其他阻碍的真实情况不同，Google推荐的这些Lab工具可以展示在最佳运行情况下我们的网站可能达到的状态。

• Lighthouse
• Chrome DevTools
• PageSpeed Insights

此外，当正在开发尚未投入生产的网站时，无法在真实世界条件下进行测试。使用实验室工具还可以帮助我们在项目在开发周期中逐步推进时创建基准和里程碑。

如何优化 FCP

上述工具可以为我们提供网站速度和FCP得分的概述和评分。但是它们（以及其他工具如GTmetrix）还可以为我们提供优化FCP得分并使其更快绘制的建议。

移除渲染阻塞资源

这可能是降低FCP时间的最重要的页面因素之一。渲染阻塞资源是网站上必须加载的文件，包括HTML、JavaScript、字体和CSS文件。它们被称为“渲染阻塞”，是因为它们优先于页面上的其他内容，会阻止其他内容的加载，直到它们完成加载或执行。

任何图像、纯文本或其他面向用户的内容都会被暂停加载，直到这些关键文件完成加载。

这种暂停加载导致FCP显著增加，原因有两点：

1. 渲染阻塞文件通常具有较大的文件大小。
2. 渲染阻塞文件通常不包含网站内容，只包含结构和格式。

通过从关键渲染路径中移除这些资源，可以为内容的绘制腾出空间。我们可以延迟加载这些资源，避免使用@import加载CSS（而是使用@media加载条件性CSS），确保对CSS、HTML和JavaScript文件进行压缩和合并（关于资源压缩，我们后面会讲到）。

在字体加载前和加载过程中显示文本

在某些情况下，当网站的其他内容（如图像、样式和脚本）已经加载完成时，页面上的所有文本会突然一下子全部显示出来。这种情况通常发生在字体加载较慢或延迟的情况下。

当网站使用自定义字体（如Web字体）时，浏览器需要下载并加载字体文件，然后再将其应用于页面上的文本元素。如果字体加载过程较慢，浏览器会先显示默认字体，然后在字体加载完成后再切换为自定义字体。这种切换可能会导致页面上的文本突然全部显示出来，给用户一种突兀的感觉。

那是因为浏览器将其隐藏起来了。网站的文本内容在准备好可阅读时才加载。文本通常只占用几个字节的内容。但在许多网站上，它的加载时间可能会呈指数级增长。这是因为字体文件还没有准备好用于显示。在所有能够实现极快的FCP时间的方法中，使网站的文本内容显示出来可能是最好的方式。

我们可以使用不同的font-display参数，告诉浏览器立即使用系统字体加载我们网站的文本内容，然后在加载完成后将其替换为我们指定的显示字体。

文本内容的文件大小很小，通常只有几个字节，通过告诉浏览器立即显示文本内容，可以使我们的FCP几乎不存在。只需在我们的指定@font-face的 CSS中添加font-display:swap即可。

压缩 HTML/CSS/JavaScript

压缩是指从网站的HTML、CSS和JavaScript文件中删除冗余字符（如空格）。

虽然空格使人类更容易阅读和解析，但浏览器和服务器并不需要它们。这些空格仍然是占用字节的字符。通过压缩诸如CSS文件之类的内容，您可以减小页面大小，从而提高页面速度并改善FCP时间。

常规压缩方式

由于，现在网页的组织形式以SPA居多，那就绕不开构建工具，所以我们简单的列出webpack/vite如何压缩html/css/js。这里不做深究。

上面的各种插件，只是一个举例，可能不全或者有更好的方式。这里不做更多的分析和说明。

利用Coverage 移除无用的JS/CSS

在利用构建工具，将分散四处的资源打包到一起，一定程度下，减少了代码组织的问题，但是又出现了另外一个比较棘手的问题。在页面加载中，有时候加载的资源远远多于，我们想要的。

尤其，像CSS/JS这种渲染阻塞资源，同时它的加载优先级又很高。在页面渲染中，无疑会增加渲染时间。

所以，我们应该删除任何旧的或未使用的代码，以使其在每次请求您的网站时不被加载。Chrome DevTools可以在“Coverage”选项卡下显示我们的CSS中正在加载但未使用的部分。

减少 TTFB

TTFB（Time To First Byte）是指从发起网络请求到接收到第一个字节的时间。

它是衡量网络性能的重要指标之一，特别是对于网页加载速度的评估。TTFB反映了与服务器建立连接、发送请求、服务器处理请求并返回响应的时间。

TTFB包括了多个步骤的时间消耗，例如 DNS解析时间、建立连接时间、发送请求时间以及服务器处理时间。这些步骤的延迟可能受到网络延迟、服务器响应速度、服务器负载等因素的影响。

较短的TTFB意味着与服务器的通信速度较快，用户能够更快地接收到页面的首个字节，并且网页加载速度可能更快。FCP依赖于这个指标，因此它的速度越快，FCP就越快。相反，较长的TTFB可能导致用户等待时间增加，网页加载速度变慢。

优化TTFB

要减少TTFB可以采取以下方式：

通过上述处理，TTFB少了，进而FCP也少了。

尽量保持DOM的简洁

这可能是一个很简单的问题。但是，拥有过大的DOM往往是导致快速FCP的最大限制因素之一。我们总是试图一劳永逸完成过多的工作。

谷歌文档表示，“页面中DOM树深度<32个元素，每个父元素的子元素少于60个是最理想的页面组织结构”。

许多人为了给访问者留下深刻印象而过分复杂化他们的首页。然而，这些额外的元素会膨胀DOM并导致更长的FCP时间。

我们可以通过减少使用的CSS选择器的数量来解决这个问题，尽可能更多地使用基于类的CSS而不是ID或特殊的媒体查询。伪选择器也会复杂化问题并增加DOM的大小。

此外，可以减少选择器应用于的元素数量。加载和应用样式到5个元素比加载和应用样式到10个元素需要更少的时间。

优先使用SVG 或者 WebP

这一点可能不会影响每个网站，这也是为什么我们将它放在列表的最后。图像通常不是首先绘制在页面上的内容，但是将比较重要或者醒目的图像进行格式替换（例如网站的logo）可能有助于改善FCP。

虽然.gif、.jpg和.png是常用的图像文件格式，但如果将它们替换为.webp或.svg文件，将节省大量时间。由于文件大小通常只有几个字节而不是几千字节，我们的图像将会在瞬间加载。

FCP的FQA

FCP与网站整体性能相关性？

作为直接衡量网站性能的指标，FCP的作用并不大。FCP是一个以用户为中心的感知指标，并不一定能反映网站性能。正如我们在文章前面提到的，两个网站可能具有相同的加载时间，但FCP时间较短的网站可能被认为加载更快。这种感知可能会影响用户体验，但并不一定反映整体网站性能。

然而，FCP是一个非常好的指标，可以提高整体网站性能水平。我们采取的任何降低FCP的措施也将降低整体页面速度。因此，几乎可以将其视为整体性能的信号。

FP和FCP之间有什么区别？

虽然这两个术语有时可能被交替使用，但从技术上讲，它们是两个不同的指标。正如我们讨论过的，FCP是指浏览器在页面上呈现第一个DOM元素的时刻。我们可以将其理解为页面上的任何可用（即使不能交互）内容，例如背景图，文本或页眉菜单区域。

而首次绘制（First Paint）是指浏览器呈现的第一个字节的信息，无论它是否具有内容。例如，背景颜色的更改（而不是背景图像的加载）并不具有内容。用户无法将其作为内容进行消费。

FP可能与FCP完全相同，也可能完全不同。

后记

分享是一种态度。

参考资料：

1. FCP
2. font-display
3. GTmetrix
4. Coverage
5. fcp-first-contentful-paint

全文完，既然看到这里了，如果觉得不错，随手点个赞和“在看”吧。