为什么 PageSpeed Insights 总是为一款简单的游戏返回高 TTI（交互时间）？
Why does PageSpeed Insights keeps returning a high TTI (Time to Interactive) for a simple game?
我将 app/game/PWA 提交给 PageSpeed Insights，它一直给我 TTI 值 > 7000ms 和 TBT 值 > 2000ms，如下面的屏幕截图所示（移动设备的总体得分经验值在63左右):
我一遍又一遍地阅读这些值的含义，但我就是无法降低它们！
最烦人的是，在现实浏览器中访问页面时，即使清除了缓存，我也不需要等待 7 秒页面就可以交互！！！
游戏可以访问here and its source is here。
让我欣慰的是，Google自己的比赛，Doodle Cricket的得分也很惨。事实上，PageSpeed Insights 给它的总分是“?”。
总结：有没有办法告诉 PageSpeed Insights 该页面实际上是一个游戏，里面只有一个简单的 canvas，并且 它确实是互动的第一帧在 canvas 上渲染（不是 7 秒后）？
更新：部分解决方案
感谢@Graham Ritchie 的回答，我能够检测到两个最慢的点，模拟中端手机 phone:
- Loading/Compiling WebAssembly 文件：对此我无能为力，仅此一项就消耗了将近 1.5 秒...
- 加载主脚本文件，script.min.js：我将文件分成两部分，因为这个文件的几乎三分之二只是字符串常量，我开始异步加载它们，都使用
async加载主脚本并延迟加载其他字符串常量，这比加载时间节省了超过 1.2 秒。
这些改进还在更好的移动 devices/desktop 设备上节省了一些时间。
提交差异是 here。
更新 2：改进工具
对于从 Google 来到这里的任何人，我之前忘记提及的两个额外提示...
- 使用 CLI Lighthouse 工具而不是网站（本地主机和互联网网站）：
npm install -g lighthouse，然后调用 lighthouse --view http....（或根据需要使用任何其他参数）。
- 如果 运行 在笔记本电脑上，请确保它不是 运行 在电池上，而是实际连接到电源
Summing up: is there a way to tell PageSpeed Insights the page is actually a game with only a simple canvas in it and that it is indeed interactive as soon as the first frame is rendered on the canvas (not 7 seconds later)?
不，不幸的是，我认为您错过了关于为什么这些数字如此之高的一个关键难题。
Page Speed Insights 使用网络节流和 CPU 来 在 4G 连接上模拟 mid-tier 手机 phone。
CPU throttling 是你的问题。
如果我 运行 你的游戏在 Google Chrome 开发者工具的“性能”选项卡中 CPU 有“4x 减速”，我会得到一些长任务，其中一项需要 5.19 秒才能完成 运行!
您的问题不是页面重量，因为网站是轻量级的，而是 JavaScript 执行时间。
您必须仔细检查您的代码，看看为什么您的任务需要这么长时间才能完成 运行，寻找嵌套循环，因为它们通常是问题所在！
还有其他几个任务总共需要 1-2 秒，但 5 秒的任务是罪魁祸首！
希望一切都搞清楚了，有任何问题都可以问。
我将 app/game/PWA 提交给 PageSpeed Insights，它一直给我 TTI 值 > 7000ms 和 TBT 值 > 2000ms，如下面的屏幕截图所示（移动设备的总体得分经验值在63左右):
我一遍又一遍地阅读这些值的含义，但我就是无法降低它们！
最烦人的是，在现实浏览器中访问页面时，即使清除了缓存，我也不需要等待 7 秒页面就可以交互！！！
游戏可以访问here and its source is here。
让我欣慰的是，Google自己的比赛，Doodle Cricket的得分也很惨。事实上，PageSpeed Insights 给它的总分是“?”。
总结：有没有办法告诉 PageSpeed Insights 该页面实际上是一个游戏，里面只有一个简单的 canvas，并且 它确实是互动的第一帧在 canvas 上渲染（不是 7 秒后）？
更新：部分解决方案
感谢@Graham Ritchie 的回答，我能够检测到两个最慢的点，模拟中端手机 phone:
- Loading/Compiling WebAssembly 文件：对此我无能为力，仅此一项就消耗了将近 1.5 秒...
- 加载主脚本文件，script.min.js：我将文件分成两部分，因为这个文件的几乎三分之二只是字符串常量，我开始异步加载它们，都使用
async加载主脚本并延迟加载其他字符串常量，这比加载时间节省了超过 1.2 秒。
这些改进还在更好的移动 devices/desktop 设备上节省了一些时间。
提交差异是 here。
更新 2：改进工具
对于从 Google 来到这里的任何人，我之前忘记提及的两个额外提示...
- 使用 CLI Lighthouse 工具而不是网站（本地主机和互联网网站）：
npm install -g lighthouse，然后调用lighthouse --view http....（或根据需要使用任何其他参数）。 - 如果 运行 在笔记本电脑上，请确保它不是 运行 在电池上，而是实际连接到电源
Summing up: is there a way to tell PageSpeed Insights the page is actually a game with only a simple canvas in it and that it is indeed interactive as soon as the first frame is rendered on the canvas (not 7 seconds later)?
不，不幸的是，我认为您错过了关于为什么这些数字如此之高的一个关键难题。
Page Speed Insights 使用网络节流和 CPU 来 在 4G 连接上模拟 mid-tier 手机 phone。
CPU throttling 是你的问题。
如果我 运行 你的游戏在 Google Chrome 开发者工具的“性能”选项卡中 CPU 有“4x 减速”，我会得到一些长任务，其中一项需要 5.19 秒才能完成 运行!
您的问题不是页面重量，因为网站是轻量级的，而是 JavaScript 执行时间。
您必须仔细检查您的代码，看看为什么您的任务需要这么长时间才能完成 运行，寻找嵌套循环，因为它们通常是问题所在！
还有其他几个任务总共需要 1-2 秒，但 5 秒的任务是罪魁祸首！
希望一切都搞清楚了，有任何问题都可以问。