你刚给首页加了懒加载，页面秒开，用户点赞。结果两周后发现：排名掉了，流量少了，Search Console 里全是“内容未完全抓取”的警告——不是蜘蛛太懒，是你没告诉它：那些图，真有。

懒加载到底在“懒”什么？连蜘蛛一起坑了

懒加载不是“等用户看见再加载”，而是“等浏览器觉得该加载了才加载”。

它靠的是时机判断：图片离视口还有多远、滚动有没有停、设备性能够不够。但搜索引擎爬虫不滚屏、不等加载、不执行 JS——它只扫一眼 HTML 就走。你写的“懒”，它直接理解成“没有”。

常见的两种实现，命运完全不同：

  • 手写 JS 监听滚动 + data-src 替换：爬虫看到的是空 src 或占位图，正文区域一片空白。
  • 原生 loading="lazy"：Chrome 爬虫会识别这个属性，但模拟移动端抓取时，仍可能延迟加载甚至跳过部分图片。

我帮一个家居电商站排查过。他们产品页往下拉全是懒加载的实拍图+参数表格，结果 Search Console 显示“已索引，但仅抓取到首屏”。我们用 curl -A "Googlebot" 抓回来的 HTML 里，20 张产品图中只有前 3 张有真实 src，其余全是 data-src="xxx.jpg" + 一个 1x1 的透明 GIF。蜘蛛扫完就走，根本不知道下面还有 17 张图、6 段材质说明、4 条用户评价。

说白了：你优化的是人眼的等待感，而蜘蛛要的是 HTML 里的确定性。

3个必须检查的懒加载实现细节

别急着改代码。先打开你线上页面的源码，Ctrl+F 搜这三样。漏一个，SEO 就少一块。

1. 你的图片有没有保留真实 src 作为 fallback

很多插件默认这样写：

<img data-src="sofa.jpg" src="placeholder.gif" alt="沙发" />

对人来说没问题——JS 一跑，图就出来了。但爬虫只读 src，看到 placeholder.gif 就认定：“哦，这张图就是个 1x1 的透明点。”

正确做法很简单：
✅ 优先用原生 loading="lazy"，src 里直接放真实地址；
✅ 如果非要用 data-src，src 至少得是张能看清轮廓的缩略图（比如 300px 宽的低质图），不能是占位符；
✅ 再加一层 <noscript> 兜底，确保 JS 不执行时，爬虫也能拿到完整图片。

<!-- 推荐 -->
<img src="sofa.jpg" loading="lazy" alt="北欧风布艺沙发实拍" />

<!-- 退一步的写法 -->
<img src="sofa-thumb.jpg" data-src="sofa.jpg" alt="北欧风布艺沙发实拍" />
<noscript>
  <img src="sofa.jpg" alt="北欧风布艺沙发实拍" />
</noscript>

2. 文字内容千万别懒加载

见过最猛的操作：把商品详情页的“材质说明”“尺寸参数”“售后政策”全做成滚动触发加载——用户滑到哪，JS 才去接口拉哪段。

爬虫不滑屏，不点按钮，不等接口。它拿到的 HTML 里，那几块区域就是空 <div></div>。Google 一看：“标题有，导航有，正文呢？没了。” 页面质量分直接打骨折。

文字必须静态输出在 HTML 里。哪怕你用 React/Vue，也要确保 SSR 渲染时，首屏+懒加载区域的文字已经吐进源码。别信“等用户需要时再加载”——对 SEO 来说，“需要”这个词，爬虫压根不认识。

3. 懒加载的阈值设置别太抠门

loading="lazy" 的加载距离，Chrome 默认是离视口 1250px 开始下载。桌面端够用，但手机上用户一划就是半屏，1250px 可能刚出视口就触发，图还没下完人已经划走了。

JS 实现的话，建议把提前加载距离设到 1500px 以上。太小（比如 200px）的结果是：

  • 用户快速滚动时，满屏空白；
  • 爬虫模拟滚动抓取时，很多区域根本来不及触发加载，直接跳过。

宽松一点，图早下几秒，不影响首屏速度，却能让爬虫多“看”到几块内容。

怎么测试蜘蛛到底看到了什么？

别猜。打开终端或浏览器，两分钟验证一次。

方法一：用 curl 模拟原始请求
复制粘贴这行命令（把网址换成你自己的）：

curl -H "User-Agent: Googlebot" https://your-site.com/product/123

