为什么我的页面用了懒加载图片，Performance Score还是低？

懒加载确实能省流量，但对LCP基本没啥帮助，甚至可能拖后腿。WP里面这种情况很常见，特别是产品展示这种重图片的页面。

问题出在几个地方。第一，你那些大图每张都1MB，就算用了WebP还是太大。建议用add_image_size()重新生成合适的尺寸，比如给产品图专门加个800px宽的版本，别直接用原图。代码可以这么写：

function custom_theme_setup() {

    add_image_size('product-large', 800, 0, false);

}

add_action('after_setup_theme', 'custom_theme_setup');

然后记得在模板里调用这个尺寸：wp_get_attachment_image($id, 'product-large');，别手写img标签。

第二，loading="lazy"对首屏图片反而有害。你应该把首屏关键图片设置成eager加载，而且要用fetchpriority="high"来提升优先级。可以用下面这个方法自动处理：

function optimize_lcp_image($html, $id, $size, $attr) {

    if (is_product()) { // 假设是产品页

        $html = str_replace(' loading="lazy"', ' loading="eager" fetchpriority="high"', $html);

    }

    return $html;

}

add_filter('wp_get_attachment_image_attributes', 'optimize_lcp_image', 10, 4);

第三，字体文件阻塞的问题也好解决。在functions.php里加上这句：

function defer_fonts($tag, $handle) {

    if (strpos($handle, 'google-fonts') !== false) {

        return str_replace("rel='stylesheet'", "rel='preload' as='style' onload="this.onload=null;this.rel='stylesheet'"", $tag);

    }

    return $tag;

}

add_filter('style_loader_tag', 'defer_fonts', 10, 2);

最后提醒一下，别光盯着图片优化。WP自带的一些东西也可能拖慢速度，比如没用的插件、臃肿的主题函数之类的。建议用Query Monitor查查有没有其他性能瓶颈。

这些改完再跑下Lighthouse，应该能看到明显提升了。我之前遇到类似情况，就是这么一步步调优的。

loading="lazy"和Intersection Observer只是图片懒加载的，但真正影响LCP的往往不是这个。你提到图片有1MB左右，这个体积才是真正拖慢Largest Contentful Paint的主因。

Lighthouse评分机制里，LCP计算的是页面最大内容渲染完成的时间，而大图加载时间直接决定这个指标。即使你用WebP压缩，如果图片尺寸过大，浏览器还是要花时间下载和渲染。

可以试试这样：

使用srcset和sizes属性，让浏览器根据屏幕尺寸自动选择合适的图片大小

<img src="large-image-1.jpg"

     srcset="large-image-1-300.jpg 300w,

             large-image-1-600.jpg 600w,

             large-image-1-900.jpg 900w"

     sizes="(max-width: 600px) 100vw, 50vw"

     loading="lazy"

     class="product-img">

图片压缩可以更激进一些，1MB的图片通常都能压到300KB以内而不明显降质

给img加个loading="lazy"的同时，可以配合优先加载前几屏图片，比如用Intersection Observer预加载

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

  entries.forEach(entry => {

    if (entry.isIntersecting) {

      const img = entry.target;

      img.src = img.dataset.src;

      observer.unobserve(img);

    }

  });

}, { rootMargin: '0px 0px 200px 0px' });



document.querySelectorAll('.product-img').forEach(img => {

  observer.observe(img);

});