LCP元素加载太慢，怎么优化首屏图片？

立顺 ☘︎ 提问于 2026-03-29 17:59:12 阅读 2

移动

我用 Lighthouse 测性能时发现 LCP（最大内容绘制）总是超 4 秒，主要卡在首屏那张大图上。明明加了 loading=”lazy”，但好像没起作用？

图片是动态从接口拿的，我试过用 IntersectionObserver 提前加载，但效果不明显。下面是我现在用的加载逻辑：

const img = new Image();
img.src = imageUrl;
img.loading = 'lazy';
img.onload = () => {
  setImageLoaded(true);
};
container.appendChild(img);

我来解答赞 3 收藏

反馈

1 条解答

春豪 Lv1

看起来你对图片加载做了不少尝试，但效果还不理想。几个建议可以优化成这样：

首先，loading="lazy"可能没生效是因为图片在首屏可见区域。对于首屏图片，最好直接预加载。可以用link标签提前声明：

然后修改你的代码逻辑，改成用Promise控制加载顺序会更优雅：



function loadImg(url) {

  return new Promise((resolve, reject) => {

    const img = new Image();

    img.src = url;

    img.onload = () => resolve(img);

    img.onerror = () => reject('Failed to load image');

  });

}



loadImg(imageUrl).then(img => {

  container.appendChild(img);

  setImageLoaded(true);

});

另外，考虑使用现代格式的图片，比如webp，体积更小加载更快。这需要后端配合返回合适的格式。

最后别忘了设置合适的缓存策略，让用户第二次访问时能快速显示。这些改动应该能让LCP明显改善。

2026-03-29 18:00