得到一个？页面洞察中的性能得分

Question

所以我有 2 个 Gatsbyjs 网站

那个人大约 40 岁。

我最近建造的第二个获得了“？”

然后当我更新第一个以提高其性能时，它得到了一个“？”也一样。

这两个网站是：

Pixelfriendly.co.za

Bee-projects.co.za

Answer 1

您网站上的某些内容导致 Page Speed Insights 引发错误。

如果您查看“实验室数据”部分，您会看到“最大内容绘制”部分显示两个站点的“错误”。

这几乎肯定与您的动画有关。

您会看到最大的内容绘制正在寻找在屏幕上绘制的最大项目。现在它只会监控这一点，直到 CPU 安静下来并加载所有资产后几秒钟，此时测试结束。

问题是您的动画需要很长时间才能“完成”，以至于在测试结束之前它们没有完成。所以 PSI 不知道什么是最大内容绘制并抛出错误。

你能做些什么来解决它？

如果您想保留动画，什么都不做，您将无法使用 Lighthouse（在 Google Chrome 开发者工具中）或 Page Speed Insights（因为它由 Lighthouse 提供支持）。

不过，我建议您大幅缩短“开场动画”在两个网站上的播放时间。人们对页面是否适合他们做出非常快速的决定，并且在看起来准备就绪之前等待长达 5 秒是太多了。一定要保留动画，但至少要减少一半，如果不是三分之二的话。

如果您这样做，它将通过降低跳出率使您的网站受益，但也会使您的网站再次可测试，作为额外的奖励。