Lighthouse 性能报告里的 TTI 和 FCP 到底怎么优化？

文科酱~ 提问于 2026-02-26 06:47:20 阅读 46

前端

我用 Lighthouse 跑了个性能测试，发现 TTI（可交互时间）和 FCP（首次内容绘制）得分特别低，页面明明看起来加载挺快的啊？

我已经把关键 CSS 内联了，JS 也加了 async，但还是没提升。是不是还要处理字体加载或者图片懒加载的问题？

比如这段关键路径的 JS 是不是写得有问题：

document.addEventListener('DOMContentLoaded', () => {
  const btn = document.getElementById('submit-btn');
  btn.addEventListener('click', handleFormSubmit);
});

性能报告性能指标

我来解答赞 13 收藏

反馈

1 条解答

a'ゞ婧妍 Lv1

你这个代码放这了，但问题不在这里——DOMContentLoaded 事件本身没问题，它只等 DOM 解析完就触发，不等样式、图片、字体这些。Lighthouse 的 FCP 是“首次内容绘制”，指的是页面上第一个实际内容（比如文字、图片）出现的时间；TTI 更严格，得等主线程空闲、能响应用户操作才算。

你加了 async 和内联关键 CSS，但可能还有几个坑：

1. 字体加载默认是隐藏文本（FOIT），如果字体文件大或者没加 font-display: swap，页面会白屏到字体加载完，FCP 就被拖慢了。解决：给 @font-face 加 font-display: swap;，或者用 preload 提前拉字体。

2. 图片没懒加载？Lighthouse 对非首屏大图很敏感，尤其是移动端。解决：给非首屏图片加 loading="lazy"，或者用 IntersectionObserver 手动懒加载。

3. JS 执行阻塞了渲染？你这段代码本身轻量，但如果其他 JS（比如 analytics、第三方 SDK）没加 defer 或 async，也可能卡主线程。检查 Network 面板里 JS 的执行时间，尤其是主线程的 Long Task（超过 50ms 的任务）。

4. CSS 有没有没内联的阻塞资源？比如外部样式表没加 media="print" 或没拆分 critical CSS，导致 DOM 解析完还在等 CSSOM。

5. 服务器响应时间？FCP 前半段是网络 + 服务端渲染时间，如果首字节时间 >300ms，再优化前端也没用。先看 Lighthouse 的 “Diagnostic” 部分里 “Reduce server response times (TTFB)” 是不是红的。

代码放这了，但优化得先看指标来源：
FCP 主要看渲染前的阻塞点（网络、CSS、字体），TTI 还要看 JS 执行是否太重、主线程是否被占用太久。

真要快速试试，加个这行到字体声明里试试：

@font-face {

  font-family: 'MyFont';

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

  font-display: swap;

}

再给非首屏图片加 loading="lazy"，一般 FCP 能涨个 10-30 分。

2026-02-26 07:00