Lighthouse 报告中 FCP 时间过长,怎么优化?

闲人俊蓓 阅读 14

我用 Lighthouse 测了一个页面,FCP(First Contentful Paint)居然要 4 秒多,明明首页就加载了一张 logo 图和一点文字,按理说不应该这么慢啊。

我试过把关键 CSS 内联了,也把图片转成 base64 嵌进 HTML 里,但 FCP 还是没改善。是不是我哪里搞错了?

这是我的关键渲染代码:

window.addEventListener('DOMContentLoaded', () => {
  const img = new Image();
  img.src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...';
  document.getElementById('logo').appendChild(img);
});
我来解答 赞 2 收藏
二维码
手机扫码查看
1 条解答
IT人正毅
问题找到了,你用 JS 在 DOMContentLoaded 之后才插入图片,FCP 早就测完了,这时候图片还没影呢。

懒人方案:直接把图片写死在 HTML 里,别折腾 JS 动态加载。

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA..." alt="logo">


或者更省事,把 logo 搞成内联 SVG,连请求都省了,FCP 直接起飞。
点赞 3
2026-02-28 22:24