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

作者选择了 COVID-19 救援基金作为 Write for Donations计划的一部分接受捐款。

介绍

网站的性能部分取决于用户浏览器必须下载的所有文件的大小。减少这些传输的文件的大小可以使您的网站更快。

gzip是一个流行的数据压缩程序. 您可以配置 Nginx 以使用 gzip 来压缩它在飞行中服务的文件. 然后这些文件由支持它时恢复的浏览器解压缩,而没有任何损失,但在网页服务器和浏览器之间传输的数据量较小的好处。 好消息是,压缩支持在所有主要浏览器中普遍存在,没有理由不使用它。

例如,文本文件压缩得非常好,往往结局大于两倍。另一方面,像JPEG或PNG文件这样的图像已经被压缩了,使用gzip的第二次压缩结果很少或没有结果。

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

前提条件

要遵循本教程,您将需要:

步骤 1 - 创建测试文件

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

要推断在网络上提供什么类型的文件, Nginx 不会分析文件内容;这将是非常慢的;相反,它会查看文件扩展,以确定文件的 _MIME 类型,这表示其目的。

由于这种行为,我们的测试文件的内容是无关紧要的. 通过正确命名文件,我们可以欺骗 Nginx 认为,例如,一个完全空的文件是一个图像,另一个是风格表。

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

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

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

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

下一步是检查 Nginx 如何在新安装中压缩我们刚刚创建的文件的请求文件。

步骤2 - 检查默认行为

让我们检查一下名为 test.html 的 HTML 文件是否配备了压缩,该命令要求我们的 Nginx 服务器提供一个文件,并指定使用 HTTP 标题( Accept-Encoding: gzip)提供 gzip 压缩的内容是否正常:

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

作为回应,您应该看到几个HTTP响应标题:

1[secondary_label Output]
2HTTP/1.1 200 OK
3Server: nginx/1.18.0 (Ubuntu)
4Date: Tue, 09 Feb 2021 19:04:25 GMT
5Content-Type: text/html
6Last-Modified: Tue, 09 Feb 2021 19:03:41 GMT
7Connection: keep-alive
8ETag: W/"6022dc8d-400"
9Content-Encoding: gzip

在最后一行中,你可以看到内容编码:gzip标题,这告诉我们gzip压缩是用来发送这个文件的。

但是,默认情况下, Nginx 只压缩 HTML 文件. 所有其他文件都将不压缩,这不如最佳。 为了验证这一点,您可以以相同的方式请求我们的测试图像名为 test.jpg:

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

结果应该与以前略有不同:

 1[secondary_label Output]
 2HTTP/1.1 200 OK
 3Server: nginx/1.18.0 (Ubuntu)
 4Date: Tue, 09 Feb 2021 19:05:49 GMT
 5Content-Type: image/jpeg
 6Content-Length: 1024
 7Last-Modified: Tue, 09 Feb 2021 19:03:45 GMT
 8Connection: keep-alive
 9ETag: "6022dc91-400"
10Accept-Ranges: bytes

输出中没有内容编码:gzip标题,这意味着该文件没有任何压缩。

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

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

再次,输出中没有提到压缩:

 1[secondary_label Output]
 2HTTP/1.1 200 OK
 3Server: nginx/1.18.0 (Ubuntu)
 4Date: Tue, 09 Feb 2021 19:06:04 GMT
 5Content-Type: text/css
 6Content-Length: 1024
 7Last-Modified: Tue, 09 Feb 2021 19:03:45 GMT
 8Connection: keep-alive
 9ETag: "6022dc91-400"
10Accept-Ranges: bytes

在下一步,我们会告诉 Nginx 压缩所有类型的文件,这些文件将从使用gzip中受益。

步骤 3 — 配置 Nginx 的gzip设置

若要更改 Nginx 'gzip' 配置,请在 'nano' 或您最喜欢的文本编辑器中打开主要的 Nginx 配置文件:

1sudo nano /etc/nginx/nginx.conf

