如何在Ubuntu20.04上使用gzip和Nginx提高网站性能
作者选择了 COVID-19 Relief Fund 作为 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 认为,例如,一个完全空的文件是图像,另一个是样式表。
使用 truncate
在默认 Nginx 目录中创建一个名为 test.html
的文件。 这个扩展表示它是一个 HTML 页面:
sudo truncate -s 1k /var/www/html/test.html
让我们以相同的方式再创建几个测试文件:一个 jpg
图像文件、一个 css
样式表和一个 js
JavaScript 文件:
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 步 — 检查默认行为
让我们检查一下名为 test.html
的 HTML 文件是否经过压缩。 该命令从我们的 Nginx 服务器请求一个文件,并指定可以使用 HTTP 标头 (Accept-Encoding: gzip
) 提供 gzip
压缩内容:
curl -H "Accept-Encoding: gzip" -I http://localhost/test.html
作为响应,您应该会看到几个 HTTP 响应标头:
OutputHTTP/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
压缩来发送此文件。 这是因为 Nginx 自动启用了 gzip
压缩,即使在全新的 Ubuntu 20.04 安装中也是如此。
但是,默认情况下,Nginx 只压缩 HTML 文件。 其他所有文件都将以未压缩的形式提供,这不是最佳的。 为了验证这一点,您可以以相同的方式请求我们名为 test.jpg
的测试图像:
curl -H "Accept-Encoding: gzip" -I http://localhost/test.jpg
结果应该与以前略有不同:
OutputHTTP/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
再一次,输出中没有提到压缩:
OutputHTTP/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
设置
要更改 Nginx gzip
配置,请在 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
由于该文件类型已启用压缩,因此响应将保持不变:
OutputHTTP/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
正在压缩文件:
OutputHTTP/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
压缩:
OutputHTTP/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
标头未按预期出现在输出中。
如果是这种情况,您已经在 Nginx 中成功配置了 gzip
压缩。
结论
更改 Nginx 配置以利用 gzip
压缩很容易,但好处可能是巨大的。 不仅带宽有限的访问者可以更快地接收站点,而且所有其他用户也会看到明显的速度提升。 搜索引擎也会对网站加载速度更快感到高兴。 加载速度现在是搜索引擎排名网站的关键指标,使用 gzip
是改进它的一大步。