LCP总是超时，图片懒加载反而更慢了怎么办？

闲人姗姗提问于 2026-02-27 18:38:25 阅读 9

优化

我用 IntersectionObserver 做了图片懒加载，结果 LCP 指标反而变差了，首屏大图老是加载很慢。

明明没加懒加载前 LCP 是 1.8s，现在经常飙到 3s 以上。我试过给首屏图加 loading="eager"，但好像没起作用？

关键代码大概是这样的：

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      observer.unobserve(img);
    }
  });
});

document.querySelectorAll('img[data-src]').forEach(img => {
  observer.observe(img);
});

是不是首屏图根本不该用懒加载？那该怎么正确处理才能让 LCP 达标？

SEO优化

我来解答赞 3 收藏

反馈

1 条解答

打工人秀英 Lv1

问题在于你把首屏大图也交给 IntersectionObserver 懒加载了，它得等页面滚动到视口附近才触发加载，这直接拖垮了 LCP。
首屏关键图片必须用 loading="eager" + 预加载（link rel="preload"），别用 IntersectionObserver 看着它，懒加载只给非首屏图用。

正确做法是：
1. 首屏图直接写 src="xxx.jpg"，加 loading="eager"
2. 非首屏图才用 data-src + IntersectionObserver
3. 如果首屏图是背景图或太复杂，用 <link rel="preload" as="image" href="xxx.jpg"> 提前拉

附个修正后的懒加载逻辑（只处理非首屏图）：

const observer = new IntersectionObserver((entries) => {

  entries.forEach(entry => {

    if (entry.isIntersecting) {

      const img = entry.target;

      img.src = img.dataset.src;

      img.removeAttribute('data-src');

      observer.unobserve(img);

    }

  });

});



// 仅观察非首屏图（比如加了 .lazy 类的）

document.querySelectorAll('img[data-src].lazy').forEach(img => {

  observer.observe(img);

});

2026-02-27 19:01