你有没有试过：页面排名刚爬上去，用户点进来却卡在白屏？等图片慢慢加载完，人早划走了。更糟的是，Google 爬虫压根不等——它扫完首屏就走，看到一堆空 img 标签，直接给你打个“内容不足”的标签。

这真不是玄学。懒加载本身没错，错的是我们常把它做成“对用户友好、对爬虫失联”的单向操作。

为什么你的懒加载总被 Google 忽视？

懒加载最典型的写法是：src 先写成占位图或空值，滚动到位置再用 JS 把真实地址塞进去。用户感知不到问题，但爬虫根本不会滚屏，也不会执行你那段等滚动才触发的 JS。

它只读两样东西：原始 HTML 和首屏渲染后的 DOM。如果你的真实图片路径藏在 data-src 里、JS 变量里，或者靠 scroll 事件才写进 src，那爬虫眼里就是 50 个没内容的 <img>。

之前帮一个电商站做诊断，首页轮播图全用了这种 JS 懒加载。Google Search Console 里抓取截图全是灰色方块。改成 loading="lazy" + src 直写真实路径后，一个月内首页关键词从搜不到前几页，稳进了第2页。

3个方法让懒加载既快又不伤SEO

方法一：用原生 loading="lazy" 替代自定义脚本

2020 年起，Chrome、Firefox、Safari 都支持 loading="lazy"。你只需要这样写：

<img src="product.jpg" loading="lazy" alt="黑色真皮手提包">

浏览器自己判断何时加载，但 src 始终是真实地址。爬虫一打开 HTML 就能看见图在哪，用户滑到才下载——不用写一行 JS，还更省资源。

它不适合需要复杂交互动效的场景（比如视差滚动），但对文章页、商品列表、博客配图，完全够用。

方法二：用 Intersection Observer，但别动 src

非要自己写懒加载？那就守住一条线：HTML 里的 src 必须是真实路径，JS 只管“什么时候让它可见”。

做法很简单：图片默认用 CSS 隐藏（比如 opacity: 0 或 height: 0），等 Intersection Observer 检测到进入可视区，再加个类让它淡入或展开。爬虫照常读到 src，用户也感受不到首屏卡顿。

有个摄影博客就是这么改的。每篇配30张高清图，改完后页面加载快了不少，Google 收录的图片数也翻了倍。顺带提醒一句：alt 别空着，这是爬虫理解图的关键。

方法三：首屏图片，坚决不懒加载

新手最爱犯的错：全站所有 img 都加懒加载。结果用户点开页面，第一眼看到白屏；爬虫扫完首屏，发现连主图都没有，直接判定“内容稀薄”。

首屏（通常指前2~3屏）的图，该加载就加载。你可以用 loading="eager" 明确告诉浏览器“立刻下”，或者干脆不加 loading 属性——浏览器默认就是 eager。

怎么判断哪些图在首屏？打开 Chrome DevTools → Lighthouse → 运行“Performance”报告，看“Largest Contentful Paint”元素，那些就是首屏核心图。

移动端图片加载慢，懒加载是解药还是毒药？

4G 信号不稳、流量有限、屏幕小——移动端用户比桌面更需要懒加载。但 Google 移动优先索引的爬虫，同样不会滚动、不会等 JS。

之前测过一个美食教程站，每篇有20张步骤图。一开始全量加载，4G 下首屏要等8秒以上；后来保留 src，加上 srcset 做响应式适配，再配合 loading="lazy"，首屏快了不少，LCP（最大内容绘制）指标也明显好转。

注意：别用 display: none 或 visibility: hidden 隐藏待加载图。这两种方式会让浏览器跳过下载，爬虫也可能忽略。换成 opacity: 0 或 height: 0 + overflow: hidden，图还在 DOM 里，只是看不见。

你的懒加载代码真的被爬虫执行了吗？

别光在 Chrome 里点“检查”看效果。爬虫不是浏览器，它不模拟滚动，也不保证执行你的 JS。

验证方法很直接：
→ 打开 Google Search Console → “网址检查工具” → 输入页面 URL → 点“测试实时 URL” → 查看“已抓取的页面”截图。
如果图还是占位符，说明爬虫没拿到真实 src。

常见坑还有两个：

  • 懒加载 JS 用了 async 或 defer，但加载失败时，图永远不出现；
  • 脚本依赖 scroll 或 click 事件，爬虫根本不触发。

建议把懒加载逻辑内联在页面底部，或用 <link rel="preload"> 提前拉关键脚本。再加一层保险：每个 img 后面跟一个 <noscript>，里面放个不带懒加载的备用图。

视频懒加载比图片更坑，你中招了吗？

视频更麻烦：很多站用 JS 动态插入 <video>，或者只靠 poster 图片撑场面。结果爬虫连 <video> 标签都看不到，更别说理解内容。

正确姿势是：<video> 写死在 HTML 里，src 或 <source> 里填真实地址，加上 preload="none"。这样爬虫能读到结构，用户点播放才开始下载。

之前优化一个编程教程站，他们视频页全是 JS 创建的 video 元素。Google 只收录了标题和文字，视频从没出现在视频搜索里。改成静态 <video> + preload="none" 后，视频搜索流量明显提升。

额外提醒：给视频加 <track kind="captions"> 字幕文件。爬虫读不懂画面，但能读懂字幕文字——这对理解视频主题，比任何懒加载技巧都管用。

今天就能执行的懒加载SEO检查清单

别等大改版，现在打开电脑就能做：

第一步：打开你网站任意一个文章页，右键 → “查看网页源代码”，搜索 <img。确认首屏内的图，src 都是真实路径，没有 data-src 或空值。有就马上改。

第二步：登录 Google Search Console → “网址检查工具” → 粘贴这个页面链接 → 点“测试实时 URL” → 拉到下方看“已抓取的页面”截图。如果图是空白或占位符，说明懒加载逻辑需要调整。

第三步：给所有非首屏的 <img> 加上 loading="lazy"。如果你用的是 WordPress，插件“Lazy Load by WP Rocket”或主题自带的选项就能一键开；如果是静态站，直接在模板里批量加。首屏图一定跳过这步。

做完这三步，懒加载就不再拖 SEO 后腿。之后定期看 Search Console 的“核心网页指标”报告，重点关注 LCP 和 CLS，确保新方案没带来布局偏移或加载延迟。