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

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

工具

最近用 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指标

我来解答赞 5 收藏

反馈

1 条解答

Code°康康 Lv1

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

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

.loading-spinner {

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

}

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

2026-03-07 22:45