如何做到优化引擎搜索SEO之第八篇：懒加载图片（调整翻译）

前文：《如何做到优化引擎搜索SEO（有HTML，关键字，Ajax，url，内容顺序等）》

英文原文来源：clickhelp博客

英文原文：Online Documentation and SEO. Part 8 - Lazy-Loading Images

下文均为翻译+自己的注解和想法
（所有ClickHelp打广告部分用浅灰色注解）

---

翻译：

　　
　　对于任何人来说移动互联网可能相当缓慢这种现象不是一个秘密。页面加载速度对于面向移动的页面非常重要。另外Google不是使用网站速度作为SEO因素的秘密。此外，众所周知，如果在3秒钟内没有打开网站，人们往往会离开网站。正如你所看到的，有很多理由来提高页面加载速度。

提高网站性能
　　有很多方法来提高网页的性能。但是，降低内容大小和请求数量可能是您首先应该做的事情。或，第二，第一步是启用服务器端的流量压缩和缓存，但这些都是微不足道的事情，没有创造性的方法。
　　如果您的网页很重，可能会有很多漂亮的图片，而且您不想删除这些图片，以提高网页加载速度。但是，如何减少您的网页初始加载时间，下载的内容大小和请求数量 - 一体化，而不删除那些漂亮的图片？
　　当网页打开时，访问者只看到它的第一部分。他们没有看到下面的东西。如果您能告诉浏览器不要从服务器加载这些图像，直到需要显示它们呢？那些可能是大屏幕截图或小图标 - 如果你有很多它们，它们都是速度杀手。解决方案是按需加载图像，或者像他们所说的那样懒惰加载图像。
　　
处理图像-典型方法
　　有几种延迟加载图像的方法，但一般想法总是相同的：您可以以某种方式更改标记，使其成为下一折图像，这对于第一次加载不是必需的，默认情况下隐藏。然后，你处理window.onscrollJavaScript中的事件 当页面滚动并且图像应该变得可见时，您会做一些魔术，使浏览器加载它。
　　在我们开始之前，这里是SEO方面的一个重要的注意事项：延迟加载的图像：本文中描述的方法都不能提供正确的图像索引。然而，我们推荐的方法与其他方法不同，允许具有禁用脚本的人员看到图像。此外，它让抓取工具有机会看到图像，如果他们曾经打扰索引背景图像。但是，有一个单独的图像索引解决方案：您可以使用图像站点地图强制网络爬虫索引您的图像。因此，首先，您需要确定要延迟加载的图像对于您的网站很重要，以及图像站点地图是否为您可接受的解决方案。这一切都取决于您的具体情况，但网页性能差的负面SEO效果可能比非索引图像的效果更显着。

如果你还在阅读这篇文章，你似乎认真对待懒加载的方法。OK，Good!所以，这里是实现延迟加载时最常见的魔术技巧。
　
　
- 自定义属性来存储图像URL

　　在HTML标记中，为图像url使用自定义属性，而不是将其放在 SRC属性。然后设置SRC属性从JavaScript到使浏览器加载图像。我们来看一个例子。

　　假设您的页面上有图像：

<img src="/images/screenshot.png"/>

　　为了使它懒加载，您将上面的代码行转换为

<img src="/images/blank.png" data-src="/images/screenshot.png"/>

　　该 SRC 属性指向一个空的图像只是为了使标记有效。

　　当您需要显示图像时，您的脚本只需分配该值即可 数据-SRC （或任何）属性 SRC属性。在运行时你会得到这样的东西：

<img src