Lighthouse 报告中 TTI 过高，如何优化？

上官润恺提问于 2026-03-07 22:41:21 阅读 39

工具

最近用 Lighthouse 测了一个页面，TTI（Time to Interactive）居然有 8 秒多，明明首屏内容加载挺快的，交互延迟怎么会这么高？我试过删掉一些非关键 JS，但效果不明显。

页面里有个全局 loading 动画，用了 CSS 动画，会不会是这个影响了主线程？代码大概是这样：

.loading-spinner {
  animation: spin 1s linear infinite;
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #3498db;
  border-radius: 50%;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

这种纯 CSS 动画也会拖慢 TTI 吗？还是说问题出在别的地方？

TTI指标

我来解答赞 7 收藏

反馈

2 条解答

W″燕燕 Lv1

TTI 高确实挺烦人的，特别是你已经删掉了一些非关键 JS。先说结论：你的 CSS 动画本身不会直接影响 TTI，因为它是用 transform 实现的，跑在合成线程上。

问题很可能出在其他地方。建议你重点关注以下几个方面：

首先看看你的页面加载了多少第三方脚本，这些家伙经常拖慢交互时间。可以用 async 或 defer 来优化加载顺序。代码放这了：

<script src="third-party.js" async></script>

<script src="another-one.js" defer></script>

然后检查一下有没有长时间运行的 JavaScript 任务。你可以用 Chrome 的性能分析工具找出来。找到后试试拆分成更小的任务，或者用 requestIdleCallback。

最后别忘了看下首屏渲染后的资源请求，有些图片和字体可能会阻塞交互。给它们加上懒加载或者使用字体显示策略：

@font-face {

  font-family: 'MyFont';

  src: url('myfont.woff2') format('woff2');

  font-display: swap;

}

按这个方向调调看吧，应该能帮你把 TTI 压下来不少。调整完记得重新跑个 Lighthouse 测试验证效果。累死我了，搞性能优化真不容易啊。

2026-03-30 11:06

Code°康康 Lv1

CSS动画一般不会影响TTI，问题大概率出在JS上。懒人方案：先看下是不是有同步请求或者大体积JS在阻塞主线程，用performance.timing或者Chrome DevTools的Performance面板抓下瓶颈。

顺便，那个loading动画可以这样偷懒优化：

.loading-spinner {

  will-change: transform; /* 告诉浏览器提前准备 */

}

不过重点还是查JS，八成是某个脚本在偷偷搞事情。

2026-03-07 22:45