为什么优化了代码后Lighthouse的TTI指标还是卡在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指标上？
2 条解答
看你的代码，
div id="app"是空的，LCP 要等 main.js 执行完才能渲染内容。200KB 的 JS 在低端设备上跑个几秒很正常，TTI 11秒基本就是 JS 初始化时间。几个关键问题：
1. CSS阻塞没解决
styles.css 放在 head 里但没有 preload，浏览器必须等 CSS 下载完才能开始渲染。建议改成：
或者直接内联关键CSS，把首屏必须的样式放在