Duet G. Blog

Keep It Simple, Stupid

使用WebP Server Go优化网站图片

之前介绍了使用WebP Cloud Services的公共服务做代理让Gravatar的头像能在大陆正常访问的方法。

设置好之后就决定想尝试一下他们的图片服务。但是官方制作的Wordpress插件着实用起来不顺手:只能将正文里本地图片的地址替换成代理地址,但特色图片却不能替换。要知道像2023这种官方主题,如果文章里不怎么插入图片的话,特色图片反而是页面加载数据量的大头。自行修改插件失败之后,我决定寻找替代的方案。

按照官方插件作者的Blog我找到了WebP Cloud Services后端使用的开源程序WebP Server Go。开源代码和付费服务其实是一个作者。研究了一下GitHub上的README.md以及官网的文档,用Docker很快就部署完成了。简单修改了一下Nginx的配置文件,Blog页面的加载速度果然快了不少。特色图片用的大分辨率的图果然影响了不少速度啊。

简单说一下部署流程和注意事项,默认你要加速的也是Wordpress,并且服务器里已经装好了Docker。

首先建立一个工作目录,并且在里面创建一个 docker-compose.yml

version: '3'

services:
  webp:
    image: webpsh/webp-server-go
    # image: ghcr.io/webp-sh/webp_server_go
    restart: always
    environment:
      - MALLOC_ARENA_MAX=1
    volumes:
      - ./path/to/pics:/opt/pics  #./path/to/pics 改成你的Wordpress目录
      - ./exhaust:/opt/exhaust
      - ./metadata:/opt/metadata
    ports:
      -  127.0.0.1:3333:3333
    deploy:
      resources:
        limits:
          memory: 400M
    memswap_limit: 400M

假设你的图片和网站路径有着这样的对应模式:

图片路径

/var/www/duetg.com/path/demo.jpg

网站路径

https://duetg.com/path/demo.jpg

那么docker-compose.yml里的 ./path/to/pics 就应该改成 /var/www/duetg.com

exhaust 和 metadata 会自动在工作文件夹中生成,exhaust 文件夹中包含已经转换完毕的图片缓存,以备下次请求的时候直接使用。这两个文件夹也可以自行定义位置。

Docker Compose文件写好保存退出后,就可以拉取镜像创建容器了

docker compose up -d

接下来我们修改Nginx配置文件。原理很简单,在 server 块里新建一个 location,运用反向代理把和图片相关的请求直接转到Docker容器映射的3333端口就好。location 有两种写法,一种是直接指定到Wordpress的图片附件文件夹

location ^~ /wp-content/uploads/ {
    proxy_pass http://127.0.0.1:3333;
}

还有一种是在整个目录里用正则表达式过滤和图片相关的文件扩展名

location ~* \.(?:jpg|jpeg|gif|png)$ {
    proxy_pass http://127.0.0.1:3333;
}

如果你还使用了Cloudflare之类的CDN加速,你需要让CDN服务器知道这些图片不缓存,所以还要在 location 块里再加上下面这行

location ~* \.(?:jpg|jpeg|gif|png)$ {
    add_header Cache-Control 'private';
    proxy_pass http://127.0.0.1:3333;
}

由于WebP Server Go会自动拒绝原本已经是WebP图片的转换请求,导致返回是空值,如果你的网站已经有一部分WebP图片了,建议还是用按扩展名过滤的方法来向服务请求图片转换更好。

使用自托管的WebP转换服务和使用云服务相比,优点除了有免费且不限量外,其实更重要还在于网页里的图片引用地址不会被更改,这点也是我所看中的。