You should know that the opening speed of a website depends on the size of the webpage file that the browser opens and downloads. If the transmitted page content files are reduced, the opening speed of your website will definitely increase. Especially for mobile users, the opening speed of the website is limited by the mobile network, so it is very important to compress the content of the website pages.
Gzip is a very popular data compression method. You can enable gzip in the nginx configuration to compress web files. Then, these files are decompressed by the browser, and the files will not be affected by any. However, compressing files will take up server resources, so it is best to compress those files with better results. For example, text files are compressed very well, usually by more than twice. And files such as JPG or PNG have already been formatted compressed, so if you do secondary compression, the effect is not particularly obvious.
This article mainly talks about how to configure nginx to enable gzip compression.
surroundings
- ubuntu 20.04 server
- Root privileges or non-root users with sudo privileges
One, create a test file
In this step, we will create several test files in the default Nginx directory. Later we will use these files to check whether Nginx's default behavior is gzipcompression, and to test whether configuration changes have the expected effect.
First, create a few test files, these files are mainly used to view our gzip compression effect. gzip does not analyze the file content, it mainly judges the file type by the file extension. If the file content is also analyzed, the overall efficiency will be greatly reduced. So we can create some image files, html files and some style files.
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
The next step is to check the behavior of Nginx when compressing the requested file in a fresh installation using the file we just created.
2. View the compression effect by command
Use the curl command method to add the header Accept-Encoding: gzip to view the compression results of each file.
curl -H "Accept-Encoding: gzip" -I http://localhost/test.html
You can see the following results:
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
On the last line, the words appear Content-Encoding: gzip. The server is using gzip compression to send the file. By default, nginx only compresses html files. All in this command you can see that the file has been compressed. However, other file formats are not compressed.
You can use the following command to verify what we just said.
curl -H "Accept-Encoding: gzip" -I http://localhost/test.jpg
Look at the result again, it is different from the previous one:
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
Nothing appears in the output Content-Encoding: gzip, which means that the file has not been compressed in any way.
You can also use this method to test style files such as css.
curl -H "Accept-Encoding: gzip" -I http://localhost/test.css
The result is the same, Content-Encoding: gzip does not appear
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
Three, configure Nginx to enable gzip function
This section mainly operates the related configuration, so that gzip can handle the compression of several other file formats.
You can use nano or vim to edit nginx configuration files.
sudo nano /etc/nginx/nginx.conf
Find the gzipsettings section as shown below:
/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都添加了这类参数。
搜索引擎也非常喜欢这类加载方式，如果想提高搜索引擎的排名，增加gzip是非常有必要的。