Three.js Google Pagespeed Insight测试在fast网站上失败，没有任何FCP错误，有没有办法修复？

我在一个网站上工作，在那里我使用three.js来制作3d内容，我已经使它能够使用相对路径，加载速度比unpkg或其他第三方更快。然而，当我尝试用google pagespeed insight测量pagespeed时，它失败了，错误代码为NO_FCP。我曾读到，如果速度慢的网站无法在15秒内加载，这就是响应，但任何人都可以检查（至少在欧洲），页面加载速度相当快：

---

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

您的.gltf文件需要很长时间才能加载。
我不知道为什么，因为它不是很大。最好开始调查。您是在动态生成还是什么？
当你似乎只需要带纹理的球体时，为什么还要使用.gltf模型呢

看起来您正在使用cloudflare，可能cloudflare中的某些设置不正确？（我从未使用过cloudflare）。

低概率答案 这可能是由于灯塔在试图检测图书馆时出现了一个bug

如果查看服务器日志，您应该会看到请求“https://adambernath.com/asset-manifest.json“这将在服务器上返回一个500错误

如果您将其修复为返回404，则可能会修复该问题

更有可能 众所周知,

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

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

即使这样，您也可能得不到FCP和LCP，因为我在为您测试这两个方面时，结果参差不齐，但这些只是任意的度量，性能选项卡将告诉您从屏幕截图时间线和CPU使用情况（长任务）中需要知道的所有信息

---

性能方面-我的第一反应是在“fgoly.gltf”文件上使用

gzip

或

br

-它目前看起来根本没有被压缩，目前占页面重量的70%。

是的，通过向页面添加更多内容（完全奇怪），部分解决了问题，但是pagespeed insight仍然给出了一个问号结果。尝试此页面：是，这样浏览器（部分与浏览器计时相关）现在可以看到图像并知道何时有绘制的内容。然而，您的数字会有一点偏差，因为它不会适当地考虑画布的渲染时间（但仍然会考虑JS执行时间，所以不会太远）。它可能会错报FCP和LCP的项目和时间，但恐怕你做不了多少。关注“诊断”和“机会”下的建议，而不是分数本身。所以，尽量减少请求深度，按我说的压缩，等等。我明白了，谢谢。我用lighthouse对它进行了测试，除了在LCP上失败的性能外，分数似乎还不错。由于pagespeed也会影响排名，而且谷歌也没有明确指示他们在给一个网站“他们的分数”对页面进行排名时是如何考虑的，我想最安全的做法是将三个js完全排除在外。。。由于这个网站的成功将只依赖于网页排名。我可以很容易地达到100/100分，如果我不使用三个js。。。有没有谷歌3d的经验可以作为替代？这一次他们似乎在自己的3d测试中也“失败”（好吧，不是一个好分数）：对于你的设计来说，为什么不用多层视差设计来伪造3d呢。这可以变得非常轻，特别是如果您可以使用SVG获得所需的图像效果。一个5层视差，稍微操纵z轴（我想我的意思是z轴，基本上是绕y轴轻微旋转，我总是要摆弄来记住！）看起来99%，你可能可以用比3.js库更轻的重量完成整个事情（图像和所有），而不用管你的模型文件等等。我不确定为什么gltf会这样“加载”速度也很慢，不是很大，当你看到它如何渲染时，它实际上在最多3-4秒内渲染。我使用gltf对球体进行渲染，因为在没有操纵器的情况下，很难将它们定位到我想要的形状（因此我在maya中定位了它们），我想如果它能解决问题的话，花点时间在上面是值得的cloudlflare设置应该可以的，我为我建立的每个网站使用相同的设置，其他我建立的网站可以得到100/100的分数。今天早上再次检查，.gltf文件在2秒钟内加载…所以我不确定昨天发生了什么。我想chrome和google混淆了整个3d的事情，有时他们会被困在3d场景加载后需要计算的事实上