Performance 为什么PageSpeed Insights在一个简单的游戏中总是返回高TTI（互动时间）？

我将我的应用程序/游戏/PWA提交到，它不断给我TTI值>7000ms和TBT值>2000ms，如下面的屏幕截图所示（移动体验的总分约为63分）：

我一次又一次地读到这些价值观的含义，但我就是不能降低它们

最烦人的是，当在现实生活中的浏览器中访问页面时，我不需要等待7秒钟，页面就可以交互，即使有一个清晰的缓存

可以访问该游戏，其源代码为

让我感到欣慰的是，谷歌自己的游戏也取得了糟糕的成绩。事实上，PageSpeed Insights给它的总分是“？”

总结：有没有办法告诉PageSpeed Insights页面实际上是一个只有一个简单画布的游戏，在画布上呈现第一帧时（而不是7秒后），它确实是交互式的

更新：部分解决方案 多亏@Graham Ritchie的回答，我能够检测到两个最慢的点，模拟一部中端手机：

• 加载/编译WebAssembly文件：对此我无能为力，仅此一项就花费了将近1.5秒
• 加载主脚本文件script.min.js：我将该文件分为两部分，因为该文件中几乎三分之二都是字符串常量，我开始异步加载它们，使用

  async

  加载主脚本，并延迟加载其他字符串常量，这比加载时间节省了1.2秒以上

这些改进还为更好的移动设备/桌面设备节省了一些时间

提交差异是

更新2：改进工具 对于任何从谷歌来到这里的人，我之前忘记提到的两个额外提示

• 使用CLI Lighthouse工具而不是网站（对于本地主机和internet网站）：

  npm安装-g Lighthouse

  ，然后调用

  Lighthouse--view http…

  （或根据需要使用任何其他参数）
• 如果在笔记本电脑上运行，请确保它不是在电池上运行，而是实际连接到电源 总结：有没有办法告诉PageSpeed Insights页面实际上是一个只有一个简单画布的游戏，并且在画布上呈现第一帧时（不是7秒后），它确实是交互式的
  不，不幸的是，我认为你错过了谜题中的一个关键部分，即为什么这些数字如此之高
  Page Speed Insights使用网络节流和CPU来模拟4G连接上的中端移动电话。
  问题是你的问题
  如果我在Google Chrome Developer Tools的“性能”选项卡上运行游戏，CPU上有“4x减速”，我会得到一些长任务，其中一个需要5.19秒才能运行
  你的问题不是页面重量，因为网站是轻量级的，而是JavaScript执行时间
  您必须仔细查看代码，了解为什么要运行这么长时间的任务，查找嵌套循环，因为它们通常是问题所在
  还有几个其他任务之间总共需要1-2秒，但这5秒的任务是罪魁祸首
  希望这能把事情弄清楚一点，任何问题都可以问
  总结：有没有办法告诉PageSpeed Insights页面实际上是一个只有一个简单画布的游戏，并且在画布上呈现第一帧时（不是7秒后），它确实是交互式的
  不，不幸的是，我认为你错过了谜题中的一个关键部分，即为什么这些数字如此之高
  Page Speed Insights使用网络节流和CPU来模拟4G连接上的中端移动电话。
  问题是你的问题
  如果我在Google Chrome Developer Tools的“性能”选项卡上运行游戏，CPU上有“4x减速”，我会得到一些长任务，其中一个需要5.19秒才能运行
  你的问题不是页面重量，因为网站是轻量级的，而是JavaScript执行时间
  您必须仔细查看代码，了解为什么要运行这么长时间的任务，查找嵌套循环，因为它们通常是问题所在
  还有几个其他任务之间总共需要1-2秒，但这5秒的任务是罪魁祸首

  ---

  希望这能把事情弄清楚一点，任何问题都可以问。
  我已经添加了性能标签，因为你可能会很幸运，有人可能会发现为什么你有一个5秒长的任务，以及如何改进它。远射，但你可能会幸运！顺便说一句，这个游戏很有趣@格雷厄姆里奇谢谢！！！：）我添加了性能标签，因为你可能会很幸运，有人可能会发现为什么你有一个5秒长的任务，以及如何改进它。远射，但你可能会幸运！顺便说一句，这个游戏很有趣@格雷厄姆里奇谢谢！！！：）谢谢我将在不缩小的情况下测试游戏，试图找出罪魁祸首。。。我最初的猜测是加载/编译WebAssembly所用的时间。。。但我必须先测试一下|是的，事实上可能就是这样。没问题，祝你好运！很高兴你已经做了一些改进-谢谢我将在不缩小的情况下测试游戏，试图找出罪魁祸首。。。我最初的猜测是加载/编译WebAssembly所用的时间。。。但我必须先测试一下|是的，事实上可能就是这样。没问题，祝你好运！很高兴你已经做了一些改进-