Announcement

Adding the gzip Module to Nginx on Ubuntu 16.04

This guide will walk you through the steps to configure Nginx installed on Ubuntu 16.04 server to utilize gzip compression to reduce the size of content sent to website visitors.

How fast a website will load depends on the size of all of the files that have to be downloaded by the browser. Reducing the size of files to be transmitted can make the website not only load faster, but also cheaper to those who have to pay for their bandwidth usage.

gzip is a popular data compression program. You can configure Nginx to use gzip to compress files it serves on the fly. Those files are then decompressed by the browsers that support it upon retrieval with no loss whatsoever, but with the benefit of smaller amount of data being transferred between the web server and browser.

Prerequisites

To follow steps mentioned in this guide, you'll need:

One Ubuntu 16.04 machine with Nginx installed on it

Creating Test Files

In the following step, we will create several test files in the default Nginx directory to test gzip's compression.

Create a 1 kilobyte file named test.html in the default Nginx directory using truncate. The extension denotes that it's an HTML page.

sudo truncate -s 1k /var/www/html/test.html

Now create a few more test files in the same manner: one jpg image file, one css stylesheet, and one js JavaScript file.

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 how Nginx behaves in respect to compression on a fresh installation with the files we have just created.

Checking the Default Behavior

Let's check if HTML file named test.html is served with compression. The command requests a file from our Nginx server, and specifies that it is fine to serve gzip compressed content by using an HTTP header (Accept-Encoding: gzip).

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

In response, you should see several HTTP response headers:

Nginx response headers

HTTP/1.1 200 OK

Server: nginx/1.4.6 (Ubuntu)

Date: Tue, 19 Jan 2016 20:04:12 GMT

Content-Type: text/html

Last-Modified: Tue, 04 Mar 2014 11:46:45 GMT

Connection: keep-alive

Content-Encoding: gzip

In the last line, you can see the Content-Encoding: gzip header. This tells us that gzip compression has been used to send this file. This happened because on Ubuntu 16.04, Nginx has gzip compression enabled automatically after installation with its default settings.

However, by default, Nginx compresses only HTML files. Every other file on a fresh installation will be served uncompressed. To verify that, 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 than before:

Nginx response headers

HTTP/1.1 200 OK

Server: nginx/1.4.6 (Ubuntu)

Date: Tue, 19 Jan 2016 20:10:34 GMT

Content-Type: image/jpeg

Content-Length: 0

Last-Modified: Tue, 19 Jan 2016 20:06:22 GMT

Connection: keep-alive

ETag: "569e973e-0"

Accept-Ranges: bytes

There is no Content-Encoding: gzip header in the output, which means the file was served without compression.

You can repeat the test with test CSS stylesheet.

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

Once again, there is no mention of compression in the output.

Nginx response headers for CSS file

HTTP/1.1 200 OK

Server: nginx/1.4.6 (Ubuntu)

Date: Tue, 19 Jan 2016 20:20:33 GMT

Content-Type: text/css

Content-Length: 0

Last-Modified: Tue, 19 Jan 2016 20:20:33 GMT

Connection: keep-alive

ETag: "569e9a91-0"

Accept-Ranges: bytes

The next step is to configure Nginx to not only serve compressed HTML files, but also other file formats that can benefit from compression.

Configuring Nginx's gzip Settings

To change the Nginx gzip configuration, open the main Nginx configuration file in nano or your favorite text editor.

The next step is to check whether changes to the configuration have worked as expected.

Verifying the New Configuration

We can test this just like we did in step 2, by using curl on each of the test files and examining the output for the Content-Encoding: gzip header.

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 test.jpg, which is an image file, should stay uncompressed. In all other examples, you should be able to find Content-Encoding: gzip header in the output.

If that is the case, you have configured gzip compression in Nginx successfully!

Conclusion

Changing Nginx configuration to fully use gzip compression is easy, but the benefits can be immense. Not only visitors with limited bandwidth will receive the site faster but also Google will be happy about the site loading faster. Speed is gaining traction as an important part of modern web and using gzip is one big step to improve it.