为什么优化了图片大小，LCP还是不达标？

FSD-海淇提问于 2026-02-07 14:38:29 阅读 43

工具

我在用Lighthouse测试页面性能时，LCP分数一直卡在80多分，关键资源显示是首页的轮播图。之前已经用Webpack的ImageMinimizerPlugin压缩过图片了，lqip和延迟加载也都配置了，但报告里那个图片还是需要3秒才加载完。是不是还有哪里没优化到？


// webpack.config.js里的图片优化配置
new ImageMinimizerPlugin({
  minimizerOptions: {
    plugins: [
      ['mozjpeg', { quality: 80 }],
      ['pngquant', { quality: [0.6, 0.7] }]
    ]
  }
}),

测试页面用的是懒加载和自适应图片：


<img 
  data-src="/images/banner.jpg"
  sizes="(max-width: 600px) 100vw, 600px"
  srcset="
    /images/banner-200.jpg 200w,
    /images/banner-400.jpg 400w,
    /images/banner-800.jpg 800w"
  class="lazyload"
>

但Lighthouse还是显示这个图片占用了2MB，LCP得分提不上去，是不是图片格式选错了？或者服务器配置有问题？

LCP指标

我来解答赞 6 收藏

反馈

1 条解答

皇甫珍珍 Lv1

图片优化确实容易踩坑，光靠Webpack的ImageMinimizerPlugin是不够的。你这个情况我以前也遇到过，问题可能出在两个地方：

1. srcset里用的全是JPEG格式，这种格式在压缩率和加载性能上都不是最优解。建议把 banner-800.jpg 改成 WebP 格式，这样在相同画质下体积能小40%左右。WebP现在兼容性已经很好了，主流浏览器都支持。

2. 服务器配置可能没开Gzip或者Brotli压缩，这个配置完能再减少30%传输量。你可以在Nginx配置里加上：



location ~ .(jpg|jpeg|png|webp)$ {

    gzip on;

    brotli on;

    ...

}

另外懒加载的使用方式也有点问题，LCP评分图片不应该懒加载。轮播图这种首屏关键资源应该优先加载，去掉lazyload类，再加个loading="eager"属性试试。

最后建议用标签的srcset配合

2026-02-07 15:00