问题描述
我向PageSpeed Insights提交了我的应用/游戏/ PWA,它不断为我提供TTI值> 7000ms和TBT值> 2000ms,如下面的屏幕截图所示(移动体验的总分是大约63):
我一遍又一遍地读懂这些值的含义,但是我不能降低它们!
最令人讨厌的是,在现实生活中的浏览器中访问页面时,即使有明确的缓存,我也无需等待7秒即可使页面变为交互式!!!
令我感到欣慰的是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 (将#修改为@)