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

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

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

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

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

<script>

$(document).ready(function() {

    $("img").removeAttr("src")

})

$(function(){

    $("img").lazyload({effect: "fadeIn"})   

})

</script>

页面图片写法如下

<img src="1.jpg" data-original="1.jpg" alt="">

<img src="2.jpg" data-original="2.jpg" alt="">

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

1、减少请求次数

2、减小资源大小

3、提高响应和加载速度

4、优化资源加载时机

5、优化加载方式

1、合并、压缩、混淆html/css/js文件（webpack实现，减小资源大小）

2、Nginx开启Gzip，进一步压缩资源（减小资源大小）

3、图片资源使用CDN加速（提高加载速度）

4、符合条件的图标做base64处理（减小资源大小）

5、样式表放首部，JS放尾部（JS单线程，会阻塞页面；资源加载方式）

6、设置缓存（强缓存和协商缓存，提高加载速度）

7、link或者src添加rel属性，设置prefetch或preload可预加载资源。（加载时机）

8、如果使用了UI组件库，采用按需加载（减小资源大小）

9、SPA项目，通过import或者require做路由按需（减小资源大小）加载

10、服务端渲染SSR，加快首屏渲染，利于SEO

11、页面使用骨架屏，提高首页加载速度（提高加载速度）

12、使用 JPEG 2000, JPEG XR, and WebP 的图片格式来代替现有的jpeg和png，当页面图片较多时，这点作用非常明显

13、使用图片懒加载-lazyload

---