问题:
在《Nginx调优:gzip的相关设置》这篇博客的衍生中提到有关于静态资源做缓存,未见明显效果的问题:
几番思索,再结合自身项目,图片初始无缓存加载时总是一帧一帧渲染(像是卡壳一样),着实难受。
思考:
在这个超文本时代,图片资源在网页中是随处可见,高清图片各是数不胜数,这个问题应该有很好的解决方案。
想法1:预加载,提前加载好所有的图片,但是图片大小还是那么大,性能依旧不好。
想法2:gzip压缩,对图片不压缩,实时压缩既耗性能,又没有实际的效果。
想法3:参考一下别人的网站,这时我先找到了永远的信仰-小米的官网进行查看,发现网站的首页有很多高清图片加载,但是整体来说流畅,打开控制台,发现,图片的格式竟然是webp,呦西,一下子打开了通过成功的大门,果断研究一波。
实践:
关于webp的概念网上有很多,不赘述。
推荐两个图片格式转换网站:
1、在线格式转换 .jpg .jpeg .gif .png .bmp .webp 图片格式转换
2、在线格式转换 .jpg .jpeg .gif .png .bmp .webp 图片格式转换
结果:
网站整体加载图片刘畅,基本控制在毫秒级,以前都5、6秒。
respect!!!
大家还有什么好的网站优化的建议,打在评论区。