首次内容绘制 (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绝对是榜首。然而，它也是最复杂和最难进行的。 实验室工具 […]
