共计 2376 个字符，预计需要花费 6 分钟才能阅读完成。
2021 年始终没有怎么更文，2022 筹备开个好头，所以先挑些简略的内容写一写，记录一下我是如何把集体站点的文件存储资费升高 90% 的。
如果你喜爱我的文章，心愿点赞👍 珍藏 📁 评论 💬 三连反对一下，谢谢你，这对我真的很重要！
服务抉择
我开始写文章大略是三年前，过后有个很事实的问题是 不晓得图片上传到哪里。
之前大多数人会把图片托管到新浪图床上，然而新浪图床过后开启了鉴权操作（通过 referer 限度），非新浪站点不会展现图片，尽管能够通过空 referer 的形式绕过，然而也不是长久之计；另外也有人把图片托管到 GitHub Gitee 上，然而受限于网速和容量也不是最优的抉择。
起初通过一番调研，发现其实能够用各大云厂商的文件存储性能实现，资费也不贵。因为看不懂阿里云的文件存储文档，就抉择了腾讯云的 COS 文件存储服务。
存储服务搞定后，就是挑一款棘手的客户端了。市面上有很多的图床客户端：
| 名称 | 是否收费 | 是否跨平台 | 利用体积 |
|---|---|---|---|
| iPic | 否 | 只反对 Mac | 小 |
| uPic | 是 | 只反对 Mac | 小 |
| PicGo | 是 | 基于 electron，跨平台 | 十分大 |
我这里抉择了收费又轻量的 uPic，完满满足我的图片上传需要。
问题呈现
配置好集体的图床服务后，差不多两年工夫都是无感知的，上个月发现往年的流量费用翻倍，于是想着优化一下图片升高一些费用。
首先剖析了一下我的文章教程，其中流量大头是我写的「web scraper 教程」，全网浏览量预估有 80w，其中 80% 的图片申请都会落到我的 COS 源站上，造成流量费用。
通过排查，目前 COS 流量的次要耗费路径为 3 个中央：
- 博客园：博客园不反对 md 文件里的图片间接转博客园公链，过后图省事间接用的 COS 链接
- 少数派：编辑器能力较弱，也不反对主动转公链，也是用的 COS 链接
- 集体博客：流量较小可疏忽
找到问题后咱们就能够逐渐优化了。
优化一：referrer 鉴权
这个优化比拟早，大略应用 COS 几个月后就做了。因为文章公布一段时间后，我就发现很多原创文章都被站群网站「采集」去优化 SEO 了。
这种事件是无奈杜绝的，然而对我来说这些站点都会给我的图片 COS 服务造成带宽和资费压力，在权衡利弊后，我决定学习新浪微博图床的做法，限度拜访权限：
- 只容许 白名单 里的域名申请图片
- 更近一步，限度空 referrer 申请，因为很多刷 SEO 站点会在 HTML 里配置
<meta name="referrer" content="noreferrer">，通过空 referrer 绕过鉴权
开启 referrer 鉴权后，通过察看流量有肯定的降落，也多了十分多的 403 错误码，阐明拦挡还是无效的。但因为解决工夫较为长远，我也忘了具体收益了。
优化二：压缩图片
referer 优化之后，我就很长时间（大略一年半）没有解决图片了，2021 年年底的时候，我发现买的定量流量包每次到月中就用完了。升高流量占用最疾速的办法就是 压缩图片 了，于是我做了以下工作：
1.tinify 压缩
这里我用了 tinify.cn 这个网站，集体认为它的品质最高，而且反对申请开发者 API，每个月有 500 张的收费份额，算了一下 COS 上一共 450 张图片，正好在额度内，没什么犹豫的间接开压。
最初的压缩成绩如下：
| 压缩前 | 压缩后 |
|---|---|
| 111MB | 75MB |
综合看上去只缩减了 33% 的体积，实际上压缩比要比这个高，大略能省 60% 左右，因为 tinify 不反对 GIF 压缩，而 450 张图里有不少 GIF 图片，所以把数据拉下来了。
为了控制变量，压缩图片后我放量察看了 1 周，看数据成果还是很显著的，在日申请数（7000 左右）不变的状况下，流量耗费降落了 40% 左右：
看到相干数据后我还想进一步压缩图片体积，于是又做了以下尝试。
2.gzip 压缩
开启图片的 HTTP Gzip 压缩后，发现成果并不是很好，体积收益简直为 0。
起初想了一下这也失常，png jpg 其实都是压缩文件了，再对压缩文件压缩，收益个别都不会很显著。因为压缩还会耗费服务器资源，所以就敞开了图片的 Gzip 压缩。
3. 转移 gif 图片图源
png jpg 图片能够通过压缩升高流量耗费，gif 图片既然不能压缩，那就“转移领取”吧！
我把博客园上投放的博文 gif 图片都换成了博客园的 CDN，成果也非常明显，申请数升高了 15%，流量耗费降落了 50%：
少数派网站因为是文本编辑器模式，操作比拟繁琐就暂不替换了。
4.webp 在线转换
局部图片我前面迁徙到 CDN 后，腾讯配套的 CDN 服务反对智能转换 webp。开启了服务后，测试了几张图片，大略又能降落 30% 左右的体积，但因为 CDN 放量较小，整体收益还不是很显著。
优化三：CDN 减速
COS 其实始终配套着 CDN 服务，然而之前始终没有开。这次优化就顺便开启了，而后我就陷入到无尽的悔恨中——为什么我没有早些开 😭。
CDN 服务开启后，最大的收益就是加载速度间接 升高一个数量级。之前的图片都是从 COS 源站申请的，每张图片响应速度大略为 200ms-300ms，开启 CDN 后间接降到 20ms-30ms，劣化状况下也能放弃在 100ms 内：
开启 CDN 减速后，另外一个意外之喜是我博客的 Lighthouse 评分都 迫近满分 了，不得不说 docusaurus 这个文档框架优化的真不错，CDN 真香。
总结
到此我的图片优化就告一段落了，综合下来看流量资费降落了 90%。总体来看优化的思路并不难，都是显学，收益这么大齐全是因为之前素来没有优化过 🌚。
前期其实也能够持续迭代，比如说把旧文章的图片链接全副换成 CDN 链接，全站 HTTP2 等。但因为优化到这里收益曾经很显著了，再优化的边际效应太小了，等遇到下一次的瓶颈再优化也不迟。
如果你喜爱我的文章，心愿点赞👍 珍藏 📁 评论 💬 三连反对一下，谢谢你，这对我真的很重要！
欢送大家关注我的微信公众号：卤蛋实验室，目前专一前端技术，对图形学也有一些渺小钻研。
原文链接 👉 我是如何把集体网站的图片服务资费升高 90% 的：更新更及时，浏览体验更佳