您的网站上的首次内容绘制 (FCP) 计时是否遇到问题?
无论您不确定什么是首次内容绘制,还是正在寻找一些有关如何加快网站上首次内容绘制时间的具体提示,这篇文章都适合您。
我们将首先解释什么是首次内容绘制以及如何在您的网站上衡量它。
之后,我们将分享一系列可用于加快网站 FCP 时间的策略。为了使这篇文章尽可能易于理解,我们将尝试展示非技术工具和 WordPress 插件,帮助您将其付诸实践。
我们去那里吧!
什么是首次内容绘制 (FCP)?
First Contentful Paint,通常缩写为 FCP,是一种以用户体验为中心的性能指标,用于衡量页面第一部分在用户屏幕上可见所需的时间。
FCP 是一个重要的指标,因为它会影响感知的性能。当访问者第一次访问您的网站时,他们的浏览器将显示空白屏幕,这对访问者来说并不是一个好的体验。
一旦内容开始加载,访问者至少会感觉到“有什么事情”正在发生,并且页面的完整内容很快就会加载。因此,拥有快速的 FCP 时间可以让用户感觉您的网站很快,即使其余内容需要更长的时间来加载。
相反,缓慢的 FCP 时间会让用户感到沮丧,因为这会让他们注意到页面加载时间很长。没有什么比让访问者坐在那里盯着空白屏幕想知道您的网站是否正常运行更糟糕的了。
第一个内容绘制与最大内容绘制
最大内容绘制 (LCP)是另一个流行的以用户体验为中心的指标,其工作原理与首次内容绘制类似。
由于指标非常相似,因此很难理解首次之间的差异。
这是它们之间的基本区别:
FCP — 测量第一个对象出现所需的时间。它可以是任何东西,只要页面上出现某种类型的内容即可。
LCP — 衡量页面主要内容出现所需的时间。
由于这种差异,页面的 FCP 时间应始终至少略快于页面的 LCP 时间。根 圣诞岛公司电子邮件列表 据指标的定义,您的 LCP 时间不可能比 FCP 时间快。尽管如果要加载的“第一个”元素与“父”元素相同,那么它们在技术上可能是相同的,但这在大多数页面上不会发生。
为了说明这一点,下面是我们在 Kinsta 主页上执行的 WebPageTest 分析的可视化时间线。
FCP出现在 1.0 秒的胶片上(准确地说是 0.924 秒)。这是第一次从空白页面变成具有一些视觉内容。
LCP出现在 1.3 秒的胶片上(准确地说是 1.217 秒)。这是页面的“主要”内容可见的时候。
显示 FCP 和 LCP 时间之间差异的时间线。
FCP 和 LCP 时间之间的差异。
什么是良好的首次内容绘制时间?
Google 建议您将网站页面上的首次内容绘制时间设定为 1.8 秒或更短。
Google 将 1.8 到 3.0 秒之间的 FCP 时间归类为“需要改进”,而大于 3.0 秒的 FCP 时间则归类为“较差”。
Google 建议 FCP 时间小于 1.8 秒
FCP 时间的 Google 指南。
如何确定页面第一