重庆SEO深度解析
实战草根,野蛮生长,向阳而生

seo图片怎么到首页搜索引擎 如何做到优化引擎搜索SEO之第八篇:懒加载图片(调整翻译)

英文原版:在线文档和SEO。第8部分:延迟加载图片

以下是翻译+自己的评论和想法

(所有ClickHelp广告部件均用浅灰色注释)

翻译:

对于任何人来说,移动互联网的速度可能都不是什么秘密。页面加载速度对于面向移动设备的页面非常重要。此外,Google并不是将网站速度用作SEO要素的秘密。另外,众所周知,如果人们在3秒钟内未打开网站,他们往往会离开该网站。如您所见,提高页面加载速度的原因很多。

改善网站性能

有许多方法可以改善网页性能。但是,减小内容大小和请求数量可能是您应该做的第一件事。或者,第二,第一步是启用服务器端流量压缩和缓存,但是这些都是琐碎的事情,没有创新的方法。

如果您的网页很沉重,可能会有很多漂亮的图片,并且您不想删除这些图片以提高页面加载速度。但是如何在不删除那些精美图片的情况下减少网页的初始加载时间,下载内容的大小以及请求的数量呢?

打开网页后,访问者只会看到其第一部分。他们没有看到下面的东西。如果您可以告诉浏览器在需要显示这些图像之前不要从服务器加载这些图像,该怎么办?这些可能是大屏幕截图或小图标-如果您有很多,它们都是速度杀手。解决方案是按需加载图像,或者按要求延迟加载图像。

处理图像的典型方法

有几种延迟加载图像的方法,但是总的思路始终是相同的:您可以以某种方式更改标记以使其成为下一个折叠图像,这对于第一次加载不是必需的,默认情况下是隐藏的。然后,您在window.onscrollJavaScript中处理事件。当页面滚动并且图像应该可见时,您可以做一些魔术使浏览器加载它。

在开始之前,这是SEO的重要考虑因素:延迟加载的图像:本文介绍的任何方法都不能提供正确的图像索引。但是,我们推荐的方法与其他方法不同,它允许使用禁用脚本的人查看图像。此外,如果爬虫费心地索引背景图像,它还使爬虫有机会看到图像。但是,有一个单独的图像索引解决方案:您可以使用图像站点地图来强制Web爬网程序对图像进行索引。因此,首先,您需要确定要延迟加载的图像对您的网站很重要,以及图像站点地图是否适合您。这完全取决于您的具体情况,但是不良的网页性能对SEO的负面影响可能比未索引图像的负面影响更大。

如果您仍在阅读本文,那么您似乎很重视延迟加载。好,好!因此,这是实现延迟加载时最常见的魔术。

-用于存储图片网址的自定义属性

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

假设您的页面上有图片:

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

为了使其延迟加载,请将上面的代码行转换为

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

SRC属性指向空白图像只是为了使标记有效。

seo图片怎么到首页搜索引擎_网盘 搜索 引擎_搜索图片引擎

当您需要显示图像时,您的脚本仅需要分配值Data-SRC(或任何)属性SRC属性。在运行时,您将获得如下内容:

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

这是一个好的解决方案吗?不,这就是为什么浏览器中禁用了JavaScript的网页抓取工具和访问者(有些人说它们不存在,但上周我们看到了其中的一个)如果这样做,您将永远看不到您的图片。此外,使用自定义属性可能会违反您的标记创建规则。另外,总是有可能它不起作用(例如,不支持data属性的旧浏览器),因为对自定义“ data”属性的官方支持仅在HTML 5中引入。

<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出现时,您的页面内容将“跳出”,因为其原始大小为零,这对访问者来说不是一件好事。

处理图像的推荐方法

所以我们一次要所有东西:

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类。默认情况下,如果没有脚本在运行,这将使图像可见。

未经允许不得转载:狠人SEO » seo图片怎么到首页搜索引擎 如何做到优化引擎搜索SEO之第八篇:懒加载图片(调整翻译)

本文链接: http://www.henrenseo.com/seowt/15106.html

版权声明:本文著作权归原作者狠人SEO所有,转载请注明出处,感谢!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

狠人SEO-网站优化排名操作步骤分享

联系我们联系我们

友情链接


#