网站优化加速方式方法真的有太多太多,而图片在一个网站中一直都是一个非常重要的元素存在,因此对于图片的优化也是一个建站者们不断谈论的话题。
优化网站的图片主要可以通过三种方式来优化
- 使用尺寸较小的图片或者压缩图片的尺寸至最佳效果
- 使用cdn的方式缓存图片,以从不同服务器获取图片资源,减少网站本身服务器的请求
- 延迟加载图片,即Lazy Load
今天我们这篇文章主要说说第三种图片延迟加载,英文叫做Lazy Load,字面上大家都认识,懒惰,所以也有人称之为惰性加载。
什么是Lazy Load?以及其必要性
Lazy Load是网站图片异步或者说延迟加载,是一种将图像对页面加载时间的影响最小化的方法。当你浏览某些网站的时候,你可能会发现网页虽然已经打开,按时图片在进入的视线时,才会一个一个慢慢显示出来,这种效果就是图片延迟加载了。

对于做跨境电商和外贸的朋友来说,独立站的主要功能是展示和销售产品,而一个产品离不开一个关键因素就是图片,任何产品你都需要摆上几张图片来向客户展示他的特征,细节,外形,包装等等,有些产品可能多达十几或者几十张图片不等,可见电商网站中的图片占比是非常大的,跟不同类型(博客,论坛,新闻等等类型)的网站比起来,也是算图片比较多的。
图片丰富的网站,当然能使网站更漂亮,更有吸引力,但这需要付出一定的代价,那就是页面加载的时间以及对主机的资源占用自然就少不了,因此对这方面做相应的优化自然显得相当有必要了。
图片延迟加载(Lazy Load)的好处
当你在网站上启动图片延迟加载后,网页中的图片将会异步加载,也就是说,你的页面其他内容在你打开页面时会同步加载,但是图片会延迟一秒或者多少时间加载,而且不在你视野中的图片暂时不会加载,当访客往下拉的时候,这些元素才会显示,你拉到哪里那里的图片才显示,完全按照访客的需求来加载。这样的好处显而易见:
- 在你打开页面的时候,页面只加载部分可视内容,图片随后显示,这对于搜索引擎来讲,页面的加载速度并不会算图片的时间,对于SEO利好啊
- 页面元素不是同一时间读取的,这就减少了对服务器的请求,降低了其同一时间的负载
- 在未被访客读取的内容中,图片并不加载,而不是延迟加载,这不仅减少了你的服务器负载,还减少了你的主机流量输出(如果你的主机对流量有限制的话)
- 对于手机用户,延迟加载明显减少他们的流量消耗,毕竟不是每个人都是无限流量,因为并不是每打开一个页面,访客都会全文读完,如果他阅读到他需要的部分,那么他就不需要为其他并没有加载的内容损耗流量。
由此可见一个Lazy Load还是有不少优点的,那么我们怎样给网站开启Lazy Load?
给网站开启Lazy Load(图片延迟加载)
大部分CMS建站工具例如wordpress, Magento, Prestashop等等都能通过插件来完成图片的延迟加载,很多主题就带有此功能,在线建站平台例如Shopify等也一样。
今天我就以Wordpress为例来说一些如何开启Lazy Load,假如你的主题自带此功能那你无需再另外去开启,没有的话,当然是利用插件,但是我今天要说的插件是一款综合型的网站缓存类加速插件:LiteSpeed Cache,Lazy Load是它其中的一项功能,其实大部分综合性的加速插件都含有此功能,为何用这个做代表,是因为此插件在多个CMS平台都有版本,设置差不多,还能延迟加载iframes,另外不需要单独去安装专门的Lazy Load插件。
首先,在你的wordpress网站后台管理页面的Plugins > Add New中搜索并安装Litespeed cache, 然后激活插件。然后会在后台面板的最底端看到一个LiteSpeed Cache的选项,你就可以开始设置LiteSpeed Cache了。
要设置图片延迟加载,从LiteSpeed Cache > Page Optimization(页面优化)菜单,选择Media Settings,请依次按照以下选项设置:

