How to Enable Gzip Compression on Your Nginx Website

by

In this tutorial, you’ll learn how to enable gzip compression on your Nginx server. This works on any website (including WordPress) that runs on Nginx.

Why Enable Gzip Compression on Nginx?

For those of you who don’t know, gzip compression allows your website to load faster.

Understand that a huge portion of the time it takes a web page to load is due to network latency. By compressing your web pages and assets like images, CSS, and JavaScript, your server needs to send less data across the internet. In turn, your users need to download less information each time they request a page. This means that pages will be loaded faster.

On a good day, if your web page is 4 MB, gzip compression will reduced the size of your web page to 2 MB. This can improve page load times by a significant amount.

Note that the client web browser must perform an additional decompression step before rendering the web page, but most times the network time savings outweigh the overhead.

A lot of times, when running a test on PageSpeed Insights, Google suggests to “Enable text compression”. Similarly, they explain:

Text-based resources should be served with compression to minimize total network bytes.

By enabling Gzip compression, you can fix this PageSpeed Insights error on WordPress and non-WordPress websites alike.

Enable Gzip Compression in Nginx

To enable Gzip compression in Nginx, you will need root access to your server. On your server you want to edit the /etc/nginx/nginx.conf file and add the following.

gzip on;
gzip_disable "MSIE [1-6]\.(?!.*SV1)";
gzip_vary on;
gzip_types text/plain text/css text/javascript image/svg+xml image/x-icon application/javascript application/x-javascript;

Please note that while probably all modern browsers support gzip compression, the gzip_disable line disables gzip compression for certain versions of Microsoft Internet Explorer.

After making changes, restart your Nginx server with the systemctl restart nginx command.

Verify It’s Working

You can verify that gzip compression is working with Chrome DevTools. In Google Chrome, go to View -> Developer -> Developer Tools. Open the Network tab and load a page from your website.

Click on one of your text-based assets like a JavaScript file and you should see a value of gzip for content-encoding under the Response Headers section.

Proof that gzip text compression is enabled
You can see that gzip compression is working by looking at your assets in Chrome DevTools.

Did you know another way to speed up your web pages it to serve your images in wepb format on Nginx?

If you have any questions about gzip on Nginx, let me know in the comments below.

About The Author

With a strong software engineering background, Tony is determined to help as many people as possible start their online busines. Discover why Tony quit his hedge fund job to pursue this mission. You can send Tony a message here.

2 thoughts on “How to Enable Gzip Compression on Your Nginx Website”

  1. Hi
    I love your clear explanations.

    I signed up at Namecheap for a VPS quasar package and a stellar plus shared package. I am learning python-Django and want to deploy on both these above options. Do you have any suggestions or tutorials on setting up Django on a VPS server @ Namecheap. The site is not yet launched.

    Reply
    • Hi Peter,

      If you go to your cPanel in Namecheap, under the Software section you’ll see a “Setup Python App” option which allows you to deploy the infrastructure you need for Django.

      I do also have some Django tutorials on my YouTube channel that might be of interest to you.

      Please let me know if you need any additional guidance 🙂

      Reply

Leave a Comment