首次内容绘制 (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时间通常是页面速度的良好指标，优化它的方法也会影响其他页面速度指标（例如最大内容绘制）。
如何测量FCP
尽管FCP由于用户感知而很重要，但它是一个可以衡量和评分的可量化指标。尽管如此，您可以使用这些工具来指示FCP在现场（对真实用户）与实验室（用于测试目的的模拟页面加载）的影响。
什么是好的FCP评分？
在您深入研究用于检查FCP的各种工具之前，您需要了解什么才是好的FCP分数。从Google关于确定指标分数的文档中，我们可以看到他们将FCP时间分为三类——好、需要改进和差——并讨论了他们如何实现Lighthouse工具使用的百分位评分。
- 好– 在 0 秒到 1.8 秒之间
- 需要改进– 在 1.8 秒到 3 秒之间
- 差– 超过 3 秒
下面，我们列出了各种工具，您可以使用这些工具查看您的网站属于这些类别中的哪些类别。
现场工具
现场工具是您可以用来跟踪页面对用户的显示方式的工具。真实用户。这些工具不依赖于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的概述和分数，当然。但它们——以及GT Metrix和Pingdom等其他网站测速工具——也让您深入了解如何优化FCP分数并使其绘制速度更快。我们将概述如何修复首次内容绘制时间的一些最常见步骤，以便您知道如何解决测试和工具拍摄的任何问题。
移除渲染阻塞资源
这可能是降低FCP时间的第一个页面因素。呈现阻塞资源是您的网页必须呈现的网站上的文件。其中包括HTML、JavaScript、字体和CSS 文件。使它们“呈现阻塞”的是它们优先于页面上的任何其他内容，在完成之前停止其他任何内容的加载过程。任何图像、纯文本或其他面向用户的内容都将被搁置，直到重要文件完成。
这种持有导致FCP急剧增加，原因有两个：
- 渲染阻塞文件通常很大
- 渲染阻塞文件通常不包含站点内容，只包含结构和格式
通过从关键渲染路径中移除这些资源，您可以为内容丰富的绘画开辟空间。您可以延迟资源的加载，避免对CSS使用@import（改为对条件CSS使用@media），并确保极简化和合并您的CSS、HTML和JavaScript文件（我们将在本文后面讨论）。
WordPress用户可以使用缓存插件（如WP Rocket）中找到一些渲染阻止选项，启用这些选项也有助于减少FCP时间。或者参考如何移除阻塞渲染的JavaScript和CSS进一步对WordPress进行优化。
在字体加载之前和期间显示文本
您是否见过这样的网站，当所有其他内容已经存在时，页面上的所有文本都会神奇地同时出现？
那是因为浏览器隐藏了它。网站的文本内容在准备好阅读之前不会加载。文本通常只有少量字节的内容。但是在许多站点上，加载时间可能会呈指数级增长。因为字体文件还没有“准备好”显示。在拥有极快的 FCP 时间的所有方法中，绘制您网站的文本内容可能是最好的。
您可以使用各种字体显示参数，您可以告诉浏览器立即使用系统字体加载站点的文本，然后在加载后将其替换为您指定的显示字体。
文本内容的文件大小很小，通常只有几个字节，并且通过告诉浏览器立即显示它有可能使您的FCP几乎不存在。只需将font-display:swap添加 到您拥有的任何@font-face CSS。仅此一项就可以解决很多首次内容绘制时间问题。
极简化HTML、CSS和 avaScript
极简化是从您网站的HTML、CSS和JavaScript文件中去除无关的字符（例如空格）。虽然间距使人类更容易阅读和解析，但浏览器和服务器不需要它们。这些空格仍然是占用字节的字符。通过缩小 CSS 文件之类的内容，您可以减小页面大小。这提高了页面速度并缩短了 FCP 的时间。
“WordPress网站CSS、JavaScript和HTML文件瘦身压缩教程”深入讲解如何进行执行极简化操作。
移除未使用的CSS
如果您的样式表中有未被使用的代码，那么为什么要保留它呢？应删除任何旧的或未使用的代码，以免每次请求您的网站时都加载它。Chrome DevTools（我们在上面链接到）可以在Coverage选项卡下向 您显示CSS的哪些部分正在加载但未呈现。
移除WordPress未使用的CSS，对于一般站长来说，最好的方式是通过插件来实现！
减少首字节时间 (TTFB)
本质上，TTFB 是将数据的第一个字节传输到浏览器的时间。FCP取决于这个指标，所以它越快，你的First Contentful Paint就越快。减少TTFB和加快页面速度的最佳方法非常简单：
- 使用优质服务器主机
- 通过CDN交付内容
- 启用浏览器缓存（使用WP Rocket等插件）
确保这三个元素得到充分照顾可以显着降低TTFB，进而降低您的FCP。
保持你的DOM尺寸小
这可能是一个噱头。但通常情况下，快速进行首次内容绘制的最大限制因素之一是DOM过大。你试图立即做太多事情。谷歌表示“最佳Doom规模应小于32个元素和少于60个子/父元素。”
为了给访问者留下深刻印象，我们中的许多人将主页和登录页面过度复杂化。但是，这些添加的元素会使DOM膨胀并导致更高的FCP时间。您可以通过减少使用的CSS选择器的数量来帮助实现这一点，也许使用比ID或特殊媒体查询更多的基于类的CSS。伪选择器也会使事情复杂化并增加DOM的大小。
除此之外，您还可以减少选择器适用的元素数量。加载和应用样式5元素所需的时间比10元素少。对于较旧和过时的浏览器尤其如此，尽管我们尽了最大努力，人们仍然每天都在使用。
使用SVG或WebP图像
这可能不会影响每个人的网站，这就是为什么我们将其最后列入列表的原因。图像通常不是首先绘制到页面上的东西，尤其是在文本或附加框架上，但显着降低重要/突出图像（例如您的站点徽标）的文件大小可能有助于FCP。
虽然.gif、.jpg和 .png是您使用的最常见的图像文件，但如果将它们转换为.webp或.svg文件，您将节省大量时间。有时文件大小在 字节范围内而不是 千字节，您的图像将在眨眼间加载。如果您是 WordPress 用户，5.8版内置了.webp支持，此前我们也撰写过关于WordPress使用SVG图像的文章。
最有可能的是，与FCP相比，这种方法对您的最大内容绘制 (LCP) 的影响更大，但足够小的SVG徽标肯定会成为您的用户首先看到的东西。
影响网站FCP分数是方方面面的，如果你着迷于WordPress网站速度优化，建议你阅读“如何做到Google PageSpeed Insights测试满分”一文。
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时间的优化都会增加用户体验，并减少网站整体加载时间的宝贵秒数和毫秒数。
原文地址：https://www.wbolt.com/fcp-first-contentful-paint.html
