How to enable GZIP Compression for NGINX on Ubuntu 18.04

How to enable GZIP Compression for NGINX on Ubuntu 18.04

Introduction

In this article, we will learn How to enable GZIP compression for NGINX on Ubuntu 18.04. Before enabling the GZIP compression lets first know more about the GZIP and compression.

What is GZIP Compression?

GZIP is a way to compress data. It is commonly used for web apps and websites. HTTP protocols have an ability to use GZIP compression. When we request a page by entering any URL in the browser, the web server compresses the data based on the request and send back it to the browser. At the browser, data will decompress and displays it to the end user. We are assuming GZIP compression is enabled at the server. Now you may ask why we need to use GZIP compression.

Why use GZIP Compression?

To understand the importance of the GZIP compression we created a sample page. It is available on our server web root directory. In this sample page, we are using the following files.

  • CSS: A CSS file with size approx 4 MB
  • JavaScript: A JavaScript file with size approx 4 MB
  • Image: An image file with approx size 5.5 MB
  • HTML Content: The HTML content for the sample page is with the size is around 4 MB.

If we load this page in a browser, the total expected size is around (4 MB + 4 MB + 4 MB + 5.5 MB = 17.5) 18 MB.
But in actual it is 13.4 MB Why? Let's check the following image.

As shown in the image the size for the PHP file is only 18 KB. But the content for PHP, CSS, and JavaScript is the same. So why this much difference? Let’s compare the header for PHP, CSS, and the JavaScript File.

In the case for the PHP file considered this line in the header "Content-Encoding: gzip". It means GZIP compression is enabled for the PHP file. Because of this, we can check the huge size difference between PHP, CSS, and the JavaScript file. Now it's a good time to answer Why we need GZIP compression.
GZIP compression is used to compress the files on the Web Server. The compressed file helps to load the web page faster and reduce the bandwidth usage.

How to enable GZIP Compression for NGINX on Ubuntu 18.04?

We are using Google Cloud Compute Engine VM Instance. To apply any changes, we need to use the SSH panel. Launch the SSH panel. We have already checked headers for PHP, CSS, and the JavaScript file. You can also check the GZIP status using SSH panel. Following is the command to check it in SSH panel.

Code

curl -H "Accept-Encoding: gzip" -I http://35.193.211.90/index.php
curl -H "Accept-Encoding: gzip" -I http://35.193.211.90/index.html
curl -H "Accept-Encoding: gzip" -I http://35.193.211.90/Test1.js
curl -H "Accept-Encoding: gzip" -I http://35.193.211.90/Test1.css
curl -H "Accept-Encoding: gzip" -I http://35.193.211.90/lemon.jpg

If for any of the above commands if you get an entry for "Content-Encoding: gzip" then GZIP compression is enabled for that file type.

As per the image, GZIP compression is enabled in PHP. Let’s enable it for JS, CSS, and JPG.
To Configure GZIP compression for NGINX, we need to edit the nginx.conf.
To open the nginx.conf execute the following command.

Code

sudo nano /etc/nginx/nginx.conf

In the nginx.conf file search for the gzip settings.

As shown in the image GZIP is by default is ON. But rest of the settings are disabled. To enable the rest of the settings, we need to uncomment the required settings. In this, we need to discuss the following important lines.

gzip_min_length 256;
It tells NGINX not to compress files smaller than 256 bytes. 256 bytes is a very small file. We hardly get any benefit from the compression. If the line is not available, then you can add it.

gzip_types
It tells NGINX to compress typed of files. You can add additional files. For example, we can add following types 

  • application/vnd.ms-fontobject 
  • application/x-font-ttf 
  • font/opentype 
  • image/svg+xml 
  • image/x-icon;

To save the config file, press Ctrl+O and to close the nano editor press Ctrl+K.

The following image shows the after changes information.

To apply the above changes, we need to restart the NGINX services. The following command is to test and restart the NGINX services.

Code

sudo nginx -t
sudo service nginx restart

Next, revisit our test page. We are using the chrome developer tools to check the network status. Following image shows the final download size.

The download size is reduced from 18 MB to 6 MB (4.4 KB (0.0044 MB) + 4.2 KB (0.0042 MB) + 4.3 KB (0.0043 MB) + 5.5 MB = 5.5129 MB).
Definitely, there is a very huge difference between before and after compression.

Now, you may ask, What about JPG file?

All the image format already uses compression. There is no need to re-compress images. If we re-compress any image, the result size may be the same or more.

Conclusion

We are done with GZIP compression. You may also like the following articles to improve the website and server performance.

0 Comments
Leave A Comment

Please login to post your valuable comments.

Join the newsletter

Get the latest vLemonn news first

share