1.网站性能测试

今天使用了PageSpeed Insights进行了网页性能测试，又包含电脑端和手机端，结果如下:
手机端：

电脑端：

在查看优化结果，都会提到使用采用新一代格式提供图片：

这个图片的格式问题也是，影响网站性能的主要原因之一，因此也是想找到解决办法，当然，下面也给出了建议：“WebP 和 AVIF 等图片格式的压缩效果通常优于 PNG 或 JPEG，因而下载速度更快，消耗的数据流量更少。”

在相关的网站也找到了，相应的解释：

2.为什么以 AVIF 或 WebP 格式提供图像？

AVIF 和 WebP 是图像格式，与较旧的 JPEG 和 PNG 对应物相比，它们具有出色的压缩和质量特征。以这些格式而不是 JPEG 或 PNG 对图像进行编码意味着它们将加载更快并消耗更少的蜂窝数据。

AVIF 在 Chrome、Firefox 和 Opera 中受支持，并且与具有相同质量设置的其他格式相比，文件大小更小。有关AVIF的更多信息，请参阅提供 AVIF 图像代码实验室。

最新版本的 Chrome、Firefox、Safari、Edge 和 Opera 支持 WebP，并为 Web 上的图像提供更好的有损和无损压缩。

因此，我也找到了想的解决办法：使用WebP来实现图片的无损和有损压缩。

3.什么是webP

首先，我们知道图片的各种格式，比如：jpg、png、bmp等格式，还有就是图片的压缩。

无压缩。不对图片数据进行压缩处理，能准确地呈现原图片。 BMP 格式就是其中之一。
无损压缩。压缩算法对图片的所有的数据进行编码压缩，能在保证图片的质量的同时降低图片的尺寸。 png 是其中的代表。
有损压缩。压缩算法不会对图片所有的数据进行编码压缩，而是在压缩的时候，去除了人眼无法识别的图片细节。因此有损压缩可以在同等图片质量的情况下大幅降低图片的尺寸。其中的代表是 jpg。

webP的官方介绍：
这是一个基于 Golang 的服务器，它允许您即时提供 WebP 图像。jpg,jpeg,png它会默认转换文件，这可以通过编辑config.json…

目前支持的图片格式：JPEG、PNG、BMP、GIF（暂时为静态图片）
例如，当您访问时https://a.com/1.jpg，它会在image/webp不改变 URL 的情况下使用。

什么是 WebP?
WebP 是一种现代图像格式，可为 Web 上的图像提供卓越的无损和有损压缩。使用 WebP，网站管理员和 Web 开发人员可以创建更小、更丰富的图像，从而使 Web 更快。

为什么选择 WEBP
与 PNG 相比，WebP 无损图像的大小要小 26%。在同等 SSIM 质量指数下，WebP 有损图像比可比较的 JPEG 图像小 25-34%。

上面已经说了那么多，就直接开始了！

4.部署 webp_server_go

4.1、适用说明

我的网站的版本是:CentOS Linux release 7.8.2003 (Core)，那么本教程也只能使用CentOS Linux release 7。

4.2、搭建运行环境

在centos下需要首先安装libaom-devel -y

yum install libaom-devel -y

否则会一直提示：“error while loading shared libraries: libaom.so.3”

Ubuntu用户：

apt install libaom-dev -y
ln -s /usr/lib/x86_64-linux-gnu/libaom.so /usr/lib/x86_64-linux-gnu/libaom.so.3

4.3、下载 webp server go

先创建安装文件夹

mkdir /opt/webps

cd /opt/webps

下载webp_server_go，最新版本是WebP Server Go 0.4.4。下载地址：《WebP Server Go》

wget https://github.com/webp-sh/webp_server_go/releases/download/0.4.4/webp-server-linux-amd64 -O webp-server

4.4、部署webp server go

给予执行权限：

chmod +x webp-server

创建config.json

vim config.json

添加内容

{
        "HOST": "127.0.0.1",
        "PORT": "3333",
        "QUALITY": "80",
        "IMG_PATH": "/root/.halo",
        "EXHAUST_PATH": "/root/.halo/cache",
        "ALLOWED_TYPES": ["jpg","png","jpeg","bmp"],
        "ENABLE_AVIF": false
}

参数解释：

HOST：一般不修改。
PORT：webp_server_go 的运行端口。
QUALITY：转换质量，默认为 80%。
IMG_PATH：固定格式，/运行 Halo 的用户名/.halo
EXHAUST_PATH：固定格式，/运行 Halo 的用户名/.halo/cache
ALLOWED_TYPES：需要转换的格式
ENABLE_AVIF：禁止AVIF
默认情况下禁用 AVIF 支持，因为将图像转换为 AVIF 会消耗 CPU。

我的网站使用HALO搭建的，因此路径需要你自己根据实际情况配置。

4.5、创建webp server go服务

使用 systemd 进行状态管理
创建 service 文件：

vim /etc/systemd/system/webps.service

写入：

[Unit]
Description=WebP Server
Documentation=https://github.com/n0vad3v/webp_server_go
After=nginx.target

[Service]
Type=simple
StandardError=journal
AmbientCapabilities=CAP_NET_BIND_SERVICE
WorkingDirectory=/opt/webps
ExecStart=/opt/webps/webp-server --config /opt/webps/config.json
ExecReload=/bin/kill -HUP $MAINPID
Restart=always
RestartSec=3s


[Install]
WantedBy=multi-user.target

需要注意的是，ExecStart 命令中的程序路径和配置文件路径一定要正确，结合你的实际情况填写。

然后执行：

systemctl daemon-reload
systemctl enable webps.service
systemctl start webps.service

查看运行状态：

systemctl status webps.service

如果没有问题，那么会输出以下日志：

WebP Server is running at 127.0.0.1:3333

4.6、使用 Nginx 进行代理

如果你的 Halo 是使用 Nginx 反向代理的话。

修改 halo.conf
在 server 节点添加：

location ^~ /upload/ {
        proxy_pass http://127.0.0.1:3333;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_hide_header X-Powered-By;
        proxy_set_header HOST $http_host;
        add_header Cache-Control 'no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0';
}

重载 Nginx 配置：

检查配置文件是否有问题

nginx -t 

nginx -s reload

5.验证

5.1、打开页面

打开页面后，发现图片已经变成webp格式！图片的清晰度，基本也没啥变化！YYDS!

参考资料：
1.《PageSpeed Insights地址》
2.《Serve images in modern formats》
3.《WebP Server Document》
4.《让站点图片加载速度更快——引入 WebP Server 无缝转换图片为 WebP》
5.《优雅的让 Halo 支持 webp 图片输出》
6.《 webp server go》

目录CONTENT

让网站支持 webp 图片输出,提高网站性能！