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.

Posted from my blog
Original Link: https://techvhow.com/how-to-enable-gzip-compression-for-nginx-on-ubuntu-18-04_845/