移动端 LCP 稳定在 2.8 秒,报告里指认的元素是首屏那张 1600 像素宽的封面图。图片已经转成 webp,体积仍有四百多千字节。
把日志和配置对完,能解释这个现象的基本就这几处。首屏图没有预加载,要等样式解析完才被发现。另一种情况是图片尺寸远超实际展示宽度,白白浪费带宽。
另外,图片托管在第三方,多了一次域名握手。
上来先确认 LCP 元素与加载耗时
curl -sI https://www.example.com/cover.webp | head -5
给首屏图加预加载
<link rel="preload" as="image" href="/cover.webp">
末了按展示宽度生成多尺寸图
wp media regenerate --image_size=large
这台环境是别人交接的,不少默认值被动过,只能一项项核。
同事提醒我看一下最近一次发布,时间点确实对得上。
改完先别撤,确认这几项。LCP 降到两秒以内,首屏图不再排在最后才被发现。
容易忽略的是,预加载只对首屏第一张图有意义,给所有图片都加 preload 会抢带宽,把真正关键的资源挤到后面,优先级要按 LCP 元素来排。改动前把原配置备份一份,出问题能马上回滚,这比任何技巧都实用。