Gzip Compression for Faster Web Pages (Apache, Nginx, WordPress)

Even reducing the loading time of our website by a second can have a drastic impact on the traffic we get. It is vital for our websites to load quickly in this fast-moving world, where all the information we need can be found within a blink of an eye. One way to achieve it is using Gzip compression.

The Gzip algorithm compresses and decompresses data in order to make websites load faster in a client's machine. It was created as a replacement for the compress program which was used in the early Unix systems by Jean-loup Gailly and Mark Adler.

Without Gzip
With Gzip
How Gzip works?
How to check for Gzip compression?
Enabling Gzip compression

Without Gzip

There is a difference between using gzip and not using it. Here we will see what happens when we don’t Gzip.

Whenever a user wants to access the website, the server sends the website contents to the client's machine.
Then the HTTP contents of the website gets downloaded in the client’s machine.

Let’s say a web page with a size of 2MB is on the server. It comprises HTML, CSS, Javascript, Images, Gifs and Videos.

These contents take a certain time to reach the client’s machine since it is large. It may end up in longer loading time, which will affect the number of user views your page can get.

A user will wait for a maximum of 10 seconds before leaving your loading page. So, it is very important to understand the need to have faster loading times. Therefore, gzip compression is needed.

With Gzip

The user sends a request to the server.
The server compresses the HTTP contents into a zip file.This zip file contains all the HTTP contents but is in a compressed form.
This zip file is then sent to the client’s machine by the server.
Sending a zip file will be faster since its size is now reduced.

How Gzip works?

Gzip is based on the DEFLATE algorithm which uses LZ77 and Huffman Coding. Gzip compresses the files in the server so that the client gets faster loading time.

Let us see the working of the Gzip. It is explained as follows:

At first, the user sends a request to the server.
The server receives it and asks the client browser whether it has gzip.
If the client says no, then the server sends the webpage as it is. A webpage holds HTTP contents like HTML, JavaScript, CSS, Images and even videos.
If the client’s browser says yes, i.e. has gzip support in it, then the server sends a compressed form of the website, which means a zipped version of the HTTP contents.
So, the compressed version of the file is much lighter than its original version and so it loads faster in the client’s machine thus satisfying the needs of the visitors and improving its ranking for SEO.
The web browser receives the compressed file and decompresses it to its original form.
Before sending the compressed file to the web server, it will make sure that the browser has Gzip enabled on it. Because without that, the server will not send the compressed format to the browser. Instead, it sends the default format, i.e., the uncompressed form of the HTTP contents in the web page.

How to check for Gzip compression?

In order for Gzip compression to take place, the web server should know that the web browser can accept Gzip compressed files. It is done by including the Accept-Encoding header in the browser’s request.

Accept-Encoding: gzip, deflate

The web server receives this header and sends back the following in its response along with the compressed file.

Content-Encoding: gzip

This content encoding header tells the web browser that the files should be decompressed with Gzip.

Most of the browsers have Gzip enabled by default. We can check if Gzip is enabled on our website using some free online tools.

Enabling Gzip compression

If the Gzip compression is not implemented in the web browser, then try one of the following methods. But make sure you have gone through the hosting provider’s documentation to know whether you have permissions to access the .htaccess files and do the following or not.

Enabling Gzip compression on Apache web server

The following code should be added to the .htaccess file to enable Gzip compression in Apache web servers.

<IfModule mod_deflate.c>
         AddOutputFilterByType DEFLATE application/javascript
         AddOutputFilterByType DEFLATE application/rss+xml
         AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
         AddOutputFilterByType DEFLATE application/x-font
         AddOutputFilterByType DEFLATE application/x-font-opentype
         AddOutputFilterByType DEFLATE application/x-font-otf
         AddOutputFilterByType DEFLATE application/x-font-truetype
         AddOutputFilterByType DEFLATE application/x-font-ttf
         AddOutputFilterByType DEFLATE application/x-javascript
         AddOutputFilterByType DEFLATE application/xhtml+xml
         AddOutputFilterByType DEFLATE application/xml
         AddOutputFilterByType DEFLATE font/opentype
         AddOutputFilterByType DEFLATE font/otf
         AddOutputFilterByType DEFLATE font/ttf
         AddOutputFilterByType DEFLATE image/svg+xml
         AddOutputFilterByType DEFLATE image/x-icon
         AddOutputFilterByType DEFLATE text/css
         AddOutputFilterByType DEFLATE text/html
         AddOutputFilterByType DEFLATE text/javascript
         AddOutputFilterByType DEFLATE text/plain
          AddOutputFilterByType DEFLATE text/xml
</IfModule>

Enabling Gzip compression in NGINX Web Server

NGINX server compresses only HTML files by default. To default the whole content, follow the below steps.

Open nginx.conf file and find the line.

gzip on

Now you should paste the following code below that line.

gzip_vary on;
gzip_types text/plain text/css text/xml text/javascript application/x-javascript application/xml;
gzip_min_length 1000;
gzip_proxied no-cache no-store private expired auth;

Here, gzip_types represents the file types which are needed to be compressed. We add more types to it if needed or can remove the ones which are not needed.

gzip_min_length is the minimum length the response should be in order to get compressed. We can alter its values as needed. Here the value is set to 1000bytes, which is 1KB.

Enabling Gzip Compression in WordPress

One can use the plugins available in WordPress to modify the server files. WP Super Cache and WP Rocket are some ‌plugins. We can enable it by accessing the .htaccess file too, but make sure you have enough knowledge in accessing that file and have gone through the documentation before doing it.

File types associated with Gzip

.gz - An archive file compressed using gzip. It may have multiple compressed files too. Usually used in UNIX systems.
.tar file - Used to pack files together for backup purposes. Holds multiple files, known as tarball which are stored in the uncompressed format and can be compressed using Gzip.
.tgz, .tar.gz, .gz - These are Tar archive files compressed by Gzip.

Conclusion

The main objective of Gzip compression is to make the website load a little bit faster. If we are successful in making our site faster and with less loading time, then we will have more engagement, resulting in more revenue by converting visitors into customers.

Monitor Your Entire Application with Atatus

Atatus is a Full Stack Observability Platform that lets you review problems as if they happened in your application. Instead of guessing why errors happen or asking users for screenshots and log dumps, Atatus lets you replay the session to quickly understand what went wrong.

We offer Application Performance Monitoring, Real User Monitoring, Server Monitoring, Logs Monitoring, Synthetic Monitoring, Uptime Monitoring and API Analytics. It works perfectly with any application, regardless of framework, and has plugins.

Atatus can be beneficial to your business, which provides a comprehensive view of your application, including how it works, where performance bottlenecks exist, which users are most impacted, and which errors break your code for your frontend, backend, and infrastructure.