返回的 HTML 里，搜 data-src 和 loading="lazy"。如果大部分图片都靠这两个活着，且没配 noscript 或真实 src，那蜘蛛眼里就是残缺页面。

方法二：用 Google Search Console 的“网址检查”工具
进 GSC → 左侧菜单点“网址检查” → 输入链接 → 点“测试已发布的网址” → 切到“抓取”标签页 → 点“查看抓取的页面”。
这里显示的就是 Googlebot 实际存档的 HTML。重点看懒加载区域：图的 src 是真实地址吗？文字段落是不是空的？有没有 noscript 补位？

之前帮一个装修案例站查过，他们用了某款热门懒加载插件，插件默认把所有 src 都清空。Googlebot 抓到的页面，只有顶部 banner 和导航栏，下面 8 个施工案例全是一行 data-src="..."。修复后一周，首页案例入口从第五页回到第一屏。

图片懒加载的“渐进式”策略

懒加载不是开关，是分级开关。不同位置的图，蜘蛛看得见看不见，权重差得远。

  • 首屏图片（LCP 元素）绝对不懒：Hero 图、主产品图、Banner 图，必须直出 HTML，加上 <link rel="preload"> 预加载。懒了它们，LCP 时间直接拉垮，Core Web Vitals 不过关，搜索排名自动降权。

  • 首屏以下，按重要性分三档：
    ✅ 产品图 / 内容核心配图：用 loading="lazy"，src 放真实地址。蜘蛛需要靠这些图理解页面主题；
    ✅ 装饰图 / Banner 背景图：可用 data-src + noscript，或改用 CSS background-image + Intersection Observer；
    ❌ 无限滚动瀑布流图：蜘蛛基本不抓。不如在页面底部加个“加载更多”按钮，并确保前 2–3 屏的所有图都在初始 HTML 里。

有个摄影博客试过全页懒加载，首页 48 张作品缩略图全带 loading="lazy"。Google 只索引到前 18 张。改成前 12 张直出，后面才懒加载，索引率立刻回到正常水平。

视频和 iframe 懒加载的特殊处理

视频和 iframe 是重灾区——因为它们天生依赖 JS 加载，而爬虫几乎不执行 JS。

  • 嵌 YouTube/Bilibili 视频：别直接塞 iframe。先放一张高清封面图 + “播放”按钮图标，用户点击后再动态插入 iframe。爬虫看到的是图+文字描述，还能顺着 <noscript> 里的链接跳转到原视频页。
  • 自托管 MP4 视频：别用 <video preload="none"> 模拟懒加载。Google 对 <video> 标签本身不敏感，但它会认真读视频周围的文字：标题、说明段落、<figcaption>、aria-label。确保每段视频下方都有 50 字以上的关键词描述。

教训来自一个编程教程站：所有教学视频用 data-src 加载 iframe，爬虫看到的只有标题和“点击查看视频”七个字。修复后，加上封面图、文字描述、noscript 里的直达链接，视频内容开始出现在 Google 视频搜索结果里，自然流量明显提升。

今天就能执行的3步操作

现在，就打开你正在维护的那个网站，做这三件事：

  1. 检查首屏图片：打开 Chrome 开发者工具 → Network 标签 → 刷新页面 → 在过滤框输入 img → 看首屏区域的图片是否全部在 DOMContentLoaded 前完成加载。如果有带 loading="lazy" 或 data-src 的，立刻删掉，换成直出 src。

  2. 模拟蜘蛛看源码：打开终端（Mac/Linux）或 Windows PowerShell，运行：

    curl -H "User-Agent: Googlebot" https://your-site.com/any-page

    把返回内容粘贴进文本编辑器，搜 data-src。如果超过一半的 <img> 都靠它活着，马上把前 3 行（约 12–15 张）图片改成不带懒加载的静态输出。

  3. 补一个 <noscript> 兜底：找到你所有用了 data-src 的 <img> 标签，在它后面紧跟着加一行：

    <noscript><img src="刚才data-src里的真实地址" alt="刚才的alt文字" /></noscript>

    这个动作不用动 JS，不用发版，5 分钟内改完，上线即生效。

改完立刻去 Google Search Console 提交这几个 URL 的重新抓取。3–5 天后回来看“索引覆盖率”和“有效内容”统计——你会看到，蜘蛛终于把整页内容，一页不落地存进了它的数据库。