🤣 省钱 90%!我是这样优化网站图片的_卤代烃 - 码子裤

技术标签:   内容分发网络 CDN  对象存储  https  网络安全  文件存储

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

作者:卤代烃


2021 年一直没有怎么更文,2022 准备开个好头,所以先挑些简单的内容写一写,记录一下我是如何把个人站点的文件存储资费降低 90% 的。

📌如果你喜欢我写的文章,可以把我的公众号设为星标 🌟,这样每次有更新就可以及时推送给你啦

服务选择

我开始写文章大概是三年前,当时有个很现实的问题是不知道图片上传到哪里

之前大多数人会把图片托管到新浪图床上,但是新浪图床当时开启了鉴权操作(通过 referer 限制),非新浪站点不会展示图片,虽然可以通过空 referer 的方式绕过,但是也不是长久之计;另外也有人把图片托管到 GitHub Gitee 上,但是受限于网速和容量也不是最优的选择。

后来经过一番调研,发现其实可以用各大云厂商的文件存储功能实现,资费也不贵。因为看不懂阿里云的文件存储文档,就选择了腾讯云的 COS 文件存储服务。

存储服务搞定后,就是挑一款顺手的客户端了。市面上有很多的图床客户端:

名称

是否免费

是否跨平台

应用体积

iPic[1]

只支持 Mac

uPic[2]

只支持 Mac

PicGo[3]

基于 electron,跨平台

非常大

我这里选择了免费又轻量的 uPic,完美满足我的图片上传需求。

问题出现

配置好个人的图床服务后,差不多两年时间都是无感知的,上个月发现今年的流量费用翻倍,于是想着优化一下图片降低一些费用。

首先分析了一下我的文章教程,其中流量大头是我写的「web scraper 教程[4]」,全网阅读量预估有 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[5] 这个网站,个人认为它的质量最高,而且支持申请开发者 API[6],每个月有 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 真香。

lighthouse 评分

总结

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

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


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

参考资料

[1]

iPic: https://toolinbox.net/iPic/

[2]

uPic: https://blog.svend.cc/upic/

[3]

PicGo: https://molunerfinn.com/PicGo/

[4]

web scraper 教程: https://www.cnblogs.com/web-scraper/

[5]

tinify.cn: https://tinify.cn/

[6]

开发者 API: https://tinify.cn/developers

文章分享自微信公众号:
卤蛋实验室

本文参与 码字裤自媒体分享计划 ,欢迎热爱写作的你一起参与!

作者:卤代烃
原始发表时间:2022-01-12
如有侵权,请联系 heekey.com 删除。



 

 
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:http://www.heekey.com/article/weixin_1945832.html

智能推荐

【说站】CDN加速是什么?为什么要使用CDN?

CDN的英文全称是Content Delivery Network,翻译过来就是“内容分发网络”。

Hostinger商业型主机怎么样?Hostinger商业型主机评测(hostwinds虚拟主机)(Hostinger)

对于建站新手而言,选择一个满意且价格适宜的主机空间方案就显得尤为重要。Hostinger是近几年备受欢迎的美国虚拟主机提供商,专注于提供超值优质的虚拟主机产品,...

网站如何配置CDN加速?网站域名接入CDN加速的步骤(附CDN防御常用配置方式)(cdn加速服务器 吃核心还是吃主频)

什么是CDN?CDN的全称是Content Delivery Network,即内容分发网络CDN是构建在现有网络基础之上的智能虚拟网络,依靠部署在各地的边缘服...

Vue——入门详解+案例

MVVM,一种更好的UI模式解决方案,MVVM通过数据双向绑定让数据自动地双向同步

Vue01介绍+数据双向绑定+生命周期+什么是BootCDN+代码示例

 共性:不管是前端到后端,还是后端到前端,使用传统的方式都必须首先拿到页面的Document元素,只有拿到了页面元素才能进行后续操作

网站CDN改为腾讯云及遇到的问题解决

也算是一波三折吧,一开始使用的百度云加速,提供免费流量,可以白嫖的,然后突然域名被封,说是流量过大。

z-blog网站cdn加速后获取用户真实IP地址的方法

前几天发过一篇关于PHP获取网站使用cdn后的用户真实的IP地址的方法,然后就有群里的小伙件单独来问,如果使用z-blog建站并使用cdn加速的话是如何获取用户...

day8 | 如何将我的服务开放给用户 | 第三届字节跳动青训营笔记

这是我参与「第三届青训营 -后端场」笔记创作活动的的第8篇笔记。计算机网络真的是太庞大了

2022年腾讯云「11.11」CDN/短信/视频云/通信产品优惠活动价格汇总

2022年「11.11」大促热卖中,腾讯云CDN/短信/视频云/通信产品的优惠力度真香!活动面向新老客户都提供了诚意优惠,1分钱起超值入门体验,还有购后抽奖活动...

kangle穿刺及cdn回源配置

点击面板上面的服务器设置 找到 赠送域名那里 输入你的面板域名即可 上面的CNAME记录可以不用填写 详见图第二块箭头 输入完成后不要提交