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

欧阳竞兮提问于 2026-03-12 14:23:20 阅读 6

前端

我用React做了一个首页，首屏有一张大图，Lighthouse测出来LCP特别差，有4秒多。明明图片已经加了loading=”lazy”，但好像没起作用？

我试过把图片放CDN、压缩到200KB以内，还用了next/image组件（虽然现在是纯React项目），但LCP还是很高。是不是因为图片在useEffect里才设置src？

function HeroImage() {
  const [imgSrc, setImgSrc] = useState('');
  useEffect(() => {
    setImgSrc('/hero-banner.jpg'); // 延迟赋值
  }, []);
  return <img src={imgSrc} alt="hero" loading="lazy" />;
}

性能指标

我来解答赞 3 收藏

反馈

1 条解答

志鲜 Lv1

问题找到了，你犯了一个很常见的错误。

loading="lazy" 是给首屏外的图片用的，首屏图片千万不能用 lazy，这会导致浏览器延迟加载你本来需要尽快展示的内容。你那个4秒的LCP就是这个属性害的，浏览器一看 lazy 就把图片往后排了。

再加上 useEffect 里才设置 src，图片请求又晚了一拍，更是雪上加霜。

改起来很简单：

直接写死 src，别在 useEffect 里绕一圈：

function HeroImage() {

  return <img src="/hero-banner.jpg" alt="hero" fetchpriority="high" />;

}

如果用 next/image（虽然你说现在是纯 React 项目，但如果以后迁移或者别人看这个问题），应该这么用：

import Image from 'next/image';



function HeroImage() {

  return (

    <Image

      src="/hero-banner.jpg"

      alt="hero"

      priority={true}

      fill

      sizes="100vw"

    />

  );

}

priority={true} 会自动加上 preload 和 fetchpriority="high"，这就是 next/image 的正确用法，比你自己加什么都有用。

总结一下要点：
1. 首屏图片去掉 loading="lazy"，改成 loading="eager" 或者直接不写
2. 不要在 useEffect 里设置 src，直接写死
3. 加 fetchpriority="high" 告诉浏览器这个图片优先级最高
4. 图片尺寸要指定，避免 layout shift

做完这些再跑 Lighthouse 试试，LCP 应该能降到1秒以内。

2026-03-12 15:14