这个坑值得记一笔。首屏大图用 CSS background-image 输出，Lighthouse 的 LCP 报 3.4 秒，页面 head 里的 preload 写了却没有任何效果。
刚开始盯着「背景图没进 srcset，移动端加载了 2400px 的桌面图」，折腾了半个多小时，排掉了。
这类报错背后常见的原因有几处，逐个排除就行。预加载扫描器只解析 HTML 标签，CSS 里的背景图发现得晚；preload 的 as 写成 image 但 href 指向的是 CSS 文件；关键样式被拆成两个文件，要等第二次请求才拿到。
第一件事是确认首屏 LCP 元素是什么
curl -s https://www.example.com/ | grep -o 'background-image:url([^)]*)' | head给真实图片地址加预加载
add_action('wp_head', function(){ echo '<link rel="preload" as="image" href="/img/hero.webp" fetchpriority="high">'; }, 1);然后改成 img 标签并带 srcset
sed -i 's#<div class="hero"></div>#<img src="/img/hero.webp" srcset="/img/hero-640.webp 640w, /img/hero-1280.webp 1280w" alt="">#' index.html剩下的就是确认图片实际大小
curl -sI https://www.example.com/img/hero.webp | grep -i content-length这次没动代码，只在配置和运行环境上找原因。
隔了一天再看，现象没变，说明不是偶发。
改完先别撤，确认这几项。Lighthouse 的 LCP 从 3.4 秒降到 2.2 秒以内，字段数据里同一批 URL 的 LCP 分位值四周内回落。
容易忽略的是，背景图不是不能用，问题在发现时机，preload 的 href 必须指向图片本身而不是样式表。这类问题最好一次改到位，反复小改反而容易把原因搅混。