Google Pagespeed Insight 测试在快速网站上失败并出现 NO_FCP 错误,有没有办法修复它?

Google Pagespeed Insight test fails on fast website with NO_FCP error, is there a way to fix it?

我在一个网站上工作,我在其中使用 three.js 来获取 3d 内容,我已经让它使用相对路径,加载速度比 unpkg 或其他第 3 方快得多。但是,当我尝试使用 google pagespeed insight 测量 pagespeed 时,它失败并显示 NO_FCP 错误代码。我读过,如果网站在 15 秒内无法加载,那么这就是慢速网站的响应,但是任何人都可以检查它(至少在欧洲)页面加载速度非常快:https://adambernath.com/lotto/lotto.html

我在这里使用的唯一不同于我通常构建的其他页面的是 three.js,我不知道是什么导致了这个问题。

您的 .gltf 文件加载时间很长。
我不确定为什么,因为它不大。最好开始调查。你是在运行时生成它还是什么?
当您似乎只需要带纹理的球体时,为什么还要使用 .gltf 模型?

看来您使用的是cloudflare,可能是cloudflare中的某些设置不正确? (我从来没有用过cloudflare)。

低概率答案

这可能是 Lighthouse 在尝试检测库时出现错误造成的。

如果您查看服务器日志,您应该会看到对“https://adambernath.com/asset-manifest.json”的请求,return在您的服务器上出现 500 错误。

如果您将其修复为 return 404,则可能会解决问题。

更有可能

已知Chromium and Lighthouse have problems with full WebGL rendered pages.

给它一些时间,它可能会得到解决。现在我会使用“性能”选项卡使用性能跟踪,网络设置为“快速 3g”,CPU 设置为“4 倍减速”。

这将为您提供 Lighthouse 使用的原始数据,让您发现瓶颈等。显然不利的一面是它更难理解,因此您可能需要进行一些谷歌搜索!

即使那样你也可能得不到 FCP 和 LCP,因为我在为你测试这个时得到了混合结果,但这些只是任意测量,“性能”选项卡会告诉你所有你需要从屏幕截图时间轴和来自 CPU 用法(长任务)。

性能方面 - 我的第一反应是在你的“fgoly.gltf”文件上使用 gzipbr - 它目前看起来根本没有被压缩并且代表目前占页面权重的 70%。