Lighthouse 报告中 TTI 为什么总是很高？

兴瑞 ☘︎ 提问于 2026-03-24 13:59:22 阅读 24

工具

我用 Lighthouse 测了一个页面，TTI（Time to Interactive）指标一直卡在 8 秒以上，明明首屏内容加载挺快的啊。

我试过删掉一些第三方脚本、加了 async 属性，还把主 JS 拆成了动态 import，但 TTI 还是下不来。是不是我理解错了 TTI 的计算逻辑？

页面结构大概是这样：

<body>
  <div id="app"></div>
  <script src="/main.js" defer></script>
  <script src="https://cdn.thirdparty.com/widget.js" async></script>
</body>

TTI指标

我来解答赞 4 收藏

反馈

1 条解答

シ瑞丽 Lv1

TTI 这玩意儿有时候真是个头疼的东西，明明首屏加载得挺快，结果 TTI 就上去了。你已经做了不少优化了，不过可能还有一些细节没注意到。

首先，检查一下你的 main.js 文件，确保它没有做太多阻塞渲染的任务。就算用了 defer，如果脚本本身执行时间很长，还是会影响 TTI。

其次，虽然你给第三方脚本加了 async，但是这些脚本内部的操作可能会影响到主线程。特别是如果它们在页面加载时做了很多 DOM 操作或者事件绑定，那就更麻烦了。可以试试延迟加载这些第三方脚本，比如通过 Intersection Observer 或者滚动事件来触发加载。

再者，看看是不是有其他资源加载慢或者阻塞了。有时候图片、字体文件或者其他静态资源也会拖后腿。可以用 Chrome 开发者工具的网络面板详细分析一下各个资源的加载情况。

最后，如果以上都做了，问题依然存在，可以考虑精简你的代码逻辑，减少不必要的计算和操作，或者看看能不能用 Web Workers 来处理一些耗时的任务，避免阻塞主线程。

总之，TTI 高通常就是主线程被卡住了，找到是什么导致的阻塞然后针对性解决就行了。希望这些建议对你有帮助，折腾这个玩意儿我也够呛，加油吧。

2026-03-24 14:03