The speed of website loading depends on the size of all files downloaded by the browser. Reducing the size of the files to be transferred not only makes the website load faster, but also cheaper for those who have to pay for bandwidth usage.
gzip is a popular data compression program. You can configure Nginx to use gzip to compress the files it is running on. Then, these files are decompressed by the browser that supports it during retrieval without any loss, but the amount of data transferred between the web server and the browser is smaller.
Due to the general way compression works, and the way gzip works, some files compress better than others. For example, text files are compressed very well, and the result is usually more than twice as small. On the other hand, images such as JPEG or PNG files are already compressed by their nature, and the second compression using gzip will hardly produce any results. Compressing files consumes server resources, so it is best to compress only those files that greatly reduce their size.
In this guide, we will discuss how to configure Nginx installed on an Ubuntu 14.04 server to use gzip compression to reduce the size of content sent to website visitors.
To follow this tutorial, you need:
In this step, we will create several test files in the default Nginx directory for text gzip compression.
In order to decide what kind of file to provide over the network, Nginx will not analyze the content of the file because it is not fast enough. Instead, it just looks up the file extension to determine its MIME type, which indicates the purpose of the file.
Due to this behavior, the content of the test file is irrelevant. By naming the files appropriately, we can trick Nginx into thinking that a completely empty file is an image and the other is a style sheet.
In our configuration, Nginx will not compress very small files, so we will create a test file of exactly 1 kilobyte in size. This will allow us to verify whether Nginx uses compression where compression should be used, compressing one type of file and not using other types of files.
Use truncate to create a one-kilobyte file named test.html in the default Nginx directory. The extension indicates that it is an HTML page.
sudo truncate -s 1k /usr/share/nginx/html/test.html
Let's create some test files in the same way: a jpg image file, a css style sheet and a js JavaScript file.
sudo truncate -s 1k /usr/share/nginx/html/test.jpg
sudo truncate -s 1k /usr/share/nginx/html/test.css
sudo truncate -s 1k /usr/share/nginx/html/test.js
The next step is to check the behavior of Nginx when compressing the new installation using the file we just created.
Let's check if the HTML file named test.html is provided through compression. This command requests a file from our Nginx server and specifies that it is possible to provide the HTTP header (Accept-Encoding: gzip) for the gzip compressed content.
curl -H "Accept-Encoding: gzip"-I http://localhost/test.html
In response, you should see several HTTP response headers:
Nginx response header
HTTP/1.1200 OK
Server: nginx/1.4.6(CentOS)
Date: Tue,19 Jan 201620:04:12 GMT
Content-Type: text/html
Last-Modified: Tue,04 Mar 201411:46:45 GMT
Connection: keep-alive
Content-Encoding: gzip
In the last line, you can see the title Content-Encoding: gzip. This tells us that gzip compression has been used to send this file. This is because on the CentOS server, Nginx gzip automatically enables compression with default settings after installation.
However, by default, Nginx only compresses HTML files. Every other file in the new installation will be provided in uncompressed form. To verify this, you can request our test image named test.jpg in the same way.
curl -H "Accept-Encoding: gzip"-I http://localhost/test.jpg
The result should be slightly different from before:
HTTP/1.1200 OK
Server: nginx/1.4.6(CentOS)
Date: Tue,19 Jan 201620:10:34 GMT
Content-Type: image/jpeg
Content-Length:0
Last-Modified: Tue,19 Jan 201620:06:22 GMT
Connection: keep-alive
ETag:"569e973e-0"
Accept-Ranges: bytes
There is no title of Content-Encoding: gzip in the output, which means that the file is provided without compression.
You can use the test CSS style sheet to repeat the test.
curl -H "Accept-Encoding: gzip"-I http://localhost/test.css
Again, there is no mention of compression in the output.
HTTP/1.1200 OK
Server: nginx/1.4.6(CentOS)
Date: Tue,19 Jan 201620:20:33 GMT
Content-Type: text/css
Content-Length:0
Last-Modified: Tue,19 Jan 201620:20:33 GMT
Connection: keep-alive
ETag:"569e9a91-0"
Accept-Ranges: bytes
The next step is to configure Nginx to provide not only compressed HTML files, but also other file formats that can benefit from compression
To change the Nginx gzip configuration, open the main Nginx configuration file in nano or another text editor of your choice.
sudo nano /etc/nginx/nginx.conf
Find the gzip settings section, as shown below:
...
##
# ` 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;...
You can see that by default, gzip compression is enabled by the gzip on command, but several additional settings are annotated with the # comment symbol. We will make some changes to this section:
# line)gzip_min_length 256; instruction to tell Nginx not to compress files smaller than 256 bytes. This is a very small file and can hardly benefit from compression. Additional file types are appended to the gzip_types directive. These file types represent web fonts, ico icons and SVG images.After applying these changes, the settings section should look like this:
...
##
# ` 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 text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript application/vnd.ms-fontobject application/x-font-ttf font/opentype image/svg+xml image/x-icon;...
Save and close the file to exit.
To enable the new configuration, restart Nginx.
sudo service nginx restart
The next step is to check if the configuration changes are working as expected.
We can use curll for each test file and check the output of the content encoding Content-Encoding: gzip header as we did in step 2.
curl -H "Accept-Encoding: gzip"-I http://localhost/test.html
curl -H "Accept-Encoding: gzip"-I http://localhost/test.jpg
curl -H "Accept-Encoding: gzip"-I http://localhost/test.css
curl -H "Accept-Encoding: gzip"-I http://localhost/test.js
Now, only the test.jpg image file can remain uncompressed. In all other examples, you should be able to find the Content-Encoding: gzip header in the output.
If this is the case, you have successfully configured gzip compression in Nginx!
It is easy to change the Nginx configuration to fully use gzip compression, and the benefits of this are huge. Not only will visitors with limited bandwidth receive the site faster, but Google will also be satisfied with the site's loading speed. As an important part of modern networks and usage, loading speed is getting more and more attention, and the application of gzip will be a big step to improve it.
For more Ubuntu tutorials, please go to [Tencent Cloud + Community] (https://cloud.tencent.com/developer?from=10680) to learn more.
Reference: "How To Add the gzip Module to Nginx on Ubuntu 14.04"
Recommended Posts