图片懒惰加载-无SEO负面影响解决搜索引擎无法获取真实src图片地址优化引擎搜索SEO
对于任何人来说移动互联网可能相当缓慢这种现象不是一个秘密。页面加载速度对于面向移动的页面非常重要。另外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> <!--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("*");
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);
点击链接加入群聊三群:751529538
点击链接加入群聊二群:376877156
点击链接加入群聊【路由器交流群:622891808已满】
本站附件分享,如果附件失效,可以去找找看
饿了么红包