如何在 Ubuntu 20.04 上使用 gzip 和 Nginx 提高网站性能

笔记首页 >> 教程系列 >> 如何在 Ubuntu 20.04 上使用 gzip 和 Nginx 提高网站性能

如何在 Ubuntu 20.04 上使用 gzip 和 Nginx 提高网站性能

作者选择了COVID-19 救济基金来接受捐赠，作为Write for DOnations计划的一部分。

介绍

网站的性能部分取决于用户浏览器必须下载的所有文件的大小。减少这些传输文件的大小可以使您的网站更快。对于那些在按流量计费的连接上支付带宽使用费的人来说，它还可以使您的网站更便宜。

gzip是一种流行的数据压缩程序。您可以将 Nginx 配置为用于动态gzip压缩它提供的文件。然后，这些文件在检索时由支持它的浏览器解压缩，不会有任何损失，但好处是在 Web 服务器和浏览器之间传输的数据量较少。好消息是压缩支持在所有主要浏览器中无处不在，没有理由不使用它。

由于压缩的一般工作方式和gzip工作原理，某些文件比其他文件压缩得更好。例如，文本文件压缩得非常好，通常会缩小两倍以上。另一方面，JPEG 或 PNG 文件等图像的性质已经被压缩，使用二次压缩gzip产生很少或没有结果。压缩文件会占用服务器资源，因此最好仅压缩将受益于减小大小的文件。

在本教程中，您将配置 Nginx 以使用gzip压缩。这将减少发送给您网站访问者的内容大小并提高性能。

先决条件

要学习本教程，您需要：

一台 Ubuntu 20.04 服务器，具有 sudo 权限的普通非 root 用户。您可以按照此初始服务器设置教程学习如何准备您的服务器。
按照我们的教程如何在 Ubuntu 20.04 上安装 Nginx，在您的服务器上安装 Nginx。

步骤 1 — 创建测试文件

在这一步中，我们将在默认的 Nginx 目录中创建几个测试文件。稍后我们将使用这些文件来检查 Nginx 的默认gzip压缩行为，并测试配置更改是否具有预期效果。

为了推断网络上提供的文件类型，Nginx 不会分析文件内容；那将是非常缓慢的。相反，它查找文件扩展名以确定文件的MIME 类型，这表示其用途。

由于这种行为，我们的测试文件的内容是无关紧要的。通过适当命名文件，我们可以让 Nginx 认为，例如，一个完全空的文件是一个图像，另一个是样式表。

创建一个test.html在默认 Nginx 目录中命名的文件，使用truncate. 此扩展名表示它是一个 HTML 页面：

sudo truncate -s 1k /var/www/html/test.html

让我们以相同的方式再创建几个测试文件：一个jpg图像文件、一个css样式表和一个jsJavaScript 文件：

sudo truncate -s 1k /var/www/html/test.jpg
sudo truncate -s 1k /var/www/html/test.css
sudo truncate -s 1k /var/www/html/test.js

下一步是检查 Nginx 在使用我们刚刚创建的文件在全新安装上压缩请求文件方面的行为。

步骤 2 — 检查默认行为

让我们检查一下指定的 HTML 文件test.html是否进行了压缩。该命令从我们的 Nginx 服务器请求一个文件，并指定可以gzip使用 HTTP 标头 ( Accept-Encoding: gzip)提供压缩内容：

curl -H "Accept-Encoding: gzip" -I http://localhost/test.html

作为响应，您应该看到几个 HTTP 响应标头：

Output
HTTP/1.1 200 OK
Server: nginx/1.18.0 (Ubuntu)
Date: Tue, 09 Feb 2021 19:04:25 GMT
Content-Type: text/html
Last-Modified: Tue, 09 Feb 2021 19:03:41 GMT
Connection: keep-alive
ETag: W/"6022dc8d-400"
Content-Encoding: gzip

在最后一行，您可以看到Content-Encoding: gzip标题。这告诉我们gzip压缩用于发送此文件。这是因为 Nginxgzip即使在全新的 Ubuntu 20.04 安装上也自动启用了压缩。

但是，默认情况下，Nginx 仅压缩 HTML 文件。每个其他文件都将在未压缩的情况下提供，这不是最佳的。为了验证这一点，您可以请求我们以test.jpg相同方式命名的测试图像：

curl -H "Accept-Encoding: gzip" -I http://localhost/test.jpg

结果应该与之前略有不同：

Output
HTTP/1.1 200 OK
Server: nginx/1.18.0 (Ubuntu)
Date: Tue, 09 Feb 2021 19:05:49 GMT
Content-Type: image/jpeg
Content-Length: 1024
Last-Modified: Tue, 09 Feb 2021 19:03:45 GMT
Connection: keep-alive
ETag: "6022dc91-400"
Accept-Ranges: bytes

Content-Encoding: gzip输出中没有标题，这意味着该文件是在没有任何压缩的情况下提供的。

您可以使用测试 CSS 样式表重复测试：

