Effortlessly Speed Up Your Website with NGINX and Gzip Compression

In this article, we will see How to enable gzip compression with NGINX to improve the performance of our web application.

What is Gzip compression?

Gzip compression is a powerful tool to speed up your website's load time. It works by reducing the size of HTML, CSS, and JavaScript files before they are sent to the client's browser.

By enabling gzip compression on your NGINX server, you can significantly improve the user experience of your website by reducing the amount of data that needs to be transferred, thus reducing the time it takes for your website to load.

Here’s how to enable gzip compression with NGINX step by step:

Step 1: Open your NGINX configuration file

You can open the NGINX configuration file by using a text editor like nano or vim. The configuration file is usually located in the /etc/nginx directory.

Go to the /etc/nginx/nginx.conf

First you need to find

gzip on;

and comment on it using Hash(#), like below:

#gzip on;

Then adding below code snippets below above code:

gzip on;
gzip_vary on;
gzip_min_length 10240;
gzip_proxied expired no-cache no-store private auth;
gzip_types text/plain text/css text/xml text/javascript application/x-javascript application/xml;
gzip_disable "MSIE [1-6]\.";

Here is a line-by-line explanation of the configuration:

gzip on;

Will Activates gzip compression

gzip_vary on;

instructs proxies to store both the regular and gzipped versions of a resource.

gzip_min_length 1024;

It will Nginx to not compress anything that is lower than the specified size.

gzip_proxied;

This command will instruct to compress data even for clients that are connecting via proxies.

In our case,  we’re enabling compression if: a response header includes the “expired”, “no-cache”, “no-store”, “private”, and “Authorization” parameters

gzip_types;

Here we can list out the types of files that need to be compressed

gzip_disable;

Here we are telling Nginx to disable compression for Internet Explorer versions 1-6

Step 2:Save the configuration file

After you have added the code block to your NGINX configuration file, save it and close the text editor.

Step 3: Restart the NGINX service

Restart the NGINX service to apply the changes you have made to the configuration file. You can do this by running the following command:

sudo systemctl restart nginx

Step 4: Verify gzip compression

You can verify that gzip compression is enabled by using a browser extension or by checking the response headers of your website.

If gzip compression is enabled, you will see a "Content-Encoding: gzip" header in the response headers of your website.

That's it! By following these simple steps, you have successfully enabled gzip compression on your NGINX server. This will help to improve the load time of your website, which can lead to a better user experience and increased conversions.