lazyLoad图片延迟加载会影响网站SEO优化吗?

张子凡 网站SEO优化 2016-04-06 08:30:52 阅读(...) 评论(7)

jQuery lazyLoad 这个对于一个网页开发者来说并不陌生,而对于普通网站的 SEOer 就未必可知了,而子凡作为一个开发、SEO 及一身的人来说,我就要来给大家普及一下这个了,也算是子凡对最近在写SEO 诊断系列文章中的一个拓展知识吧!

LazyLoad 图片延迟加载

LazyLoad介绍

Lazy Load 是一个用 JavaScript 编写的 jQuery 插件,它可以延迟加载长页面中的图片,在浏览器可视区域外的图片不会被载入,直到用户将页面滚动到它们所在的位置,这与图片预加载的处理方式正好是相反的。

在包含很多大图片长页面中延迟加载图片可以加快页面加载速度,浏览器将会在加载可见图片之后即进入就绪状态,在某些情况下还可以帮助降低服务器负担。

LazyLoad 分析

<img class="lazy" alt="" width="" height="" src="占位图片" data-original="真实图片地址" />

页面加载时就不会加载这些图片了,然后 JS 控制页面滚动时才将 data-original 中的内容填到 src 里面去。

也就是因为这个问题,所以才有了子凡今天要讨论的话题,因为搜索引擎大多对 js 的理解能力还是有限了,而搜索引擎抓取源代码的时候,它并不能正确的抓取到真实的图片地址,所以这是不利于网站图片优化的。

而如果你又是一个以图片为主的网站,如果再使用 LazyLoad 可能就会变得更不利于网站的优化了。

所以结论显而易见,lazyload 延迟加载技术不利于 SEO 的原因很简单,即搜索引擎不会像我们人使用鼠标那样,上下拖动网页。搜索引擎只会选择它看到的第一页的内容,其它的内容都是空白。这样当然是不利于 SEO 的。

使用 LazyLoad 可以对网站用户体验达到一个提升,加载速度就是最明显的了,因为使用 LazyLoad 可以在用户没看到的地方不会加载,减少了网页请求和下载,所以速度就是用户体验的重要因素之一,同样 LazyLoad 可以在一定程度上降低服务器资源,这个子凡已经在本文最开始就已经提及到了。

lazyload 对 SEO 的影响还有另外一方面,即会影响搜索引擎对网站图片的收录,图片搜索也是网站的流量来源之一。

那么如何适当的利用 LazyLoad 而不影响网站SEO 优化呢?

如果使用 LazyLoad 肯定是不可能完全不影响的,但是我们却可以适当的利用 LazyLoad 来提升网站的用户体验,LazyLoad 功能可以使用在除网站主体内容的其它图片上,也就是在网站正文中,以及首页或者频道的分缩略图中最好不要使用,像子凡这样专注于WordPress 开发的来说,LazyLoad 功能可使用在 Gravatar 头像上,以及网站侧边栏的一些图片上,这样是有利于用户体验而又几乎不影响网站 SEO 优化的了。

写在最后:lazyload 虽然对提升用户体验有好处,但是提升的效果到底有多少,是个疑问。出现延迟加载技术是为了加快网页打开速度,提高带宽利用率,但是,现在带宽越来越大,网速越来越快,移动已经到了 4G 时代,开视频都嗖嗖的,带宽这个理由,似乎已经快不成立了。

在 SEO 和用户体验提升之间,子凡觉得没有唯一答案, 因为对于网站来说 SEO 很重要,而对于用户来说,用户体验是首选,所以就像子凡提出的解决办法一样,既可以不影响网站优化,又可以提升用户体验,你学到了吗?

除非注明,否则均为泪雪博客原创文章,转载请以链接形式标明本文地址

本文链接:https://zhangzifan.com/lazyload-and-seo.html

发表评论

  1. 明月登楼的博客
    1楼
    明月登楼的博客 1年前 (2017-12-03)

    我就一直很不喜欢这个延迟加载图片的方法,感觉图片的载入跟便秘一样的载入让人很不舒服,我一般都是禁用延迟加载的!非图片站点完全没有必要用这个延迟加载的,对SEO和用户体验真心没啥好处的!

    • 张子凡
      回复
      张子凡 1年前 (2017-12-03)
      回复 @明月登楼的博客 :是的,除非是拥有较多的图片,否则都是没有太多的必要用这个懒加载。
  2. chen.web2014.cn
    2楼
    chen.web2014.cn 2年前 (2016-11-03)

    lazyload.js 延迟加载效果,有很多图片为主的网站利用这个能大大提高用户体验和服务器利用率,但是有一点不好就是对搜索引擎不友好,因为蜘蛛看到的不是真实地址,那么如何解决类似问题呢?其实这个问题可以利用js避免掉。代码如下:

    $(document).ready(function() {
    $(“img”).removeAttr(“src”);
    });
    $(function(){
    $(“img”).lazyload({effect: “fadeIn”});
    })

    页面图片写法如下

    这样效果不影响,只是利用了jQuery的便利,$(document).ready()在文档dom加载完毕就删除了src,所以不会有请求,这样就相当于在我们使用前,是利用js删除的src,而不是我们程序不输入图片。

    • 张子凡
      回复
      张子凡 2年前 (2016-11-03)
      回复 @chen.web2014.cn :感觉上去这个方法貌似还不错的样子哦
    • abc
      回复
      abc 2年前 (2016-11-19)
      回复 @chen.web2014.cn :这种方法是不行的,图片还是在后台加载了。document.ready时DOM已经建立,浏览器已经开始发送图片请求了…… 一个人不可能在DOM没有建立时就改变DOM结构,而DOM结构一旦建立,各种资源请求已经发送了,所以这个是没有解的
      • jsper
        回复
        jsper 1年前 (2017-08-06)
        回复 @abc :不用jquery的ready(),改为在html文档的末尾写javascript,将src赋值给一个自定义属性,然后将src清空。这时,浏览器就不会请求了,因为浏览器会逐行初始化HTML标签,遇到script时也会立即执行,在执行后才会确定最终要加载的资源。然后给滚动条添加事件,滚动到相应位置,需要显示图片时,再将自定义属性的值重新赋值给src。
        • 张子凡
          回复
          张子凡 1年前 (2017-08-07)
          回复 @jsper :那么还是有一个问题,javascript放在文档末尾,其实整个页面的src都已经载入了,再去移除已经变得没有意义了。如果要做,是把img定义一个其它属性并赋予图片URL,然后通过滚动访问把这个值载入到src