How to use gzip and nginx to improve website opening speed and overall performance

Time:2021-4-18

You know, the opening speed of the website depends on the size of the web file that the browser opens and downloads. If the number of transmitted page content files is reduced, the opening speed of your website will be accelerated. Especially for the mobile users, the speed of opening the website is limited by the mobile network, so it is very important to compress the website page content.

Gzip is a very popular way of data compression. You can open gzip in nginx configuration to compress web files. Then, these files are decompressed by the browser, and the files will not be affected by any changes. But compressed files will occupy server resources, so it’s better to compress those files with better effect. For example, text file compression effect is very good, usually more than twice the size. However, JPG or PNG files have already been compressed, so the effect of second compression is not particularly obvious.

This article focuses on how to configure nginx to enable gzip compression.

environment

  • Ubuntu 20.04 server
  • Root privilege or non root user with sudo privilege

    1、 Create test file

In this step, we will create several test files in the default nginx directory. We’ll use these files later to check whether the default behavior of nginx worksgzipCompress and test whether the configuration changes have the desired effect.

First, create several test files, which are mainly used to view our gzip compression effect. Gzip does not analyze the file content. It mainly uses the file extension to determine the file type. If it also analyzes the file content, the whole 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、 Command mode to view compression effect

Using curl command mode, 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, it appearsContent-Encoding: gzipword. Indicates that the server is using gzip compression to send files. By default, nginx compresses only HTML files. In this command, you can see that the file has been compressed. But other file formats are not compressed.
We can verify what we have just said with the following command.

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

Take another look at the result, which 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

It does not appear in the outputContent-Encoding: gzipThis means that the file is not compressed at all.
You can also use this method to test CSS and other style files.

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

As a result, there is no 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

3、 Configure nginx to enable gzip

This section mainly deals with the related configuration, so that gzip can handle the compression of several other file formats.

You can use nano or VIM to edit the nginx configuration file.

sudo nano /etc/nginx/nginx.conf

findgzipThe setup section is as follows:

/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;
. . .

Because we use Ubuntu 20.04. So gzip is on by default. But some settings are invalid, so we need to make some changes:

  • Enable other settings (i.e., delete) by undoing # in front of the comment line#(symbol)
  • add togzip_min_length 256;Parameter, which tells nginx not to compress files smaller than 256 bytes, because very small files are not necessary. Compressing such files will affect the efficiency of the server.
  • staygzip_typesParameter. These file types can be web font, image, XML, JSON structured data or SVG image file.

After applying these changes, the settings section should look like this:

/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;
. . .

Save and close the file to exit. To enable the new configuration, you need to restart nginx:

sudo systemctl restart nginx

4、 Make sure all configurations are correct

Repeat the previous test steps and execute the corresponding command request:

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

Because compression has been turned on by default for HTML files, the execution result of this command remains unchanged

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

Then let’s test the previously uncompressed CSS style sheet to see what changes the result will have

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

You can see thatgzipCompressing file:

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

We can test the JPG file in the same way:

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

Haven’t seengzipCompression:

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

Because in the previous configuration, we did not add image / jpeg.
In this case, we have successfully configured gzip in nginx.

conclusion

As you can see, gzip is easy to configure, and the speed improvement is also very obvious. I use it on my own websitewww.academicphd.comThis kind of parameter has been added.

How to use gzip and nginx to improve website opening speed and overall performance

Search engines also like this kind of loading method very much. If you want to improve the ranking of search engines, it is necessary to add gzip.

This work adoptsCC agreementReprint must indicate the author and the link of this article