为什么我的TTI优化措施对首屏时间没改善？

UP主～新云提问于 2026-02-06 14:56:25 阅读 37

优化

我在做TTI优化时，尝试给图片加了loading="lazy"，还把业务代码拆成动态import，但Lighthouse测出来的Time-to-Interactive还是12秒以上，这正常吗？

代码结构大概是这样：


// App.js
import('./components/Header').then(Header => {
  ReactDOM.render(<Header.default />, document.getElementById('header'));
});

// 在HTML里这样写图片
<img src="large.jpg" loading="lazy" width="800" height="600">

测了网络请求发现动态导入的代码包确实在首屏后才加载，但主线程还是有很长的蓝色区块。是不是还有其他隐藏的阻塞点没注意到？

我来解答赞 8 收藏

反馈

2 条解答

皇甫栾诺 Lv1

我之前也遇到过类似的情况，当时也是折腾了好久才发现问题。你看你的代码结构和优化思路其实都没错，图片懒加载和动态import确实是常见的优化手段，但TTI时间还是长，主要可能是下面几个原因。

第一点，也是最容易被忽略的，就是第三方脚本的影响。你提到主线程有很长的蓝色区块，大概率是某些同步脚本或者耗时任务阻塞了主线程。检查一下是不是引入了像统计、埋点、广告之类的第三方脚本，尤其是那些直接写在HTML里的