用 WebP Cloud Services 来加速你的站点（一个带 WebP 转换的图片反向代理）
n0vad3v n0vad3v 2022-01-17 17:40:43 +08:00 2826 次点击这是一个创建于 1431 天前的主题，其中的信息可能已经有所发展或是发生改变。
最近几天我在看 GitHub Insights 的 PageSpeed Insights 的时候，发现在移动端总是不能获得一个比较高的分数，除了有一些 render-blocking resources 以外，一个很大的扣分项在于我头像部分是直接引用了 GitHub 的原始头像，不仅体积较大，而且对于某些地区的访客来说访问起来不是很友好：
很快我便意识到使用 WebP Server Go 的 Remote Mode 可以解决这个问题，并且迅速搭建了带有 WebP 转换的站点起来，虽然由于运行在同一个 Node 上导致页面的响应速度有点影响，我还是发了个推来记录了一下这个事情：
看了一下 GitHub Insights 的 PageSpeed Insights ，告诉我页面上的 http://avatars.githubusercontent.com 影响页面速度。
成啊，正好 WebP Server Go 有 Remote Mode ，马上就搓了个带 WebP 转换的反代出来(例如:https://avatars.github.re/u/24852034)
然后发现网站 Time to Interactive 变长了，打分反而还变低了...
#负优化
在解决了自己的痛点之后我意识到其实可能其他人也有类似的痛点，但是可能不在 GitHub 头像上，而是 Gravatar ，或者 Imgur ，或者其他的站点，这样一来作为 WebP Server Go 的开发者而言，使用自己的产品提供一个公共服务的需求就显得呼之欲出了。
我知道现在市面上已经存在了很多类似的优秀的反代服务，不过个人感觉他们的目标更加贴近：加速，且指面向大陆用户的加速。
而 WebP Cloud Service 希望做到的重点并不是面向大陆用户优化的加速，而是在加速的同时减少图片的体积，使用了我们服务的用户的站点可以访问速度更快，有着更好的 PageSpeed 的打分，参考我们文档上的一个对比，可以看到我们使用了 4600 个 10KB - 500KB 范围的小文件进行了测试，WebP 转换后的图片体积减少了 77%。
| file_size_range | file_num | src_size | dist_size |
|---|---|---|---|
| (10KB,500KB) | 4600 | 1.3G | 310M |
所以，我们创造了一个叫 WebP Cloud Services 的服务（取名模仿 AWS 全称），暂时提供了 GitHub 头像，Gravatar 和 GitHub 用户图片的带 WebP 转换的反代服务（后续可以根据需求加入更多），为了防止网站在大陆被墙影响到 WebP Server Go ，所以我们注册了一个新的域名，地址： https://webp.se/ ，欢迎大家试用！
附：文中提到的 GitHub Insights 和 WebP Server Go 在 V2EX 上之前有发过相关的帖子，分别在：
 | 1 Daige 2022-01-18 01:09:51 +08:00 via iPhone 牛逼 |
 | 2 jayvs5200 2022-01-19 02:07:21 +08:00 via iPhone |
 | 3 iqoo 2022-01-19 10:31:52 +08:00 能反代 gh 上任意图片，大概率不久被河蟹 |
 | 4 n0vad3v OP @iqoo 感谢提醒，我们也正在考虑是否需要移除这个反代（仅保留 GitHub 头像和 Gravatar 的带 WebP 转换的反代） |
 | 5 hanmiao 2022-02-10 00:39:04 +08:00 可以搞个黑名单或者白名单 |
Select Language