通告 欢迎访问爱刷机(原爱搜路由、爱搜啊博客aisoa.cn)

图片懒惰加载-无SEO负面影响解决搜索引擎无法获取真实src图片地址优化引擎搜索SEO

2021-10-24
0评论
/
阅读
爱搜啊

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

提高网站性能 

有很多方法来提高网页的性能。但是,降低内容大小和请求数量可能是您首先应该做的事情。或,第二,第一步是启用服务器端的流量压缩和缓存,但这些都是微不足道的事情,没有创造性的方法。 

如果您的网页很重,可能会有很多漂亮的图片,而且您不想删除这些图片,以提高网页加载速度。但是,如何减少您的网页初始加载时间,下载的内容大小和请求数量 - 一体化,而不删除那些漂亮的图片? 

当网页打开时,访问者只看到它的第一部分。他们没有看到下面的东西。如果您能告诉浏览器不要从服务器加载这些图像,直到需要显示它们呢?那些可能是大屏幕截图或小图标 - 如果你有很多它们,它们都是速度杀手。解决方案是按需加载图像,或者像他们所说的那样懒惰加载图像。 

搜索引擎无法获取真实src图片地址

处理图像-典型方法 

有几种延迟加载图像的方法,但一般想法总是相同的:您可以以某种方式更改标记,使其成为下一折图像,这对于第一次加载不是必需的,默认情况下隐藏。然后,你处理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> 
   <!--head标签的原始内容在这里-->
   <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规则来一次处理多个元素。但上面的示例给出了一般的想法。

最终搜索引擎无法获取真实src图片地址解决方法

Lazy-Loading图像 - 完整的样本代码 

作为结论,这里是解决方案的完整代码,它的顺序应该在网页上显示: 

<head>

  <!--head标签的原始内容在这里--> 

  <script type="text/javascript">

    document.write("<style>.lazyImg{background-image:none !important;}</style>");

  </script>

</head>


<!--这里有一些页面内容...-->

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


<!--这里有更多的页面内容...-->

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

</script>

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

function getElementsByPartOfClassName(partOfClassName)

{

  var allTags = document.getElementsByTagName(&quot;*&quot;);

  var res = [];

  for (var i = 0; i &lt; allTags.length; i++)

    if (allTags[i].className &amp;&amp; allTags[i].className.indexOf(partOfClassName) &gt; -1)

      res.push(allTags[i]);

  return res;

}

// Collect all delay-loaded images in the document

lazyImages = getElementsByPartOfClassName(&quot;lazyImg&quot;);

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 &lt; lazyImages.length; i++)

if (scrollTop + document.documentElement.clientHeight - lazyImages[i].offsetTop  &gt; 0)

    lazyImages[i].className = lazyImages[i].className.replace(&quot;lazyImg&quot;);

  }

}

setInterval(onWindowScroll, 100);


本站附件分享,如果附件失效,可以去找找看

诚通网盘附件百度网盘附件


于2021-10-24发布