经验总结：测试与灰度验证

使用 JavaScript 监听滚动事件或使用 Intersection Observer API，在图片进入可视区域时，将 data-src 的值赋给 src

注意：为了确保搜索引擎能正确抓取，建议在 nosc💡ript 标签内放置一份包含完整 img 标签的备用版本

关键细节：图片属性与结构化🎆标记 即使实现了懒加载，图片本身的优化也不可忽视

推荐方案：渐进增强 + 蜘蛛兜底

然而，百度蜘蛛在爬取页面时，普遍对 JavaSc🎆ript 渲染的支持有限

遵循这一原则，结合原生属性与备用标💎签，即可在性能与收录之间找到平衡

理解懒加载与搜索引擎的冲突点

理解懒加载与搜索引擎的冲突点 图片懒加载的基本原理是：页面初始加载时，只渲染可视区域内的图片，其余图片的 src 属性被替换为占位图或 data 属性，只有当用户滚动到相应区域时才会真正加载原图

常见误区提醒

这是 HTML5🔑 的原生懒加载支持，虽然百度蜘蛛目前对此属性的兼容性尚不明确，但它对用户侧浏览器性能优化有明显帮助，且不会对 SEO 造成负面影响

不要为了 SEO ⭐而给所有图片强行添加 title

如果使用 SPA 或动态渲染，务必保证服务端渲染（SSR）输出完整的图片结构