How to configure gzip compression to speed up your website with Nginx

In this article we will dig into what gzip compression is and how we can speed up our Nginx server by applying these simple easy steps to our nginx configuration.

What is NGINX?

You have probably heard about Nginx before, but in case you haven’t. Nginx is an outstanding open source and lightweight server used to host websites all around the world.

Nginx was first released back in 2004 by Igor Sysoev to fix some high performance issues. In 2016 Nginx reached 100 employees and in 2018 Nginx we’re running 450 million websites worldwide.

Nginx is a great lightweight server with many of features such as load balancing, security, service mesh and compression. You can use Nginx when hosting small websites and even multiple corporate sized web applications.

You can read more about Nginx and how to get started here at their website: https://www.nginx.com

What is GZIP?

Gzip is a single-file data compression format saved with the extension .gz made by Jean-loup Gailly and Mark Adler. Gzip is giving you lossless data compression and it can easily be used together with Nginx to compress larger files and thereby speeding up your website / web application.

Gzip is reducing the file size using the Lempel-Ziv coding (LZ77) and the z in .gz stands for MSDOS, OS/2, FAT and Atari. If a file name is too long for the Gzip file system it will truncate the file to fit and the original file will be kept inside since it is useful when decompressing the file later. In some cases the the Gzip compressed file can be bigger than the original by 5 bytes pr 32kb block, but it rarely happens.

You can read more about The Gzip concept here: https://www.gnu.org/software/gzip/manual/gzip.html

How to configure GZIP compression

Setting up Nginx to compress files using Gzip is easier than you might think. The guide underneath will take you through the setup so that you can get started right away. Using Gzip compression will speed up your website, but we recommend only using it on bigger files.

Using Gzip on all files such as images, audio files, text files etc. Can slow down your server and end up making your website slower. Configure the nginx.conf file.

1. Configure the nginx.conf file.

First step is to locate and configure the nginx.conf file. You find the file using this path: /etc/nginx/nginx.conf and if you are doing this from the terminal you can use nano to edit the file.

2. Add the gzip settings to nginx.conf.

The second step is to add the settings that will allow Nginx to compress using Gzip and afterwards use the compressed files. Our settings will turn on the function, tell Nginx which files we should gzip compress, which browsers it should work in and from what file size we want to run the compression.

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]\.";

What our settings do is:

gzip on; - Enables gzip compression.

gzip_vary on: - Tells proxies to cache both gzipped and regular versions of a resource.

gzip_min_length 1024; - Instructs NGINX to not compress files smaller than the defined size.

gzip_proxied - Tells Nginx to compress data even for clients that are connecting via proxies (We are enabling compression if: a response header includes the "expired", "no-cache", "no-store", "private", and "Authorization" parameters).

gzip_types - Enables the file types that can be compressed.

gzip_disable - Disables compression for Internet Explorer versions 1-6.

3. Save the file and restart Nginx.

Now that we have added our settings and configured them to fit our website we can save the file and restart Nginx. Once Nginx has been restarted you can run Google Page Speed(link) to check if your website got faster in some areas.

Author

Michael Andersen

I am a self-taught and highly passionate web developer currently living in Sweden, where I use my skills to make the internet a better place through ethical and sustainable web design.