How to configure nginx with gzip module for compression on centos 7

In this article, we have configured Nginx which is already installed on CentOS 7 to serve the clients with gzip compression to reduce the size of the contents sent to the web site visitors. We can configure the websites to load faster which depends on the size of all the files that are downloaded by the web browser, we can do this by reducing the size of the files transmitted from the website and load faster, which also reduces the cost which we pay for the bandwidth usage. gzipis a popular data compression package, which we will configure Nginx with gzip to compress the files on the server to load the files faster.

Creating the Test Files for Compression

Here we will create some demo files in the default Nginx directory to test the gzip compression. Nginx will then check the contents of the files it just determines the MiME types and determines the purpose of the file.

As Nginx will not compress very small files so we will create the files with some 1 KB of size to verify weather Nginx uses the compression where it should be. We create a 1 kilobyte file named demo.html in the default Nginx directory using the truncate command.

The extension denotes that it’s an HTML

$ sudo truncate -s 1k /usr/share/nginx/html/demo.html

We will also create a few more demo files using the same command: one .jpg image file, one .css stylesheet, and one .js JavaScript file.

$ sudo truncate -s 1k /usr/share/nginx/html/demo.jpg
$ sudo truncate -s 1k /usr/share/nginx/html/demo.css
$ sudo truncate -s 1k /usr/share/nginx/html/demo.js

Checking the Default Browser Behavior

We will now check that how Nginx behaves in respect to the compression with the fresh installation of the files which we have just created. We will check the demo.html served with compression.

Below is the command to request a file from our Nginx server using the gzip compression, we can also use Accept-Encoding: gzip to curl to test the compression.

$ curl -H "Accept-Encoding: gzip" -I http://localhost/demo.html
Output:
HTTP/1.1 200 OK
Server: nginx/1.6.3
Date: Fri, 11 July 2016 18:53:06 GMT
Content-Type: text/html
Content-Length: 1024
Last-Modified: Fri, 11 July 2016 18:48:02 GMT
Connection: keep-alive
ETag: "56eg2be82-400"
Accept-Ranges: bytes

By default in the Nginx configuration gzip compression was disabled for that reason we have not seen the Content-Encoding: gzip in the above output. Now we will test the image named demo.jpg in the same way that how Nginx will compress the images.

$ curl -H "Accept-Encoding: gzip" -I http://localhost/demo.jpg
Output:
HTTP/1.1 200 OK
Server: nginx/1.6.3
Date: Fri, 11 July 2016 18:58:43 GMT
Content-Type: image/jpeg
Content-Length: 1024
Last-Modified: Fri, 11 July 2016 18:48:35 GMT
Connection: keep-alive
ETag: "563e2be85-400"
Accept-Ranges: bytes

Here also the output is without compression

We will test the CSS stylesheet also

$ curl -H "Accept-Encoding: gzip" -I http://localhost/demo.css
Output:
Nginx response headers for CSS file
HTTP/1.1 200 OK
Server: nginx/1.6.3
Date: Fri, 11 July 2016 16:59:34 GMT
Content-Type: text/css
Content-Length: 1024
Last-Modified: Fri, 11 July 2016 12:48:55 GMT
Connection: keep-alive
ETag: "56e2be85-400"
Accept-Ranges: bytes

Enabling and Configuring Nginx to use gzip Compression Module

By default, when we install the Nginx, the gzip compression modules are installed but not enabled in the Nginx gzip modules. We will create a configuration file in /etc/nginx/conf.d directory which are automatically loaded when we start the Nginx services

$ sudo vi /etc/nginx/conf.d/gzip.conf
Files contents:
##
# `gzip` compresstion enableing Settings
#
#
gzip on;
gzip_disable "msie6";
gzip_vary on;
gzip_proxied any;
gzip_comp_level 6;
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/javascript application/vnd.ms-fontobject application/x-font-ttf font/opentype image/svg+xml image/x-icon;

Configuration settings, used in the above configuration file.

gzip on - directive enables the Gzip compression.
gzip_disable "msie6" - excludes Internet Explorer 6 from the browsers that will receive compressed files, because IE6 does not support gzip at all.

gzip_vary and gzip_proxied - settings make sure that proxy servers between the browser and the server will recognize compression correctly.
gzip_comp_level 6 - sets how much files will be compressed. The higher the number, the higher the compression level and the resources usage. 6 is a reasonable middle ground.

gzip_http_version 1.1 - is used to limit gzip compression to browsers supporting the HTTP/1.1 protocol. If the browser does not support it, there is a good chance it does not support gzip either.
gzip_min_length 256 - tells Nginx not to compress files smaller than 256 bytes. Very small files barely benefit from compression.
gzip_types lists all - of the MIME types that will be compressed. In this case, the list includes HTML pages, CSS stylesheets, Javascript and JSON files, XML files, icons, SVG images, and web fonts.

Restarting the Nginx to Apply the Configuration

$ sudo systemctl restart nginx

Verifying the New Configuration

We will test the .html file using the curl command from the command prompt to check whether the compression has enabled or not

$ curl -H "Accept-Encoding: gzip" -I http://localhost/demo.html
Output:
Nginx response headers
HTTP/1.1 200 OK
Server: nginx/1.6.3
Date: Fri, 11 July 2016 17:19:46 GMT
Content-Type: text/html
Last-Modified: Fri, 11 Mar 2016 17:38:22 GMT
Connection: keep-alive
Vary: Accept-Encoding
Content-Encoding: gzip

We can also test the same with all the remaining files .jpg, .css and .js files

$ curl -H "Accept-Encoding: gzip" -I http://localhost/demo.jpg
Output:
Nginx response headers
HTTP/1.1 200 OK
Server: nginx/1.6.3
Date: Fri, 11 July 2016 17:19:46 GMT
Content-Type: image/jpeg
Last-Modified: Fri, 11 Mar 2016 17:38:22 GMT
Connection: keep-alive
Vary: Accept-Encoding
Content-Encoding: gzip

$ curl -H "Accept-Encoding: gzip" -I http://localhost/demo.css
Output:
Nginx response headers
HTTP/1.1 200 OK
Server: nginx/1.6.3
Date: Fri, 11 July 2016 17:19:46 GMT
Content-Type: text/css
Last-Modified: Fri, 11 Mar 2016 17:38:22 GMT
Connection: keep-alive
Vary: Accept-Encoding
Content-Encoding: gzip

$ curl -H "Accept-Encoding: gzip" -I http://localhost/demo.js
Output:
Nginx response headers
HTTP/1.1 200 OK
Server: nginx/1.6.3
Date: Fri, 11 July 2016 17:19:46 GMT
Content-Type: text/js
Last-Modified: Fri, 11 Mar 2016 17:38:22 GMT
Connection: keep-alive
Vary: Accept-Encoding
Content-Encoding: gzip

By adding the gzip compression module to the Nginx web browser with a simple changes in the configuration files, we can allow the websites to load quickly, which will also benefit the bandwidth consumption and also makes the visitors with limited bandwidth which can be received in the websites faster.