为啥会想到这个事情呢,
因为,我网站的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,询盘才有!!!~