为什么PageSpeed Insights持续为简单游戏带来较高的TTI互动时间?

问题描述

我向PageSpeed Insights提交了我的应用/游戏/ PWA,它不断为我提供TTI值> 7000ms和TBT值> 2000ms,如下面的屏幕截图所示(移动体验的总分是大约63):

PageSpeed Insights Results

我一遍又一遍地读懂这些值的含义,但是我不能降低它们!

最令人讨厌的是,在现实生活中的浏览器中访问页面时,即使有明确的缓存,我也无需等待7秒即可使页面变为交互式!!!

可以here访问该游戏,其来源为here

令我感到欣慰的是Google自己的游戏Doodle Cricket的得分也很高。实际上,PageSpeed Insights的总得分为“?”。

总结:是否有办法告诉PageSpeed Insights,该页面实际上是其中仅包含一个简单画布的游戏,并且它确实是交互式的画布(不是7秒后)?

更新:部分解决方案

由于@Graham Ritchie的回答,我能够检测到两个最慢的点,模拟了中端手机:

  • 加载/编译WebAssembly文件:对此我无能为力,仅此一项就消耗了将近1.5秒...
  • 加载主脚本文件script.min.js:由于该文件的几乎三分之二只是字符串常量,因此我将该文件分为两部分,并且我开始异步加载它们,都使用async进行加载主脚本并延迟加载其他字符串常量,这比加载时间节省了超过1.2秒。

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

提交差异为here

更新2:改进工具

对于从Google来到这里的任何人,我之前都没有提到两个额外的提示...

  • 使用CLI Lighthouse工具而不是网站(对于localhost和Internet网站都使用):npm install -g lighthouse,然后调用lighthouse --view http....(或根据需要使用其他任何参数)。
  • 如果在笔记本电脑上运行,请确保它不在电池上运行,但实际上已连接到电源?

解决方法

暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!

如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@)