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

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

英文原文：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="/images/screenshot.png" data-src="/images/screenshot.png"/>

　　这是一个很好的解决方案吗？不，这就是为什么在浏览器中禁用JavaScript的Web抓取工具和访问者（有些人说他们不存在，但是我们上周看到其中一个）如果您这样做，将永远不会看到您的图像。此外，可能会违反您的标记创建规则来使用自定义属性。此外，总是有机会不起作用（例如不支持data属性的旧浏览器），因为官方支持自定义“数据”属性仅在HTML 5中引入。

使用不可见的div元素。

　　将图像转换为不可见的DIV，并将原始图像设置为背景。然后在需要时使这些DIV可以从JavaScript中看到。我们来看看这个方法的细节。所以，令人伤心的是我们不能简单地阻止浏览器下载这样的图像：

<img src="..."/>

　　已经做了许多实验来证明这一点。但是，如果将图像设置为DIVdisplay:none，这样可以工作，浏览器不会下载图像！我们来看一个例子。

　　假设您的页面上有图像：

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

　　为了要实现懒惰加载，你可以将它转换为这样的东西（是的，内联样式不错，他们只是为了简单起见）：

<div style="display:none; background-image:url('/images/screenshot.png');width: 500px; height: 300px">
</div>

　　当您需要显示图像时，只需通过更改样式，使DIV元素从JavaScript可见。在运行时你会得到这样的东西：

<div style="display:block; background-image:url('/images/screenshot.png');width: 500px; height: 300px">
</div>

　　现在，它只是标准的HTML标记，没有自定义的东西。你觉得这个解决方案好吗？好吧，不行。与以前相同的问题：您的图像无法使用JavaScript。此外，如果您使用Google PageSpeed Insights检查此页面，您将看到它仍然会考虑到大图像引起的所有负面页面速度效应，就像在一开始就加载一样。至少这篇文章写的时候确实有这样的表现。这意味着即使您的网页在浏览器中加载的时间较少，Google也不会为此提供额外的SEO积分。此外，当隐藏的DIV出现时，您的页面内容将“跳出来”，因为它的原始大小为零 - 这对访问者来说不是一件好事。

处理图像-推荐方法

　　所以我们一下子想要一切：

改善网页浏览器中的网页加载时间。
从Google获得更好的SEO排名。
使图像可见，禁用JavaScript

　　你认为我们想要太多吗？Nah，这是可能的！要做到这一点，我们需要稍微修改方法2。以下是具体步骤。

1.准备内容。
　　将图像转换为具有背景的DIV。就是得到这个代码行：

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

　　将其转换为此表单：

<div class="lazyImg" style="background-image:url('/images/screenshot.png');width: 500px; height: 300px">
</div>

　　注意：我们没有指定display:none风格，我们没有声明 lazyImgCSS类在任何地方。默认情况下，如果没有脚本运行，这将使图像可见。

2.动态地声明lazyImg类。
　　添加以下内容script记到页面的末尾<head> 部分：

<head> 
   <!--The original content of the head tag goes here-->

   <script type="text/javascript"> 
    document.write("<style>.lazyImg{background-image:none !important;}</style>");
   </script>
</head>

　　网页是从上到下编译的，因此这将保证不会为启用JavaScript的人加载图像。与原来的方法不同，Google PageSpeed也会遵守。此外，用于图像的空间将被占位符DIV元素占用，因此当加载图像时，您的页面内容将不会“跳出来”。
　　重要的是：不要将DIV设置display:none。如果这样做，下面的代码（对于图像可见性检测）将无法正常工作，因为该元素的offsetTop属性将为零。
　　基本上这就是创意的一部分。但是为了使解决方案完整，我们还要实现与上述任何方法类似的JavaScript逻辑。

3.window.onscroll事件处理。
　　现在，我们需要处理window.onscroll事件动态显示图像。为此，我们将使用这里描述的方法：

isScrolled = false;
window.onscroll = function () { isScrolled = true; };

function onWindowScroll()
{
  if (isScrolled)
  {
    isScrolled = false;
    … //Our lazy-loading code will go here
  }
}

setInterval(onWindowScroll, 100);

