Lighthouse 报告中 FCP 时间过长，怎么优化？

闲人俊蓓提问于 2026-02-28 21:33:19 阅读 32

工具

我用 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);
});

我来解答赞 9 收藏

反馈

2 条解答

欧阳纪娜 Lv1

兄弟，你这个代码逻辑有问题啊。

FCP 4秒多，但你说首页就一张 logo + 一点文字，这明显不正常。

看你的代码，罪魁祸首是这段：

window.addEventListener('DOMContentLoaded', () => {

  const img = new Image();

  img.src = 'data:image/png;base64,...';

  document.getElementById('logo').appendChild(img);

});

你在 DOMContentLoaded 之后才创建和插入图片，这时候 FCP 早就该发生了。你这个 logo 根本不在 FCP 的考量范围内好吧。

问题在于：你把首屏渲染要用的图片用 JS 动态创建，浏览器在解析 HTML 的时候根本不知道这里有张图要显示，FCP 怎么可能快？

正确做法：

直接在 HTML 里写死 img 标签：

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

别用 JS 动态插入，也别等 DOMContentLoaded。

另外关于 base64，这其实是个误区。base64 编码会让图片体积大 33% 左右，而且会阻塞 HTML 解析。你这个 logo 如果是简单图形，建议直接用 SVG：

<svg id="logo" width="100" height="100">

  <path d="..."/>

</svg>

SVG 是纯文本，解析速度比 base64 图片快得多，体积也小。

总结：把 logo 直接写进 HTML，用 SVG 替代 PNG base64，FCP 肯定能下来。

2026-03-13 10:04

IT人正毅 Lv1

问题找到了，你用 JS 在 DOMContentLoaded 之后才插入图片，FCP 早就测完了，这时候图片还没影呢。

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

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

或者更省事，把 logo 搞成内联 SVG，连请求都省了，FCP 直接起飞。

2026-02-28 22:24