找到gzip设置部分,它看起来像这样:

 1[label /etc/nginx/nginx.conf]
 2. . .
 3##
 4# `gzip` Settings
 5#
 6#
 7gzip on;
 8gzip_disable "msie6";
 9
10# gzip_vary on;
11# gzip_proxied any;
12# gzip_comp_level 6;
13# gzip_buffers 16 8k;
14# gzip_http_version 1.1;
15# gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript;
16. . .

您可以看到gzip压缩确实被gzip on指令启用,但一些额外的设置被评论为#标志,并且没有效果。

  • 啟用附加設定,不評論所有評論的行(即,在行開始時刪除「#」)
  • 添加「gzip_min_length 256;」指令,指示 Nginx 不要壓縮小於 256 字節的檔案。

应用这些更改后,设置部分应该是这样的:

 1[label /etc/nginx/nginx.conf]
 2. . .
 3##
 4# `gzip` Settings
 5#
 6#
 7gzip on;
 8gzip_disable "msie6";
 9
10gzip_vary on;
11gzip_proxied any;
12gzip_comp_level 6;
13gzip_buffers 16 8k;
14gzip_http_version 1.1;
15gzip_min_length 256;
16gzip_types
17  application/atom+xml
18  application/geo+json
19  application/javascript
20  application/x-javascript
21  application/json
22  application/ld+json
23  application/manifest+json
24  application/rdf+xml
25  application/rss+xml
26  application/xhtml+xml
27  application/xml
28  font/eot
29  font/otf
30  font/ttf
31  image/svg+xml
32  text/css
33  text/javascript
34  text/plain
35  text/xml;
36. . .

保存并关闭文件以退出。

要启用新的配置,请重新启动 Nginx:

1sudo systemctl restart nginx

接下来,让我们确保我们的新配置工作。

步骤 4 – 验证新配置

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

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

答案将保持相同,因为该文件类型已经启用了压缩:

1[secondary_label Output]
2HTTP/1.1 200 OK
3Server: nginx/1.18.0 (Ubuntu)
4Date: Tue, 09 Feb 2021 19:04:25 GMT
5Content-Type: text/html
6Last-Modified: Tue, 09 Feb 2021 19:03:41 GMT
7Connection: keep-alive
8ETag: W/"6022dc8d-400"
9Content-Encoding: gzip

但是,如果我们要求以前未压缩的 CSS 样式表,答案将是不同的:

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

现在gzip正在压缩文件:

 1[secondary_label Output]
 2HTTP/1.1 200 OK
 3Server: nginx/1.18.0 (Ubuntu)
 4Date: Tue, 09 Feb 2021 19:21:54 GMT
 5Content-Type: text/css
 6Last-Modified: Tue, 09 Feb 2021 19:03:45 GMT
 7Connection: keep-alive
 8Vary: Accept-Encoding
 9ETag: W/"6022dc91-400"
10Content-Encoding: gzip

在第一步创建的所有测试文件中,只有test.jpg图像文件才能保持不压缩。

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

没有gzip压缩:

 1[secondary_label Output]
 2HTTP/1.1 200 OK
 3Server: nginx/1.18.0 (Ubuntu)
 4Date: Tue, 09 Feb 2021 19:25:40 GMT
 5Content-Type: image/jpeg
 6Content-Length: 1024
 7Last-Modified: Tue, 09 Feb 2021 19:03:45 GMT
 8Connection: keep-alive
 9ETag: "6022dc91-400"
10Accept-Ranges: bytes

在这里,内容编码:gzip标题在输出中不如预期。

如果是这样,则您在 Nginx 中成功配置了gzip压缩。

结论

更改 Nginx 配置以使用gzip压缩很容易,但这些好处可以是巨大的. 不仅限带宽的访问者会更快地接收网站,但所有其他用户也会看到显著的速度增长。 搜索引擎也会对网站加载速度更快感到高兴。 加载速度现在是搜索引擎排名网站的关键指标,使用gzip是改进它的一大步。

Published At
Categories with 技术
Tagged with
comments powered by Disqus