如何通过 gzip 和 nginx 来提高网站打开速度及整体性能

本贴最后更新于 1360 天前,其中的信息可能已经时移世易

要知道,网站的打开速度取决于浏览器打开下载的网页文件大小。如果传输的页面内容文件减少,那你网站的打开速度一定会加快。特别是手机端的用户,打开网站速度受限于移动端网络,所以压缩网站页面内容显得至关重要。

gzip 是一种非常流行的数据压缩方式。你可以在 nginx 配置中开启 gzip 来压缩网页文件。然后,这些文件又由浏览器解压缩,文件不会受任何。但是压缩文件是会占用服务器资源,所以最好压缩那些效果比较好的文件。比如文本文件压缩效果非常好,通常会缩小两倍多。而 JPG 或 PNG 这类文件,本身就已经进行格式压缩,所以再做二次压缩,效果并不是特别明显。

本文主要讲一下如何配置 nginx 来开启 gzip 压缩。

环境

  • ubuntu 20.04 服务器
  • root 权限或具有 sudo 特权的非 root 用户

一、创建测试文件

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

首先,创建几个测试文件,这些文件主要用来查看我们的 gzip 压缩效果。gzip 是不会分析文件内容的,它主要通过文件扩展名来判断文件类型,如果还分析文件内容,那整个效率就会大大降低。所以我们可以创建一些图像文件、html 文件和一些样式文件。

sudo truncate -s 1k /var/www/html/test.html
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 在使用我们刚创建的文件在全新安装中压缩请求的文件时的行为。

二、命令方式查看压缩效果

使用 curl 命令方式,添加标头 Accept-Encoding: gzip,来查看各文件的压缩结果。

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

在最后一行,出现 Content-Encoding: gzip 字样。说明服务器正在用 gzip 压缩来发送文件。默认情况下,nginx 仅压缩 html 文件。所有在这个命令中可以看到文件做了压缩处理。但其它的文件格式,并未做压缩处理。
可以通过下面这条命令来验证我们刚才的说法。

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

结果一样,没有出现 Content-Encoding: gzip

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 功能

本节主要操作相关配置,让 gzip 可以处理其它几种文件格式的压缩。

你可以使用 nano 或 vim 编辑 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;
. . .

因为我们用的是 ubuntu 20.04。所以默认情况下,gzip 是开启的。但有些设置无效,所以我们需要做一些修改:

  • 通过取消注释行前面的#来启用其他设置(即,删除 # 符号)
  • 添加 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

四、确保所有的配置正确

重复之前的测试步骤,执行相应的命令请求:

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

因为 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

我们可以用相同的方式测试一下 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

因为在之前的配置中,我们并没有添加 image/jpeg。
在这种情况下,我们已经在 Nginx 中成功配置了 gzip。

结论

可以看出,gzip 很容易配置,而且带来的速度提升也非常明显,我在自己的网站 www.academicphd.com 都添加了这类参数。

image.png

搜索引擎也非常喜欢这类加载方式,如果想提高搜索引擎的排名,增加 gzip 是非常有必要的。

  • NGINX

    NGINX 是一个高性能的 HTTP 和反向代理服务器,也是一个 IMAP/POP3/SMTP 代理服务器。 NGINX 是由 Igor Sysoev 为俄罗斯访问量第二的 Rambler.ru 站点开发的,第一个公开版本 0.1.0 发布于 2004 年 10 月 4 日。

    312 引用 • 546 回帖
  • Gzip

    gzip (GNU zip)是 GNU 自由软件的文件压缩程序。我们在 Linux 中经常会用到后缀为 .gz 的文件,它们就是 Gzip 格式的。现今已经成为互联网上使用非常普遍的一种数据压缩格式,或者说一种文件格式。

    9 引用 • 12 回帖 • 134 关注

相关帖子

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...