- Lazy Load Images – 最主要的功能当然是开启:on。
- Basic Image Placeholder – 占位符(是一张预加载的图像),可以是一张动态的加载图片,例如转圈圈什么的,也可留空。 比如填写一个透明的占位符:data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7。
- Responsive Placeholder – 响应式预加载占位符,在图像有设置width和height属性的情况下,可以使预加载的图像自适应图像设置的尺寸,这有助于减少布局重新排列,选择on。
- Responsive Placeholder SVG – SVG是一种现在很流行的网络图像格式,类似于字体,可随意调节大小而不改变图像清晰度以及质量,留空或者填写推荐值,选项下面有推荐值。
- Responsive Placeholder Color – 按需求自定义。
- LQIP Cloud Generator – 低质量图像生成器,将要加载的图像预先压缩成一个像素非常低的图像,在要加载原图的时候预加载这张低质量图片,可设置on。
- 不过这个功能是在QUIC.com上完成的,其实LiteSpeed本身很多功能也是基于QUIC.com的,QUIC.com免费版本只允许生成100张低质量图片,蚊子再小也是肉,实在不行就多占用一点服务器的资源,影响也不会很大;
- 其实这个选项及接下来的相关三项都可以关掉,关掉后,预加载图像会使用Responsive Placeholder设定的图像。
- LQIP Quality – 推荐值 4,数字越大说明图像清晰度、像素更高。
- LQIP Minimum Dimensions – 设定尺寸以限制某些图像生成低质量图像,比如一些本身像素低的图片,推荐值150x150px,即低于此尺寸的图像不会生成低质量图像。
- Generate LQIP In Background – 在后台提前生成低质量图像。
- Lazy Load Iframes、Inline Lazy Load Images Library – 两项都选择开启 on。
延迟图片加载样式
另外图片延迟加载的特效可以通过添加一些CSS样式来实现,来自LiteSpeed Cache官网的推荐淡入效果(fade-in),进入WordPress网站的后台Appearance > Customize > Additional CSS 添加,具体CSS样式如下:
/* PART 1 - Before Lazy Load */
img[data-lazyloaded]{
opacity: 0;
}
/* PART 2 - Upon Lazy Load */
img.litespeed-loaded{
-webkit-transition: opacity .5s linear 0.2s;
-moz-transition: opacity .5s linear 0.2s;
transition: opacity .5s linear 0.2s;
opacity: 1;
}

直接复制以上样式黏贴至Additonal CSS中,保存就可以了,然后打开你的网站看看是否成功,也可以打开我们的不同页面查看效果。
可设置排除不需要延迟加载的图片
有些图片我们不想让他延迟加载,比如网站logo,Litespeed cache同样有这个功能,还是进入LiteSpeed Cache > Page Optimization(页面优化)菜单,找到Media Excludes标签,如下图。

去你的wordpress后台media里面找到需要的图片,复制图片链接,别告诉我你不知道找到图片链接,直接点击图片,然后右边就有个copy URL to clipbord。

需要的图片地址都黏贴进去然后保存设置就行了。
另外如果你懂css的话,还可以批量排除图片,其他不懂的就别改了!
结语
其实为网站开启Lazy Load(延迟加载图片)很容易,很多插件只要你点击几下就行了,此文教程应该适合大部分网站开启图片延迟加载功能,因为Litespeed cache不仅仅只开发wordpress的插件,对于magento, prestashop等其他CMS都是有插件的。添加此功能之后,页面加载起来确实更加流畅,最少页面引入用户眼帘的时间会大大缩短。
版权声明:本文原创文章,首发于青松跨境B2C,版权所有,未经允许,请勿转载!
转载请注明:如若转载,请先取得同意,然后注明原文链接。
感谢分享