给所有 img 统一加上 loading lazy 之后 首屏那张只有 190KB 的 banner 也从 2.1 秒拖到 5.4 秒 Lighthouse 直接点名说它就是 LCP 元素 结果和自己想的完全相反。乍看像缓存或者权限的锅，追下去往往不是。
curl -s https://example.com | grep -c 'loading=lazy' npx lighthouse example.com --preset=desktop --view
追下去是这么回事：懒加载会把图片的请求优先级压得很低 首屏图明明在视口里 也要等排版完成甚至滚动事件才触发 白白多出好几百毫秒。
碰到「首屏图片懒加载」这类问题，我习惯先把当前配置原样备份一份，改坏了立刻换回来，不用现场推。接口问题先分清是没发出去、发出去了没收到，还是收到了处理失败。
偶发问题先统计频率，一小时几次和一天一次，查法完全不同。
具体做法是，首屏第一张图去掉 loading lazy 保持浏览器默认的立即加载；折叠线以下的图片才加 lazy 按视口位置划清加载界限；首屏图再加 fetchpriority high 让它在网络请求队列里排到前面去。
验收就看一点，首屏图请求紧跟在 HTML 之后发出 LCP 回到 2 秒出头 折叠线以下仍是懒加载。