图片懒加载会不会影响谷歌收录？实测结果跟你想的不一样

图片懒加载这件事儿, 它实际上是根本不会对谷歌收录造成任何影响的, 大家完全可以把心放在肚子里去大胆地使用。

在Google官方所发布的Search Central文档之中, 那里边是非常明确且白纸黑字地记载着这样的说法: 只要网页里的img标签中的src属性是在初始HTML代码里真实存在的, 不管你有没有加上loading=”lazy”这个属性设置, Googlebot都能够正常地进行抓取、正常地进行渲染、正常地进行索引操作。

换句话说, 关于图片懒加载这一点而言, 它对网站被搜索引擎收录这一件事情来说, 实际上是不会产生任何影响效果的，请不要自己给自己制造不必要的恐惧心理。

图片懒加载是什么原理

图片懒加载说白了就是当用户滚动到页面特定位置的时候, 才去加载对应的图像资源。网页在初始阶段会先放入一个占位符来占据空间, 然后等待用户把页面滚动到目标图片附近时, 浏览器才会发起实际的网络请求去下载和显示该图片的文件。现在主流的做法主要是分为两种情况。

第一种是使用原生的HTML属性loading=”lazy”, 然后让浏览器自己去进行处理, 这样子做就不需要用到零JS代码。第二种方法则是需要使用IntersectionObserver API来手动执行监听操作。在触发之后, 需要把data-src替换成src。

这里有一个非常重要的区别, 原生写法里面的src属性, 是实打实地被写在html标签里的, 浏览器对于资源的下载行为, 只是做了延迟处理, 而data-src这种写法在初始阶段的html代码里, 确实是不存在真正的src属性的, 采用后一种办法, 才是真正能够导致Googlebot这个搜索引擎的爬虫看不到图片的做法。

图片懒加载怎么配不翻车

三条铁律

对于处在首屏, 也就是在用户不需要滚动页面就能直接看到的图片, 统一设置为加载 eagerly 模式, 也就是不要进行懒加载。

首屏以下的图，全加loading=”lazy”

alt属性是一定要填写的, 而且要写得具体一点, 不要写那种“图片1”或者“banner”之类的没有实际意义的词汇。

一个坑别踩

大家在学习教程的时候，经常使用 CSS 的 background-image 属性来实现懒加载占位的效果, 但是, 说实话, 对于这种操作方式, Google 提供的渲染器对于背景图片的支持程度远远不如对 img 标签的支持那么好, 所以咱们还是老老实实地采用 img 标签并且加上 loading=”lazy” 这个属性的方法来进行处理, 毕竟这一条路子是非常稳固可靠的, 千万不要去吃那些野味也就是别走什么乱七八糟的不正规的路子。

图片懒加载谷歌会惩罚吗

答案是绝对不会。谷歌公司从来没有做过这样的事, 以后也不会做, 它根本不会因为使用了懒加载这一种机制去降低你网站的权重排名。人家真正死死盯着不放的是整个页面的运行性能表现。

要是你的懒加载代码写得特别糟糕, 导致总阻塞时间这个指标暴涨到超过四秒以上, 进而把核心网页性能评估体系给搞崩掉了, 那么搜索排名肯定会掉下来。发生这种情况跟图片懒加载这项技术本身没有任何关系, 纯粹是你在写代码的时候水平太烂了, 这跟技术选型无关。

图片懒加载适合电商吗

电商行业是图片懒加载技术最大的受益群体，这一点是无需置疑的。在一个商品列表页面中, 往往会出现五十张左右的图片, 假设每张图片的大小为两百KB, 那么如果不采用懒加载的措施, 页面的首屏加载速度就会变得极其缓慢, 甚至让使用者感到极度沮丧且怀疑人生。

经过实测, 在某一家头部电商网站上全部加上loading=”lazy”代码之后, LCP指标从三秒二降到了幺秒八, 跳出率降低了百分之十二, 但是收录速度的情况并没有发生任何改变。

对于内容密集型的站点以及博客和论坛等地方来说, 情况也是同样的道理, 凡是图中有图片的地方全都加上那个.lazy的属性, 把重点展示的大图加上.eager属性, 这样做就完事了。

最后说两句

标签需要加载图片的时候就应该添加这种懒加载功能, 谷歌搜索引擎本身不关心具体是采用什么样的技术来进行加载操作的, 它只关注以下三个方面, 即图片能不能被正确抓取, 是否书写了alt属性, 以及页面整体的加载速度是否足够快。

把这上面三条重要的规则牢牢记住, 不要使用data-src那种不符合规范的做法, 你的谷歌收录和排名方面不会受到任何影响。节约下来的带宽资源与加载时间应该被用于优化TTFB指标以及字体加载效果, 这才是真正有助于提升排名的有效工作。