为什么优化了代码后Lighthouse的TTI指标还是卡在11秒以上？

宝玲提问于 2026-02-16 08:49:27 阅读 11

工具

我在优化一个单页应用时，Lighthouse的TTI一直显示11秒多，明明把JS拆分成了动态导入，还压缩了图片。但测试报告里显示”largest-contentful-paint”还是在首屏阻塞渲染，main.js文件虽然只有200kb，但评分就是提不上去。尝试过用预加载关键资源，但开发者工具网络面板还是显示…

代码结构大概是这样的：


<html>
  <head>
    <link href="/styles.css" rel="external nofollow"  rel="stylesheet">
    <script src="/main.js" defer></script>
  </head>
  <body>
    <div id="app"></div>
    <script type="module">
      import('./lazy-module.js')
    </script>
  </body>
</html>

这样写有问题吗？为什么首屏加载时间还是卡在TTI指标上？

TTI指标

我来解答赞 9 收藏

反馈

1 条解答

夏侯好妍 Lv1

你的代码结构其实没啥大问题，但有几个点需要注意。Lighthouse的TTI指标卡在11秒以上，大概率是因为主线程被阻塞了，尤其是首屏渲染过程中，main.js虽然是defer加载，但它可能还是太大了，即使压缩到200kb，解析和执行的时间也会拖慢TTI。

优化建议如下：

先把关键CSS内联到HTML里，减少外链CSS的请求时间。像你这种单页应用，首屏样式其实不需要太多，直接写在head里就行：

<style>

  /* 把首屏需要的样式放这里 */

  body { margin: 0; font-family: sans-serif; }

  #app { display: flex; justify-content: center; align-items: center; height: 100vh; }

</style>

然后，main.js虽然用了defer，但200kb对首屏来说还是太重了。你可以试试把首屏初始化逻辑单独拆出来，用一个小的bootstrap.js来处理首屏渲染，剩下的逻辑再动态加载：

<script>

  // 只加载首屏必须的逻辑

  const app = document.getElementById('app');

  app.innerHTML = '<div class="loading">Loading...</div>';

</script>

<script src="/main.js" defer></script>

另外，动态导入的lazy-module.js最好也加上预加载，避免它成为瓶颈：

<link rel="modulepreload" href="/lazy-module.js">

最后，确保服务器启用了Gzip或Brotli压缩，特别是对JS和CSS文件。如果服务器没配置好，文件传输时间会很长。

按照上面这些改完后，重新跑一下Lighthouse，TTI应该能降到6秒以内。如果还不行，可能是第三方库或者图片资源的问题，可以用开发者工具的Performance面板具体分析一下主线程的耗时分布，找到真正的瓶颈。

复制这些改法，基本能解决问题。

2026-02-16 09:05