头图

⚡️ 省钱 90%!我是这样优化网站图片的

卤代烃
English

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 压缩

Xnip2022-01-11_22-51-25.jpg

这里我用了 tinify.cn 这个网站,个人认为它的质量最高,而且支持申请开发者 API,每个月有 500 张的免费份额,算了一下 COS 上一共 450 张图片,正好在额度内,没什么犹豫的直接开压。

最后的压缩成果如下:

压缩前压缩后
111MB75MB

综合看上去只缩减了 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%

2022-01-08_20-50-39_remove_gif

少数派网站因为是文本编辑器模式,操作比较繁琐就暂不替换了。

4.webp 在线转换

部分图片我后面迁移到 CDN 后,腾讯配套的 CDN 服务支持智能转换 webp。开启了服务后,测试了几张图片,大概又能下降 30% 左右的体积,但因为 CDN 放量较小,整体收益还不是很明显。


优化三:CDN 加速

COS 其实一直配套着 CDN 服务,但是之前一直没有开。这次优化就顺便开启了,然后我就陷入到无尽的后悔中——为什么我没有早些开 😭

CDN 服务开启后,最大的收益就是加载速度直接降低一个数量级。之前的图片都是从 COS 源站请求的,每张图片响应速度大概为 200ms-300ms,开启 CDN 后直接降到 20ms-30ms,劣化情况下也能保持在 100ms 内:


开启 CDN 加速后,另外一个意外之喜是我博客的 Lighthouse 评分都逼近满分了,不得不说 docusaurus 这个文档框架优化的真不错,CDN 真香。

lighthouse 评分


总结

到此我的图片优化就告一段落了,综合下来看流量资费下降了 90%。总体来看优化的思路并不难,都是显学,收益这么大完全是因为之前从来没有优化过 🌚。

后期其实也可以继续迭代,比如说把旧文章的图片链接全部换成 CDN 链接,全站 HTTP2 等。但因为优化到这里收益已经很明显了,再优化的边际效应太小了,等遇到下一次的瓶颈再优化也不迟。



如果你喜欢我的文章,希望点赞👍 收藏 📁 评论 💬 三连支持一下,谢谢你,这对我真的很重要!

欢迎大家关注我的微信公众号:卤蛋实验室,目前专注前端技术,对图形学也有一些微小研究。

原文链接 👉 我是如何把个人网站的图片服务资费降低 90% 的:更新更及时,阅读体验更佳

阅读 717

超级码力
公众号:卤蛋实验室。 不炒冷饭不哗众取宠,凭质量说话
1.5k 声望
5.8k 粉丝
0 条评论
1.5k 声望
5.8k 粉丝
文章目录
宣传栏