首屏以下有 14 张 640 像素宽的图,Network 面板显示首屏就全部下载完,多出 1.8MB,LCP 从 2.1 秒涨到 3.9 秒,图片标签上没有 loading 属性。第一次遇到会往复杂处想,其实漏掉的多是个小前提。

document.querySelectorAll('img:not([loading])').length
// 返回大于 0 就是有漏网的
<img src='a.jpg' loading='lazy' decoding='async' alt=''>

构建器默认只给部分图片加懒加载,背景图和自定义 HTML 模块里的 img 不会被处理。主题又关掉了 WordPress 原生 lazy,两边都没兜住。这一点先确认清楚,后面就不用反复试。

「Elementor 图片懒加载缺失」这个问题文档写得含糊,实际行为以当前版本为准,别照旧版本的结论套。临时改动用注释写上日期和原因,过两周自己都记不清为什么这么写。

动手前把原文件复制一份带时间戳,出问题立刻换回去,比现场分析快得多。一次只改一处,改完立刻验证,几个改动叠在一起,出问题就说不清是谁导致的。

具体做法是,在控制台筛出首屏外的 img,看有没有 loading=lazy;给自定义 HTML 和背景图补上 loading 与 decoding 属性;首屏那张大图不要加 lazy,改成 fetchpriority=high。

改完照着核一遍,首屏以下图片滚动到附近才请求,首屏传输量减少 1.5MB 以上。

作者 9823189