　　这个想法很简单：默认情况下，你的浏览器会产生很多 onscroll一个平滑滚动动作的事件。所以我们只设置了一个flag在onscroll事件并检查标志每秒十次。如果标志是真的，我们调用我们的复杂逻辑。这样，复杂的逻辑不会影响浏览器的性能。
　　警告：移动浏览器并不简单。许多实验表明移动浏览器启动onscroll事件，只有当滚动结束，而不是在过程中。为此并没有适当的解决方法。因此，在移动设备上停止滚动之前，您将看不到懒惰的图像。
4.收集所有懒惰加载图像。
　　让我们生成一次所有延迟加载的图像的列表，以便在每次滚动操作时不检查它们。为此，我们将选择所有具有“lazyImg”类的元素。请注意，可以有多个类应用于元素，因此它不仅仅是通过类名来简单地检索元素。

function getElementsByPartOfClassName(partOfClassName)
{
  var allTags = document.getElementsByTagName("*");
  var res = [];
  for (var i = 0; i < allTags.length; i++)
  {
    if (allTags[i].className && allTags[i].className.indexOf(partOfClassName) > -1)
    {
      res.push(allTags[i]);
    }
  }

  return res;
}

lazyImages = getElementsByPartOfClassName("lazyImg");

5.检查哪些图像在上方可见。
　　现在是时候给我们写一些代码了window.onscroll处理程序。

function onWindowScroll()
{
  if (isScrolled)
  {
    isScrolled = false;
    var scrollTop = window.pageYOffset ? window.pageYOffset : window.scrollTop ? window.scrollTop : 0;
    for (var i = 0; i < lazyImages.length; i++)
    {
      if (scrollTop + document.documentElement.clientHeight - lazyImages[i].offsetTop  > 0)
      {
        lazyImages[i].className = lazyImages[i].className.replace("lazyImg");
      }
    }
  }
}

　　就是这个！现在是时候做一些解释了：
　　

scrollTop变量存储当前滚动位置（以像素为单位），表示浏览器窗口滚动的距离（以跨浏览器方式检索）。
在循环中，我们枚举所有懒加载的图像，并检查顶部边框（图像的offsetTop）是否高于可见区域的底部边框（scrollTop +window client height）。
如果图像位于浏览器窗口底部边框上方（上下），我们将从其中删除lazyImg类。结果，在标记中指定的原始图像作为背景加载，并且图像因此被延迟加载。

　　当然，您可以优化代码 - 例如，从数组中删除已处理的图像，或者使用更复杂的标记/ CSS规则来一次处理多个元素。但上面的示例给出了一般的想法。

Lazy-Loading图像 - 完整的样本代码
　　作为结论，这里是解决方案的完整代码，它的顺序应该在网页上显示：
　　

<head>
  <!--The original content of the head tag goes here--> 

  <script type="text/javascript">
    document.write("<style>.lazyImg{background-image:none !important;}</style>");
  </script>
</head>

<!--Some page content goes here...-->

<div class="lazyImg" style="background-image:url('/images/screenshot.png’);width: 500px; height: 300px"></div>

<!--Some more page content goes here...-->

<script src="/delay-load.js">
</script>

这里是delay-load.js文件的内容：

function getElementsByPartOfClassName(partOfClassName)
{
  var allTags = document.getElementsByTagName("*");
  var res = [];
  for (var i = 0; i < allTags.length; i++)
    if (allTags[i].className && allTags[i].className.indexOf(partOfClassName) > -1)
      res.push(allTags[i]);
  return res;
}

// Collect all delay-loaded images in the document
lazyImages = getElementsByPartOfClassName("lazyImg");

isScrolled = false;
window.onscroll = function () { isScrolled = true; };

function onWindowScroll()
{
  if (isScrolled)
  {
    isScrolled = false;
    var scrollTop = window.pageYOffset ? window.pageYOffset : window.scrollTop ? window.scrollTop : 0;
    for (var i = 0; i < lazyImages.length; i++)
if (scrollTop + document.documentElement.clientHeight - lazyImages[i].offsetTop  > 0)
    lazyImages[i].className = lazyImages[i].className.replace("lazyImg");
  }
}

setInterval(onWindowScroll, 100);

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

猜你喜欢