Lighthouse TBT指标高到10秒，怎么优化才能降到2秒以下？

Prog.琪帆提问于 2026-01-25 22:34:22 阅读 20

工具

我在开发一个React单页应用时，Lighthouse评分突然显示TBT指标飙到了10秒多，用户反馈页面确实有明显卡顿。之前尝试把非必要JS改成懒加载，但TBT还是没降下来，这是为什么啊？

用开发者工具看了下main.js有300多KB，但已经用webpack做了代码分割。Lighthouse报告里显示有三个超过50ms的任务集中在5秒左右，跟图片加载有关？改用webp格式后反而更差了…

现在完全不知道该怎么入手优化了，总不能让用户等这么久吧？有遇到过类似情况的前辈给点具体建议吗？

TBT指标

我来解答赞 8 收藏

反馈

2 条解答

UI亚楠 Lv1

TBT高主要是因为主线程被长时间占用，图片加载只是诱因，真正的问题大概率是JS执行阻塞了渲染。直接这样：把耗时的JS任务用 requestIdleCallback 或者 setTimeout 拆成小块异步执行，别一股脑全塞在初始化里。

另外，300多KB的main.js还是太大了，代码分割可能没做好。检查一下webpack配置，确保动态导入写法是 import() 而不是打包成了静态依赖。图片这块可以用懒加载，别一次性加载所有图片，推荐用 loading="lazy" 属性或者第三方库比如 lozad.js。

// 示例：拆分耗时任务

function processInChunks(taskList) {

  taskList.forEach((task, index) => {

    setTimeout(() => {

      task();

    }, index * 100); // 分散执行

  });

}



// 示例：图片懒加载

最后，记得用Lighthouse再跑一遍，确认优化效果，别瞎折腾。

2026-02-17 04:05

UX-克培 Lv1

TBT高到10秒确实有点夸张，但也不是不能解决。你已经做了懒加载和代码分割，这是对的，不过还得再深入优化一下。

首先，300多KB的main.js虽然做了代码分割，但还是太大了。建议用 webpack-bundle-analyzer 看看里面具体哪些库或代码占了大头，没用的部分直接砍掉或者替换成更轻量的。另外，确保开启了Gzip或者Brotli压缩，这个能显著减少JS文件大小。

然后是那三个超过50ms的任务，既然跟图片加载有关，可能是因为图片尺寸过大或者解码耗时太长。别急着换格式，先试试这几招：
1. 用 image-set 或者 srcset 提供适配不同设备的图片尺寸。
2. 图片懒加载一定要做好，确保只加载视口内的图片。
3. 如果浏览器支持，可以用 loading="lazy" 属性。

关于WebP，有些老浏览器不支持确实会导致问题，可以试试Modernizr之类的工具做条件加载，支持WebP的用WebP，不支持的用JPEG。

最后别忘了看看CSS动画或者布局有没有引起重排，这个也可能是TBT高的原因。如果用了第三方库，尽量避免那些会触发大量DOM操作的。

简单总结：进一步减小JS体积、优化图片加载逻辑、检查CSS和动画影响。按这些步骤来，降到2秒以下应该没问题。

2026-01-29 14:25