问题出现得很突然，日志倒是留得挺全。移动端模板用 flex order 把商品主图排到参数表之后，实际渲染在第 4 屏。Lighthouse 12.2 报 LCP 5.2 秒，优化图片本身没有任何效果。
刚开始盯着「参数表里的长文本成了首屏最大元素，但它是异步渲染的」，折腾了半个多小时，排掉了。
排查方向其实有限，先把可能性排一排。LCP 取的是视口内最大元素，位置一变统计对象就变了。少数情况下是主图用了 lazy，进入视口才开始下载。
不容易想到的是，主图用背景图实现 统计不到 但用户看到的最大块确实是它。
先确认 LCP 元素到底是哪一个
new PerformanceObserver(l => l.getEntries().forEach(e => console.log(e.element))).observe({type:'largest-contentful-paint',buffered:true})随后把主图移回 DOM 前面并取消懒加载
<img src="/img/p1.webp" width="750" height="750" fetchpriority="high">给首屏容器固定高度避免跳动
.hero{min-height:420px;contain:layout;}复测三次取中位数
npx lighthouse https://www.example.com/p/1 --preset=perf --form-factor=mobile怎么算真的好了，看的是同一批现象。调整 DOM 顺序后 LCP 元素变成主图本身，三次实测的中位数从 5.2 秒降到 2.1 秒，移动端体验分回到 78。
补一句。用 order 改变视觉顺序而 DOM 顺序不变时，LCP 统计的仍是 DOM 里那个大块，改动前先确认元素身份再谈图片优化。如果同一现象隔几天又出现，说明根因没找到，别当偶发处理。