为啥会想到这个事情呢，
因为，我网站的MENU里的产品分类是如下图这样的：
每个大类里，都有4-6张的图片吧，我想的是让老外更加直观的看到我的产品。也算是为了提高客户体验吧。
但是这样意味着光MENU就差不多有30个图片的REQUEST，而且因为这个是在菜单上的，所以，每个页面都会有至少30个REQUEST，
REQUEST一多，加载速度是肯定慢的。所以，网上找了下，好像有种办法叫CSS SPRITES来解决这个问题。
原理如下图。
这样30个REQUEST，可以变成1个REQUEST，只是增加了点CSS语句，这不是很好吗？
而且，30张图，加在一起的大小，必然比一张图压缩以后的大小，大了不少。
如何做呢？
其实想了我大半天。。。网上YOUTUBE上，都不是基于WORDPRESS的，或者说AVADA的
1.打开https://www.giftofspeed.com/sprite-generator/
2.
3.把生成的CSS代码复制，粘贴到
AVADA-THEME OPTION-CUSTOM CSS
4.打开你图片比较多的，想优化加速的网页。
假设，你这些图导致REQUEST数太多，那我们可以给它来个6变1.
这时https://www.giftofspeed.com/sprite-generator/网址里生成的HTML就派上用场了。
这是最简单的替换方式。
如果你想图片需要ALT属性，需要超链接，需要各种AVADA给你提供的样式，我是这样操作的，用CHROME，右键图片，检查属性。
然后他的各种ZOOM IN啊，加阴影的HTML代码都出来了，然后只要替换掉IMG SRC后面的，变成class="sprite _1_png">就OK了。
我不是码农，大学学的和计算机完全没关系，没学过HTML，只能边GOOGLE，边试验，一般这样是没问题的。
然后就是生成，哈哈。
差不多就是这个意思了，然后，你可以嘚瑟的去。
gtmetrix.com
dotcom-tools.com/website-speed-test.aspx
tool.pingdom.com
之类的检测了，你一定会惊喜你的REQUREST减少的数量的哟。~~
PS：这个一切都是基于你网页上图片很多的前提下。
如果很少，当我放屁。
我也只是瞎研究，哈哈哈。做好MARKETING，询盘才有！！！~
网友评论