GoogleCoreWebVitals中的首次内容绘制(FCP)教程

GoogleCoreWebVitals中的首次内容绘制(FCP)教程

　　首次内容呈现 (FCP) 是 Google Core Web Vitals 中最有意义的指标之一。与其他绘图和加载指标相比，FCP 不是关于响应时间的纯技术指标。 FCP 以用户体验和他们在网站 上第一次感知的内容为中心，而不是后台加载的内容。通过优化您的网站 First Contentful Paint，您不仅可以加快整体加载时间并提高页面速度评级，还可以从字面上向访问者表明他们的请求正在处理中并且加载并未停止。

　　在本教程中，我们将深入研究什么是 First Contentful Paint，如何衡量和优化它，并回答一些关于 FCP 的常见问题，以便您确保您的 网站 尽可能高效和可用。

　　什么是首次内容渲染 (FCP)？

　　网站 的第一次内容绘制是浏览器在您的页面上呈现第一个 DOM 元素的时间。这包括图像、画布元素（非白色）或文本。通俗地说，FCP 意味着用户可以看到页面某些部分的变化。通常，这显示为标题栏或背景图像。此元素可能不是从服务器呈现或加载的第一个元素，但它是用户可以看到的第一个元素，因此它对您的 网站 UX 至关重要。

　　iframe 中收录的任何网站 都不会被 FCP 考虑。它不是非内容绘画，例如背景颜色的变化。那是 First Paint，而不是 FirstContentfulPaint。

　　FCP 是一个有趣的指标。虽然可以定量衡量，但也比较主观。快速的第一次内容绘制很重要，因为它会让用户觉得你的 网站 加载速度很快。不管是真是假。您网站的首次交互延迟（用户可以与网站进行交互的时间）可能比您的竞争对手长得多，但因为您的 FCP 更快，所以在用户眼中可能更快。

　　换句话说，FCP 并不是要欺骗您的用户。较低的 FCP 时间通常是页面速度的一个很好的指标，优化它的方法也会影响其他页面速度指标（如最大内容绘制）。

　　如何衡量 FCP

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

　　什么是好的 FCP 分数？

　　在深入研究用于检查 FCP 的各种工具之前，您需要了解什么才是好的 FCP 分数。从 Google 关于确定索引分数的文档中，我们可以看到他们将 FCP 时间分为三类 - 好、需要改进和差 - 并讨论他们如何实现 Lighthouse 工具使用的百分位分数。

　　下面，我们列出了各种工具，您可以使用这些工具查看您的网站 属于这些类别中的哪一个。

　　现场工具

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

　　Google 上的 FCP 文档表明这些是确定 FCP 的最佳现场工具：

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

　　实验室工具

　　用于 FCP 测试的实验室工具倾向于在理想条件下模拟 FCP 的结果。谷歌推荐的这些实验室工具，并不是针对实际情况下的延迟、带宽、网络拥塞等障碍，而是让你在最佳运行时了解你的网站性能。

　　另外，你在开发网站还没有投产的时候，是无法在实际条件下测试的。使用实验室工具还可以帮助您在整个项目的开发周期中创建基准和里程碑。

　　如何优化网站FCP 分数

　　以上工具当然可以给你一个网站speed和FCP的概述和评分。但它们——以及其他网站speed 测量工具，如 GT Metrix 和 Pingdom——也让您深入了解如何优化 FCP 分数并使它们绘制得更快。我们将概述一些关于如何修复第一次内容绘制时间的最常见步骤，以便您了解如何解决测试和工具拍摄方面的任何问题。

　　移除渲染阻塞资源

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

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

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

　　WordPress 用户可以使用缓存插件（例如 WP Rocket）来查找一些渲染阻塞选项。启用这些选项还有助于减少 FCP 时间。或者参考WordPress的进一步优化。

　　在字体加载之前和期间显示文本

　　你有没有见过网站这样的，当所有其他内容都已经存在时，页面上的所有文字都会神奇地同时出现？

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

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

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

　　极度简化的 HTML、CSS 和 avaScript

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

　　《WordPress网站CSS、JavaScript 和 HTML 文件瘦身压缩教程》深入讲解了如何执行极其简化的操作。

　　删除未使用的 CSS

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

　　删除 WordPress 未使用的 CSS。对于一般站长来说，最好的办法就是通过插件实现！

　　减少到第一个字节的时间（TTFB）

　　本质上，TTFB 是将数据的第一个字节传输到浏览器的时间。 FCP 取决于这个指标，所以它越快，你的第一次内容绘制就会越快。减少TTFB和加速页面的最好方法很简单：

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

　　保持较小的 DOM 大小

　　这可能是个噱头。但是在正常情况下，快速第一次绘制内容的最大限制因素之一是 DOM 太大。你试图一次做太多的事情。 Google 表示“最佳的 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网站speed优化很着迷，建议你阅读文章《如何在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 是您网站 的绝对重要指标。谷歌将页面速度视为页面排名最重要的方面之一。用户将页面速度视为他们是否留在您的 网站 上的决定因素之一。拥有较低的 First Contentful Paint 允许用户留在您的 网站 上并帮助他们首先找到您的 网站。尽管 FCP 通常是一个难以确定和掌握的指标，但任何减少 FCP 时间的优化都会增加用户体验并减少网站 整体加载时间的宝贵秒数和毫秒数。