对于大多数的普通站点处于成本考虑都是用的5M以下带宽的服务器。最直接导致的问题就是页面资源加载慢,尤其是当页面的图片资源比较多,页面的加载的时间会变得超级长,对于用户体验的影响非常的大,并且加载时间超过3秒对于seo优化方面也会形成负面的影响。
延迟加载技术
懒加载也叫延迟加载,当用于图片的延迟加载的时候,基本原理是通过js动态的修改图片的src值,当页面被打开的时候所有的图片资源加载的是同一张模版图片,或者不加载任何图片通过限定img图片标签的长宽,来保证页面的排版,当用户操作页面的时候,当img进入屏幕显示位置,这个时候通过修改img标签src值来加载显示图片资源。实现了只加载用户看到位置的图片,可以有效的降低服务器的带宽压力。
懒加载不利于SEO
搜索引擎爬取页面的时候不会去触发及执行js代码,搜索引擎对于js代码的处理能力是有限的。因此,抓取的页面中就无法获取到真实的图片,对于SEO肯定会造成负面的影响,尤其是对于图库类网站,全站主要资源是图片的站点,如果使用了懒加载技术,那么对于站点seo是一个致命的问题。
如何处理图片加载问题
图片类站点
对于这类站点没什么好说的,网站命根就是图片,那么必须禁用这个图片的延迟加载技术,对于图片类网站如果说还舍不得带宽的钱,那么还是关门大吉比较合适。能做的就是从页面的细节上去做优化来降低资源的大小,比如对图片进行压缩,直接采用更小的缩略图另外控制页面加载的图片数量。对于用于起到seo优化的爬虫页,没有必要在单页面放置过多的图片,一般20-30张就差不多了,主要还是图片需要有吸引力,可以抓住用户,提供转化即可。
对于图片网站盈利一般都是会员制度,通过注册充值,才能实现全部的浏览功能。对于这部分图片资源是不会对搜索引擎开放抓取的,那么不管是懒加载、瀑布流的方式都随便整了。
非图库类网站
这类网站的特点就是图片不多,但有的时候图片却是挺重要的。对于大多数企业网站内容一般更新的是行业或者公司动态,图片的作用更多时候只是作为一个配图,让文章页面看着协调点,一般来说图片的数量不会很多,也就一两张一个页面,对于这种情况不应该去做图片的延迟加载,保证页面的图片可抓取,可以提高网站的site出图几率。
另一种情况就是电商类网站,这类网站的详情页大多为产品介绍不可避免的遇到有大量的产品图片,这类网站如果无法做到带宽的升级,那么可以合理适当的作用懒加载。
合理运用图片的延迟加载
压缩图片
对于图片我们首先一定是需要去做压缩,尽可能的缩小图片的大小。一般使用web jpg格式的图片,不管是程序压缩还是手动处理,这个压缩动作一定需要有,简单的方法我们可以使用ps选择合适的质量度另存一下web jpg即可,不要嫌麻烦,一张图不怎么样,图片一多和同时访问人数一多,合计起来可是不小带宽的占用。
图片像素尺寸
很多网站都存在一个问题,就是图片的尺寸偏大,比如前段显示的图片尺寸是200*100px,但是后台上传的图片尺寸可能是1000*500px的图片。显示的时候在css样式的作用下可以以需要尺寸显示,但是页面加载时候却是按照图片真实的像素大小加载的。这种情况比图片为做压缩的问题更加严重,直接导致页面的图片资源过大。
选择性使用懒加载
上面说到了电商类网站不得不使用图片的延迟加载时候,首先要做到上面两点对于图片的优化处理方式。然后就是适当的选择图片去做延迟加载,我们一般至少保持页面有1-2张的图片必须是直接被加载的,不可以进行延迟加载,这个主要是利于搜索引擎去抓取,目的就是提升网站整体的site出图率提高网站的点击率,这部分的图片需要选择可以突出产品特点的图片。
如果你不是图库类网站图片对于网站没有那么的重要,重点却是在文字内容以及用户的体验,也就是说页面的加载速度的重要性是高于你的图片的。所以给到搜索引擎一定量的图片即可,不过还是看自身的选择吧,如果带宽能升级还是不用延迟加载吧!