Litespeed cache给网站优化加速之图片延迟加载(Lazy Load)

网站优化加速方式方法真的有太多太多，而图片在一个网站中一直都是一个非常重要的元素存在，因此对于图片的优化也是一个建站者们不断谈论的话题。

优化网站的图片主要可以通过三种方式来优化

1. 使用尺寸较小的图片或者压缩图片的尺寸至最佳效果
2. 使用cdn的方式缓存图片，以从不同服务器获取图片资源，减少网站本身服务器的请求
3. 延迟加载图片，即Lazy Load

今天我们这篇文章主要说说第三种图片延迟加载，英文叫做Lazy Load，字面上大家都认识，懒惰，所以也有人称之为惰性加载。

先要说明一下，用Litespeed cache给你wordpress网站做图片lazy load，如果主要对国内用户的话，这个功能最好别开（影响并不大），比如我现在网站，开了这个，晚高峰期的时候在国内打开网站的时候，有时候反而让图片很久都加载不出来，这个原因可能是因为litespeed的服务器本来就在国外，我自己测试了一下，用国外IP开的时候，没有图片加载不出来的情况。

什么是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 – 按需求自定义。

[wpcode id=”22747″]

• 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都是有插件的。添加此功能之后，页面加载起来确实更加流畅，最少页面引入用户眼帘的时间会大大缩短。