懒加载这两年用得特别普遍，图片不一次性加载，滑到哪儿加载哪儿，省流量还快。出发点是好的，但很多人做粗糙了，结果把蜘蛛坑得够呛。
问题出在哪儿。标准的懒加载，图片真实地址是放在 data-src 这类自定义属性里的，src 里先放一个占位的小图或者干脆留空。等 JS 判断图片进入视口了，再把 data-src 的值挪到 src 上，图片才真正开始加载。用户的浏览器跑得起 JS，看不到区别。但搜索引擎的爬虫不一定跑 JS，它看到的就是 src 里那个占位图，或者一片空白。它以为你页面上的图都是摆设，自然就不收录你的图片了。
我有个做图库站的客户就栽在这上面。站里几千张图，全上了懒加载，结果图片搜索的流量几乎为零。他一查源码才发现，蜘蛛抓到的全是占位图。我帮他把首屏的图片改成正常加载，非首屏的懒加载补上 noscript 兜底，几个月后图片流量才慢慢起来。
那怎么改才对。第一，首屏的图片别懒加载。首屏是用户第一眼看到的，也是蜘蛛最可能抓到的，老老实实正常加载。懒加载留给下面那些要滚动才露脸的图。第二，noscript 里要给个兜底。万一浏览器不跑 JS，noscript 里放上真实的 img 标签，蜘蛛至少能看到真实地址。第三，能用原生懒加载的就用原生的，浏览器自带的 loading="lazy" 属性，搜索引擎识别起来友好得多，别自己写一堆 JS 判断。
还有个细节，懒加载别用 JS 动态插入整个 img 标签。有些实现是等滚动到了，用 JS createElement 一个 img 出来，这样蜘蛛压根看不到这个标签的存在。宁可先写上 img 标签，只把 src 换掉，也别让它凭空出现。
验证方法很简单。把浏览器的 JS 关掉，打开你的页面，看看图片能不能显示。如果全是空白，那你的懒加载就做过头了。这一步我每次上线前都会做一遍，花两分钟，能避免很多麻烦。
—— 来自 挖的客 - 优秀网站分类目录 的分享