WordPress网站速度优化（二）：Nginx 启用 Gzip 压缩、使用插件压缩图片

上篇文章我们对谷歌字体、Gravatar头像、国外前端公共库CDN进行了加速，禁用了WordPress自带Emoji，通过这四项优化，使我们的网站首次打开速度得到了提升。本篇文章将继续对我们的网站进行优化，使其拥有更快的打开速度。

Nginx 启用 Gzip 压缩

Gzip是一种广泛使用的数据压缩工具和文件格式，它能很好的压缩HTML/CSS/JS文件体积（可减少60%-70%的体积，但对图片/视频等二进制文件压缩效果不佳），节省网络储存空间和网络带宽。

工作流程‌：服务器实时压缩文本资源→传输压缩包→浏览器自动解压渲染。

为了让我们的网站也具备 Gzip 压缩能力，可以通过Nginx启用Gzip。

Nginx启用Gzip

编辑 Nginx 主配置文件

nano /root/my_website/nginx/main-conf/nginx.conf

在 http { … } 块的内部，找到gzip on; 这一行（通常在文件末尾），然后添加以下推荐的配置：

# Gzip 设置开始
gzip on;
gzip_vary on;  # 告诉代理服务器/CDN，文件是否压缩取决于请求头
gzip_proxied any; # 允许代理（CDN）缓存Gzip结果
gzip_comp_level 5; # 压缩级别 1-9 (5是性能和压缩率的最佳平衡点)
gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript; # 确保压缩这些类型的文件
# Gzip 设置结束

保存并退出，重启 Nginx 容器使配置生效:

cd /root/my_website
docker compose restart nginx

判断 Nginx 是否成功开启了 Gzip 压缩

验证方法

1. 打开浏览器，使用“无痕/隐私模式”。
2. 打开“开发者工具” (F12)，切换到“网络 (Network)”面板。
3. 打开我们的网站：anjir.top。
4. 查看响应头 (Response Headers): 找到 HTML 文档的请求（状态码 200）。 查看响应头中是否包含这一行：Content-Encoding: gzip如果看到了Content-Encoding: gzip，说明 Nginx 成功地对内容进行了压缩。我们的网站现在具备 Gzip 能力了。

使用插件压缩图片

无论我们是用相机还是手机，拍摄出来的图片，为了保留更多的细节，通常都很大（几 MB 到几十 MB）。而网页上展示的图片，根本不需要那么高的精度，一个 3MB 的图片，和一个 300KB 的图片在屏幕上看起来没有区别。可浏览器却需要下载完所有图片才能完整地渲染页面，所以，如果将3MB的图片压缩成300KB，我们的网站打开速度会大大提升。

我们可以使用插件来将个人网站上的图片压缩，本文将简单介绍我使用的图片压缩插件：reSmush.it，它并不是一个完美的图片压缩插件，仅仅是刚好满足我的需求，如果你有使用过更好的图片压缩插件，欢迎评论区推荐。

reSmush.it 是一个免费插件，直接在网站后台的WordPress插件市场就可以搜索到。它可以优化不超过5 MB大小的 PNG、JPG、GIF、BMP 和 TIFF 图片，不限数量。界面是英文的，如果英语不好，可以借助浏览器自带的翻译插件，翻译成中文。使用非常简单，不用多教，插件仪表盘直接点击压缩就行了。具体设置可以参考我的配置，如图：

“上传优化”不建议打开，因为这个插件优化起来很慢，上传就优化会卡住。因为我们的网站配置低，为了节省资源，就不要原图了，保留优化好的图片就行，所以“停用备份”要勾上。

好了，通过上述优化，我们的网站打开速度又快一点点了。