2018-07-27 网站优化:利用webp格式减少了网站首页60%的下载量

故事起因：

给客户开发的一个自媒体网站，首页比较多图片, 首次装载竟然差不多有6M, 时间14秒，急需优化。

优化前

分析:

利用Chrome 提供的lighthouse工具, 测试出来瓶颈在图片下载那里. 因为很多图片都是由编辑上传的原始图片, 一般都是几百K, 相对来说都偏大了.

图片下载流量是大头

解决方案:

根据工具的提示, 统一将所有下载的图片都转换成webp格式, 达到了压缩图片下载的效果, 对比起来效果, 每张图片居然缩小了差不多10倍, 真是喜人哪. 

举例说明: 

原图

压缩后差10倍

结果:

最终的结果就是网站首页的下载容量从5.9M下降到2.3M, 减少了60%的下载量, 页面装载时间缩短到4.32秒, 客户对这个提升表示比较满意.

优化后

学海无涯，在学习的道路上，你并不孤单，希望本文可以帮助到相关的人，我是物流IT人，刘宇，谢谢，再见。