欢迎光临
我们一直在努力

真正的SEO技术:网页图片预加载技术

前面我们说了网页图片延时加载技术,今天,我们再来说一下图片的预加载。

我们经常可以看到浏览器在加载大图的时候,通过自上而下这样铺过来,这样一来一是对用户体验不好,而是在图片完之前我们完全不知道图片大小,不利于控制网页界面。

那么有没有一种方法,能让图片整体一次加载到网页上呢,答案是有的,那就是图片预加载技术。

来看下面一个例子:

——

<script>
function preloadimg(url,callback){
var Img=new Image();
Img.onload=callback;
Img.src=url;
}
window.onload=function(){
preloadimg(“http://localhost/example.jpg”,function(){document.getElementsByTagName(“img”[0]
.src=”http://localhost/example.jpg”});
}
</script>

——

其实非常简单了,它的基本原理就是先用JS获取到服务上的图片,获取到之后,浏览器会缓存起来,等到需要的时候,我们在HTML插入图片,浏览器会直接使用缓存的图片。

这样,图片预加载技术可以让图片在用户不知晓的情况下就完成了,用户不必在去漫长的等待,可以说,对于提高网站的用户体验来说是非常有用的。

如果需要一次加载图片比较多,preloadimg函数的第一个参数可以换成一个数组,再在函数内部对数组做一次遍历,就可以把所有图片都加载到。

图片预加载技术在图片分享网站,常见的图片新闻网站应用得比较多。

另外说一点,实际上当用户第一次进入网站时,一次性预加载过多图片对网站的速度影响也是比较大的,这时候,我们可以通过跟踪用户行为来实现加载,如在一个图片新闻网站,用户一次点击一个图片,当用户查看这个页面的时候,我们把下一张图片加载好,以此类推。

这样不仅可以提高用户体验,还充分考虑到了服务器负载和宽带。

——

其实现在很多网站都使用了预加载,这样做的目的是可以有效的提供网站的打开速度。

更快的网页打开速度,对用户体验和SEO都是有利的。

但是,如果使用不当的话,这些优化技术对于SEO来说就是大灾难。

比如:

LazyLoad 是一个用 JavaScript 编写的 jQuery 插件,它可以延迟加载长页面中的图片,在浏览器可视区域外的图片不会被载入,直到用户将页面滚动到它们所在的位置,这与图片预加载的处理方式正好是相反的。

在包含很多大图片长页面中延迟加载图片可以加快页面加载速度,浏览器将会在加载可见图片之后即进入就绪状态,在某些情况下还可以帮助降低服务器负担。

因为搜索引擎大多对 js 的理解能力还是有限了,而搜索引擎抓取源代码的时候,它并不能正确的抓取到真实的图片地址,所以这是不利于网站图片优化的。

而如果你又是一个以图片为主的网站,如果再使用 LazyLoad 可能就会变得更不利于网站的优化了。

所以结论显而易见,lazyload 延迟加载技术不利于 SEO 的原因很简单,即搜索引擎不会像我们人使用鼠标那样,上下拖动网页。

搜索引擎只会选择它看到的第一页的内容,其它的内容都是空白。

这样当然是不利于 SEO 的。

[ 尾语 ]

lazyload 虽然对提升用户体验有好处,但是提升的效果到底有多少,是个疑问。

出现延迟加载技术是为了加快网页打开速度,提高带宽利用率,但是,现在带宽越来越大,网速越来越快,已经5G 时代了,看视频都嗖嗖的,带宽这个理由,似乎已经快要不成立了。

在 SEO 和用户体验提升之间,似乎没有唯一的答案, 因为对于网站来说 SEO 很重要,而对于用户来说,用户体验是首选。既可以不影响网站优化,又可以提升用户体验,这可能才是SEO优化最好的状态。

赞(0) 打赏
未经允许不得转载:哈哈网 » 真正的SEO技术:网页图片预加载技术

评论 抢沙发

觉得文章有用就打赏一下文章作者

非常感谢你的打赏,我们将继续提供更多优质内容,让我们一起创建更加美好的网络世界!

支付宝扫一扫

微信扫一扫