Speed Index分数高但用户感知加载慢，如何优化？

UP主～莉莉提问于 2026-02-15 17:29:26 阅读 10

前端

我在优化电商商品页时，通过压缩图片和合并CSS把Speed Index从6.8秒降到4.2秒，但用户反馈详情图还是卡顿加载。Lighthouse报告显示视觉完成时间4.8秒，但实际打开页面时商品主图要等8秒才显示完整，这是怎么回事？

尝试过用标签的loading=”lazy”和设置了width/height属性，但Chrome开发者工具的Coverage面板显示图片资源加载时间确实提前了。代码结构是这样的：


<div class="product-detail">
  <img 
    src="placeholder.jpg" 
    data-src="large-product.jpg" 
    class="lazyload" 
    width="800" 
    height="1000">
</div>

用IntersectionObserver实现懒加载后反而更慢了，控制台也没有报错，这种视觉加载延迟该怎么定位和解决？

性能指标

我来解答赞 2 收藏

反馈

1 条解答

UI婧妍 Lv1

你这问题主要是懒加载的时机和图片解码的问题，我遇到过类似的情况。先说结论：把懒加载换成提前加载关键图片，并且确保图片解码完成后再显示。

拿去改改，直接上代码：

<div class="product-detail">

  <img 

    src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 1000'/%3E" 

    data-src="large-product.jpg" 

    class="preload-image" 

    width="800" 

    height="1000"

    style="display: none;">

</div>



<script>

document.addEventListener('DOMContentLoaded', () => {

  const productImg = document.querySelector('.product-detail .preload-image');

  

  // 提前加载关键图片

  if (productImg) {

    const img = new Image();

    img.src = productImg.dataset.src;

    img.decode().then(() => {

      // 图片解码完成后替换占位符并显示

      productImg.src = img.src;

      productImg.style.display = 'block';

    }).catch(() => {

      console.warn('Image loading failed, fallback to placeholder.');

      productImg.src = 'placeholder.jpg';

      productImg.style.display = 'block';

    });

  }

});

</script>

关键点解释一下：
1. 把 src 换成一个透明的 SVG 占位符，避免浏览器浪费时间加载无用的占位图。
2. 用 Image.decode() 提前解码大图，等解码完成再切换显示，这样用户看到的就是完整图片，不会有卡顿感。
3. 把图片隐藏起来，等加载完成再显示，避免未加载完的图片闪现。

另外，检查下你的服务器是不是启用了 HTTP/2 和 Brotli 压缩，这些对图片加载速度也有影响。如果图片特别大，建议生成 WebP 格式的副本，现代浏览器基本都支持了。

最后吐槽一句，Lighthouse 的分数有时候真不一定靠谱，还是得看实际用户体验。

2026-02-15 23:26