移动端 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 元素来排。改动前把原配置备份一份,出问题能马上回滚,这比任何技巧都实用。

作者 9823189