V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
n0vad3v
V2EX  ›  分享创造

用 WebP Cloud Services 来加速你的站点(一个带 WebP 转换的图片反向代理)

  •  2
     
  •   n0vad3v ·
    n0vad3v · 2022-01-17 17:40:43 +08:00 · 2241 次点击
    这是一个创建于 1039 天前的主题,其中的信息可能已经有所发展或是发生改变。

    最近几天我在看 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 变长了,打分反而还变低了...

    #负优化

    ——https://twitter.com/n0vad3v/status/1481626787398709248

    在解决了自己的痛点之后我意识到其实可能其他人也有类似的痛点,但是可能不在 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. 可视化你的 GitHub 仓库数据,发掘更多的细节——GitHub Insights
    2. 让站点图片加载速度更快——使用 WebP Server 在不改变 URL 的情况下无缝转换图片为 WebP
    5 条回复    2022-02-10 00:39:04 +08:00
    Daige
        1
    Daige  
       2022-01-18 01:09:51 +08:00 via iPhone
    牛逼
    jayvs5200
        2
    jayvs5200  
       2022-01-19 02:07:21 +08:00 via iPhone
    👍
    iqoo
        3
    iqoo  
       2022-01-19 10:31:52 +08:00
    能反代 gh 上任意图片,大概率不久被河蟹
    n0vad3v
        4
    n0vad3v  
    OP
       2022-01-19 21:15:10 +08:00
    @iqoo 感谢提醒,我们也正在考虑是否需要移除这个反代(仅保留 GitHub 头像和 Gravatar 的带 WebP 转换的反代)
    hanmiao
        5
    hanmiao  
       2022-02-10 00:39:04 +08:00
    可以搞个黑名单或者白名单
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   979 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 19ms · UTC 21:06 · PVG 05:06 · LAX 13:06 · JFK 16:06
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.