网友问：如何在外贸站首页添加滚动产品图片？也就是10多年前国内比较流行的轮播图片模块。老魏早年也比较迷恋这种效果，也在早期网站上使用过。但后来逐渐的发现了一些弊端，正好借着今天有时间总结分享一下。
为什么现在老魏反对用轮播图片作为产品展示，有以下几点原因，希望能帮助大家进一步思考。
本文的轮播图片、滚动图片仅限于 WordPress网站，其他php、asp、jsp技术的轮播图速度可能会快一些，不在本文讨论范围内。
轮播图片介绍
10多年前国内流行的轮播图片，都是很小尺寸的图片，经过反复压缩后，一个图片也就几kb~几十kb，加上一个js文件，一个css样式表，基本就搞定了，总体的大小不会很大。
随着互联网飞速发展，很多家庭都用上 200M~1000M的带宽，而相应的水涨船高，现在的网站都在使用高清大尺寸图片，一张图片几十kb~几百kb，有些站长不懂优化网站图片，直接上传几M的原图，那样的轮播图片模块大小就更恐怖了。
现在 slider 插件也有不少了，包括付费的也有。Avada主题就集成了几款 Sliders插件，新手初次接触 Avada往往会被炫酷的首页轮播图吸引，使劲儿往里面放各种产品图，搞大了首页大小。
按照这位网友的说法，希望十几个小图片或产品无限滚动，鼠标经过就会停。十几个图片加到一起，也有几M了，再加上js文件，css文件，总体来说不是一个小数字。
作为外贸网站首页，本身就承担着传递公司信息和产品信息的重任，说白了大家恨不能把所有内容都放到首页上面去，也就导致了外贸站首页都比较大和臃肿。轮播图片越来越大导致首页也变大。
页面压缩
有人说我可以使用类似 wp rocket之类的缓存插件来优化一下，达到压缩页面，让尺寸变小的目的。
这样的思路是没问题的，前提是文件有可以被压缩的空间。轮播图里面的 js、css 没有什么可以压缩的空间，高清大图片的压缩空间也不大，多数是在压缩时在清晰度和大小之间找一个平衡点（体积小点那么图片尺寸要小清晰度也差，反之要想图片尺寸大点清晰度高那么体积就大），最终可以压缩的空间并不大。
要么就换成 webp无损压缩图片格式，图片尺寸小了 20%以上，清晰度和尺寸不变。
你还可以自己动手优化 WordPress图片，或者使用 WordPress图片优化插件来优化。比如ShortPixel Image Optimizer，什么是lazyload懒加载，Imagify，EWWW Image Optimizer等。
谷歌优化
谷歌要求网页打开时间在 3秒内，而这样的首页一般都不会超过100kb~200kb，再大了就需要更久的访问下载时间，导致超过3秒。这样就不符合谷歌要求，从而对网站的排名、权重有一定的影响。
现在主机都默认支持 gzip压缩功能，能够从主机端压缩页面大小。
连接数
相信很多人都用 Google PageSpeed Insights 测试过自己的外贸网站速度，测试结果里面会提到很多项目都能影响到网站加载速度，其中一个重要的项目就是连接数。
当你页面包含的图片、js、cs等内容越多，产生的连接数越多。
当你点击域名打开页面时，浏览器先发起连接请求，得到服务器同意后再挨个下载页面中的图片、js、css、第三方url文件。每个文件都要经历这么一个过程，最后由浏览器渲染出我们看到的页面。
当你使用轮播图片模块，里面有十几个高清产品大图时，加上js、css文件，可能光这一个轮播模块就需要连接几十次，再加上首页的其它文件，连接请求次数和页面渲染时间很容易超过3秒，导致的结果一是让谷歌不满意，二是访客不愿意等待直接关闭页面离开。
轮播图片模块不是不能用，而是很容易造成、加剧这种情况的出现。
主机性能和用户体验
有人说：只要主机性能很强，图片做了无损压缩，钞能力到位了绝对不卡，如果几十个产品图片都卡，那么放视频会直接整死机了，主机性能好，解码能力强。
其实这话说得没错，大家都恨不能整上 64核心 256G内存的主机，心里认为这样用户打开就快了。其实不一定的。
大家应该是忽视了用户体验的问题。用户端的硬件设备参差不齐，有的用户笔记本可能比较老，打开网页慢，有的用户电脑比较贵，打开速度较快。有人用苹果手机速度快，有人用廉价安卓手机性能差，这些都在网站设计者的考虑范围内。
你不能用主机的好坏来替换掉用户端体验，想当然的认为我主机配置高自然用户打开页面就快，这种偷换概念是错误的。
无论如何，当用户打开你网站时，一个轮播图片模块十几张、几十张图片的连接请求次数是省不了的，每打开一个图片就发一次请求，然后下载一张图片，你去数一数自己的网站首页，有多少个图片、js、css、第三方url文件数量，就需要多少次请求。
而视频虽然体积大很多，但往往只需要一次连接就开始下载了，没有多次请求连接。
wp rocket为什么设置后会觉得页面打开速度快了， 原因之一是把页面中的多个 js 压缩成一个 js文件，多个css压缩成一个 css文件，并放置在页面末尾，这样就把多次连接请求变成了只需要1次连接请求即可完成下载（弊端是可能出错导致页面异常）。
一句话总结就是：减少连接次数可以有效提高页面文件下载时间，也就等于给网页提速了。
外贸网站的用途
说到这里就不得不提外贸网站的用途，我们建站的用途是通过网络向终端用户快速传递有价值信息。而不是今天看到这个网页的炫酷轮播页面好看，我就要想办法安装插件也实现类似效果。明天看到看别的页面有个XX模块很酷，我也照搬过来。
就好比现在的武术都变成了表演形式，花拳绣腿。真正的武术是杀人技，讲究如何在最短时间内一剑封喉。不停的照搬这些酷炫的网页效果，并不能实现传递有价值信息的目的。
轮播产品图片除了会搞大页面体积之外，对于展示图片来说，意义并不大。你完全可以在首页上面的产品分类中添加相应的类别，用户点击进入后查看具体的产品类目，在产品分类页中再挨个展示产品，点击进入到产品详情页，放上图片、参数、规格尺寸、特色等有价值的信息。
如果你觉得三级页面进入的方式不够直接，可以在首页放几个主要产品的图片+文件介绍，也可以起到直击用户焦点的作用。当然要注意图片大小、数量的问题，避免给首页搞的太臃肿。
延伸
有很多用户把页面中塞入了太多东西，臃肿的页面急需要优化、压缩，导致每天都在寻找压缩方法，不停的折腾网站等技术方面。
其实你建站的目的是卖货，而不是搞技术，把自己从一个外贸业务员逼成了主机维护、网站优化，这样就偏离初衷了。
网站就是简简单单的把产品、工厂介绍给访客，吸引访客的一个工具而已，这里不要消耗我们太多的精力。
总结
在网站首页放轮播图片的人，心里想的是让用户一打开域名就看到自己的产品，吸引用户注意。
如果一定要放，请处理好图片大小、清晰度，别把首页搞的太臃肿了，最后 wp rocket都优化不了多少空间，打开首页都需要10多秒的时间，你觉得用户能有多少耐心等待页面完全打开呢？
其实把产品放到合适的地方，处理好每个页面的大小，努力给访客传达我们的产品特色，工厂的能力就可以了，不要把更多时间花费在炫耀建站技术上，营销才是核心。
暂无评论内容