错误！请确保在加载期间将浏览器窗口保持在前台，然后重试。 （NO_FCP）

Question

将我的网站迁移到新域后，此测试页面显示不正确。我仍然需要这个网站才能正常运行。

如何解决这个问题？将我的网站迁移到新域后，此测试页面显示不正确。我仍然需要这个网站才能正常运行。

Answer 1

tldr：尝试禁用淡入效果。

这似乎是测量 FCP 和 LCP 等绘制计时指标的方式中的一个怪癖。 Chrome 会忽略不透明度为 0 的 LCP 候选者，并且您的页面具有淡入效果，其中内容最初不可见。因此应被标记为 LCP 的元素将被忽略。这个怪癖在 DebugBear 的这篇博文中得到了很好的解释。

淡入效果发生得很快，但在这个WebPageTest幻灯片中很容易看到：

博文还警告：

即使某个元素淡入淡出，它仍然不会成为 LCP 候选元素，除非重新绘制。然而，如果重新绘制某个元素，则 LCP 将高于预期！

我只需等待与页面交互即可创建任意慢的 LCP 值：

只需将鼠标悬停在某个物体上即可导致重新绘制，LCP 算法会将其选为 LCP 候选者。因此，Lighthouse 不仅无法测试您的页面，而且您的用户体验指标也会出现偏差。

这是 Chrome 测量 LCP 方式的限制，因为 UX 实际上并没有那么慢。例如，在上面的幻灯片中，页面似乎在 3 秒内完全加载，而不是 9 秒。

为了避免所有这些测量和报告问题，我建议如果可以的话消除淡入淡出效果。这应该会导致 FCP 和 LCP 值与用户感知的性能更加一致，并且应该解决 Lighthouse 问题。