跳至正文
WordPress 与 WooCommerce · Google SEO

WordPress 懒加载插件与核心功能的取舍

// / / 光算科技

取舍点只有两个:原生属性够用就别装插件;页面结构复杂到原生做法覆盖不了,才考虑这类插件。判断依据是三件事——页面里有多少张图、图在首屏还是首屏之下、以及你的图是不是被 JavaScript 动态换过 src。官方文档没有给任何一款插件的效果背书,也没有公布"装了插件就能被收录"这类说法,有的只是"这么实现会不会让内容对 Google 不可见"这一层技术说明。

两栏对照:左边是原生 loading 属性覆盖到的普通静态图片,右边是插件才需要接手的动态换图与首屏主图,逐格标出各自的风险位置
原创示意:图中为原生做法与插件做法各自覆盖范围的分界,不是真实后台截图或数据。

原生做法覆盖到哪里为止

HTML Living Standard把"惰性加载属性"单列在 2.5.7 一节,和阻塞属性、获取优先级属性放在同一层通用基础设施里。也就是说,图片上那个 loading 属性是标准层面的东西,不需要谁来发明它。普通静态页面上,主题模板里给 img 加一个 loading 属性,浏览器就知道这件事了,这是成本最低的一条路。

需要说清的是版本问题:WordPress 核心在什么版本开始、由哪些场景输出这个属性,官方文档在这批可引用的页面里没有写出具体的版本边界,我不替它补。主题与插件的输出行为也会随版本变化。所以别去信"某版本必然怎样"的说法,直接看自己站点的源代码——每篇文章打开源代码搜 loading,看它到底出现在哪些 img 上,这比任何版本号都可靠。

官方担心的不是懒加载本身,是实现方式

Google 关于修复懒加载内容的说明把话说得很清楚:把非关键或不可见内容的加载推迟是常见的性能与体验最佳实践,但实现不正确时,这个技术会无意中把内容对 Google 隐藏起来。它列出的正确做法是:内容进入视口时必须加载;可以用浏览器为图片和 iframe 内置的懒加载、IntersectionObserver 及其 polyfill、或者支持进入视口即加载的 JavaScript 库,但这些方法不能依赖滚动或点击这类用户动作,因为 Google Search 不会与页面交互;不要给打开页面后很可能立刻可见的内容加懒加载。

最后一条对你做取舍最有用:首屏主图属于"不要加懒加载"那一类。所以"全站一律懒加载"这种做法,在首屏那一段是反着来的。渲染环节的机制在Google 关于 JavaScript SEO 基础的说明里:Google 处理 JavaScript 分抓取、渲染、索引三个阶段,Googlebot 抓到一个 URL 时先看是否允许抓取,解析响应里的 href 再把新 URL 加进抓取队列,随后进入渲染队列由无头 Chromium 执行 JavaScript,Google 也用渲染后的 HTML 来索引页面。

该自己配还是上这类插件

页面实际情况建议做法要核对的几项
常规静态图文,首屏只有一张主图用原生属性,主题里配一次就够首屏那张 img 上不应有 loading 属性
长图文、图多且都在首屏之下原生属性即可每个 img 都有 src 兜底
图在首屏附近来回出现仍用原生,手工排除首屏那几张排除清单要跟着页面改
图库、图集、轮播,图片数量由数据决定这一类才值得上插件首图有没有被一起纳入懒加载
图由 JavaScript 动态替换 src需要插件或自己写,但要单独验证渲染后的 HTML 里图片在不在
同一张图在一页出现多次手工挑一处懒加载即可不要让同一页同一张图出现两种加载策略

真要用这类插件,看的是它做了哪几件事,而不是它宣传省了多少流量:有没有按视口触发、有没有排除首屏、会不会改写 src、会不会顺手做别的优化(缓存、延迟加载脚本之类)。一个顺手做很多事的插件,出问题时你分不清是哪一项带来的,这类判断思路和为 SEO 关闭 WordPress REST API?先查编辑器和前台依赖里那篇是同一个:先查依赖,再决定动不动它。

什么时候干脆别管懒加载

一是图片数量本来就少、页面本来就轻,加不加差别不大。二是站点处在改版期,模板还在变,配置跟着反复推翻。三是站点已经有性能问题集中在别处——脚本、嵌入、主机响应上,那几项的收益比懒加载明显得多,该先查那些。这种排序思路在WordPress 附件页关了图片会消失吗:两种 URL 要分开检查里也是同一套:先确认问题在哪个层面,再选手段。真正需要重调时,再回到懒加载的官方边界,先把首屏和首图排除出来。

怎么确认懒加载没有把内容藏起来

官方给的验证方法是现成的:同一份懒加载说明在测试一节写明,设好之后要确认它工作正常,可以用 Search Console 里的网址检查工具看内容是否全部加载出来,并检查渲染后的 HTML 确认内容在里面。所以顺序是:先在本地把首屏那几张图排除掉;再打开渲染后的 HTML,逐张确认 img 标签和 src 都在(原始 HTML 里没有也不算失败,关键看渲染后的);最后用网址检查工具走一遍。注意官网文档本身也提醒过,JavaScript 存在与否都会进入渲染队列,而服务端输出或预渲染依然是个好主意,因为用户和抓取都会更快拿到内容。验证通过就把这份配置固定下来,别每次改版都重调一遍。