Google PageSpeed 抛出最大的内容绘制错误，但搜索控制台表示没问题？

Question

我的密室逃脱网站的移动版本，https://www.escapesacramento.com，在 Google 的搜索控制台 --> Core Web Vitals 上整体显示为“Good URL”，并且专门显示了主页具有 2.7s LCP。然而，当我单击提供的链接以更深入地了解 PageSpeed Insights 工具时，我看到了完全不同的事情：据说我的主页会引发 LCP 错误，因为它首先没有任何符合 LCP 资格的元素！

搜索控制台：

过去 28 天的 PageSpeed 见解：

PageSpeed Insights 性能问题：

我只以“通才小企业主”的身份熟悉网络开发/谷歌的工具——我已经涉足了一些，但一旦我们开始深入了解，我发现它真的非常令人困惑。事实上，谷歌在一个来源告诉我一件事，然后引用另一个来源说完全不同的事情，这显然让我更加困惑！任何帮助理解这种差异的帮助将不胜感激。 （作为奖励，任何帮助理解我为什么会收到 LCP 错误的帮助都将受到双重赞赏。）

提前感谢所有 SEO/开发专家。

Answer 1

Chrome（以及 PageSpeed Insights）不包含用户不可见的元素。这包括从不可见中“淡入”的元素，就像您的网站一样，因为很难知道它们何时足以让用户看到它们。

LCP 是一种启发式方法，因此有时它对某些网站不起作用，但总的来说，它对大多数网站来说都很好。

此外，LCP 的目的并不是阻止您创建出色的用户体验，因此如果淡入效果可以实现这一目标，您不应仅仅因为 LCP 不能很好地捕获它而将其删除。理想情况下，我们应该修复指标来处理这个问题，但正如我所说，这很复杂。

因此，在此之前，您有几个选项可让您测量 LCP：

• 更改动画以从某些内容开始（例如

  opacity: 0.01

  ）而不是

  opactity: 0

  ，这样它就会注册。
• 某些内容不会淡入，因此您拥有符合 LCP 资格的内容。

说实话，第一个有点老套，而且没有什么可说的，将来不会改变，所以我实际上可能会推荐第二个选项。

我个人也觉得主要内容淡入，然后是标题/菜单栏，最后是汉堡菜单图标有点不和谐。恕我直言，三个不同的淡入有点多，所以也许让标题/菜单栏和/或汉堡菜单显示而不淡入可以解决这两个问题，因为您现在将拥有符合 LCP 资格的东西。虽然理想情况下我们会将主要内容捕获为 LCP 元素而不是标题栏，但似乎它们显示得足够近，所以也许这并不重要？

最后，我们来到这一点：

事实上，谷歌在一个来源告诉我一件事，然后引用另一个来源说完全不同的事情，这显然让我更加困惑！

我完全同意，这不是一个很好的用户体验。老实说，尽管我在 Chrome 团队工作并致力于 Web Vitals 指标，但我在这里也有点困惑！

查看此工具中移动设备上 LCP 的历史，我可以发现在为 PSI 和 GSC 提供支持的 Chrome 用户体验报告中，该 URL 通常没有足够的数据。今年早些时候，这种情况出现得较多。从那时起你添加了这个淡入淡出效果吗？也许这就是为什么之前测量但现在不测量的原因？

无论如何，我可以理解为什么 PSI 现在在“发现真实用户正在体验的部分”下显示 N/A（我们也知道为什么在实时“诊断性能问题”部分测试时不显示），所以我'我对 PSI 所显示的内容感到满意。

我不知道为什么 GSC 会显示带有“此页面组中的 URL 示例”的 LCP，但不幸的是，该工具由搜索团队管理，该团队与 Chrome 团队保持安静。也许这是它显示时的旧数据，如果他们认为显示它仍然有用，他们就会继续显示它。您可以在 Google 搜索中心帮助社区 或 网站管理员堆栈交换 上提问，在这里您比这里的技术帮助更有可能获得 SEO 帮助。