Lighthouse 报告中 LCP 元素为何总是图片？

码农一可提问于 2026-03-13 22:37:17 阅读 50

工具

我用 Lighthouse 测速时发现 LCP（最大内容绘制）元素老是某张 hero 图片，明明我已经加了 loading=”eager” 和 fetchpriority=”high”，但分数还是低。是不是还有其他优化点没考虑到？

页面结构大概是这样：

<main>
  <img 
    src="/hero.jpg" 
    alt="Hero image"
    loading="eager"
    fetchpriority="high"
    width="1200"
    height="630"
  >
</main>

我来解答赞 6 收藏

反馈

1 条解答

永伟🍀 Lv1

LCP 元素是图片是很正常的，因为 hero 图片通常是页面最大的那块内容。你现在的问题不是 LCP 元素本身，而是图片加载还是太慢了。

先澄清一个常见误区：loading="eager" 和 fetchpriority="high" 并没有让图片"提前加载"，它们只是提高了加载优先级，浏览器该发的请求还是得发，该等的下载还是得等。

真正能让 LCP 降下来的做法是预加载，用 link 标签提前告诉浏览器去抓这张图：

<head>

  <link rel="preload" as="image" href="/hero.jpg" fetchpriority="high">

</head>

<body>

  <main>

    <img 

      src="/hero.jpg" 

      alt="Hero image"

      width="1200"

      height="630"

    >

  </main>

</body>

这样浏览器在解析 HTML 阶段就开始请求图片了，比遇到 img 标签再发请求要早一个阶段。

另外检查一下：图片有没有用 WebP/AVIF 格式？文件体积多大？如果超过 200KB 就有点过分了。还有图片托管的服务器响应时间（TTFB）怎么样，CDN 该开还是要开。

width 和 height 你已经加了，这个是对的，避免布局偏移。

如果以上都做了还是不行，可以考虑把 hero 图做成 CSS 背景图然后用媒体查询在关键 CSS 里内联，不过这个改动比较大，一般不是首选方案。

2026-03-13 23:00