curl -H "Accept-Encoding: gzip" -I http://localhost/test.css

再一次，输出中没有提到压缩：

Output
HTTP/1.1 200 OK
Server: nginx/1.18.0 (Ubuntu)
Date: Tue, 09 Feb 2021 19:06:04 GMT
Content-Type: text/css
Content-Length: 1024
Last-Modified: Tue, 09 Feb 2021 19:03:45 GMT
Connection: keep-alive
ETag: "6022dc91-400"
Accept-Ranges: bytes

在下一步中，我们将告诉 Nginx 压缩将从使用gzip.

第 3 步 – 配置 Nginx 的`gzip`设置

要更改 Nginxgzip配置，请在nano或您喜欢的文本编辑器中打开主 Nginx 配置文件：

sudo nano /etc/nginx/nginx.conf

找到gzip设置部分，如下所示：

/etc/nginx/nginx.conf

. . .
##
# `gzip` Settings
#
#
gzip on;
gzip_disable "msie6";

# gzip_vary on;
# gzip_proxied any;
# gzip_comp_level 6;
# gzip_buffers 16 8k;
# gzip_http_version 1.1;
# gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript;
. . .

可以看到指令gzip确实启用了压缩gzip on，但是几个额外的设置用#符号注释掉了，没有任何效果。我们将对本节进行几处更改：

通过取消注释所有注释行（即，删除#行首）来启用其他设置
添加gzip_min_length 256;指令，它告诉 Nginx 不要压缩小于 256 字节的文件。非常小的文件几乎无法从压缩中受益。
在gzip_types指令中附加表示 Web 字体、图标、XML 提要、JSON 结构化数据和 SVG 图像的其他文件类型。

应用这些更改后，设置部分应如下所示：

/etc/nginx/nginx.conf

. . .
##
# `gzip` Settings
#
#
gzip on;
gzip_disable "msie6";

gzip_vary on;
gzip_proxied any;
gzip_comp_level 6;
gzip_buffers 16 8k;
gzip_http_version 1.1;
gzip_min_length 256;
gzip_types
  application/atom+xml
  application/geo+json
  application/javascript
  application/x-javascript
  application/json
  application/ld+json
  application/manifest+json
  application/rdf+xml
  application/rss+xml
  application/xhtml+xml
  application/xml
  font/eot
  font/otf
  font/ttf
  image/svg+xml
  text/css
  text/javascript
  text/plain
  text/xml;
. . .

保存并关闭文件以退出。

要启用新配置，请重新启动 Nginx：

sudo systemctl restart nginx

接下来，让我们确保我们的新配置有效。

第 4 步 – 验证新配置

对测试 HTML 文件执行与之前相同的请求：

curl -H "Accept-Encoding: gzip" -I http://localhost/test.html

由于已经为该文件类型启用了压缩，因此响应将保持不变：

Output
HTTP/1.1 200 OK
Server: nginx/1.18.0 (Ubuntu)
Date: Tue, 09 Feb 2021 19:04:25 GMT
Content-Type: text/html
Last-Modified: Tue, 09 Feb 2021 19:03:41 GMT
Connection: keep-alive
ETag: W/"6022dc8d-400"
Content-Encoding: gzip

但是，如果我们请求之前未压缩的 CSS 样式表，响应将有所不同：

curl -H "Accept-Encoding: gzip" -I http://localhost/test.css

现在gzip正在压缩文件：

Output
HTTP/1.1 200 OK
Server: nginx/1.18.0 (Ubuntu)
Date: Tue, 09 Feb 2021 19:21:54 GMT
Content-Type: text/css
Last-Modified: Tue, 09 Feb 2021 19:03:45 GMT
Connection: keep-alive
Vary: Accept-Encoding
ETag: W/"6022dc91-400"
Content-Encoding: gzip

在步骤 1 中创建的所有测试文件中，只有test.jpg图像文件应保持未压缩状态。我们可以用同样的方式测试：

curl -H "Accept-Encoding: gzip" -I http://localhost/test.jpg

没有gzip压缩：

Output
HTTP/1.1 200 OK
Server: nginx/1.18.0 (Ubuntu)
Date: Tue, 09 Feb 2021 19:25:40 GMT
Content-Type: image/jpeg
Content-Length: 1024
Last-Modified: Tue, 09 Feb 2021 19:03:45 GMT
Connection: keep-alive
ETag: "6022dc91-400"
Accept-Ranges: bytes

此处Content-Encoding: gzip标题未按预期出现在输出中。

如果是这种情况，则您已gzip成功在 Nginx 中配置了压缩。

结论

更改 Nginx 配置以利用gzip压缩很容易，但好处可能是巨大的。带宽有限的访问者不仅会更快地访问站点，而且所有其他用户也会看到明显的速度提升。搜索引擎也会对网站加载速度更快感到高兴。加载速度现在是搜索引擎如何对网站进行排名的关键指标，使用gzip是改进它的一大步。

觉得文章有用？

点个广告表达一下你的爱意吧！