Using Compression to Reduce Download Times in Apache

Compression is the process of encoding information using fewer bits. In web development, it generally means the process of reducing the file size of assets such as JS, CSS, and HTML.

Why Use Compression?

Compression results to better user experience and cost savings. It reduces the amount of data that needs to be downloaded to view a website. This means faster loading time for users. Bandwidth usage is also reduced, thus saving cost for users with limited data plan. It also saves bandwidth cost for website operators. Lastly, Google encourages its use (see Additional Reading section below).

Enabling Compression in Apache 2.4

In Apache, compression is done by using mod_deflate module. This module will compress content before it is delivered to the browser. The browser will then decompress the content upon receiving it.

Make sure you have the enabled modules mod_deflate and mod_filter. In windows you can do this by uncommenting these lines in httpd.conf:

LoadModule deflate_module modules/mod_deflate.so
LoadModule deflate_module modules/mod_filter.so

To enable compression globally, open up your main Apache config file httpd.conf and put this code:

<IfModule mod_deflate.c>
    AddOutputFilterByType DEFLATE text/text text/html text/plain text/xml text/css application/x-javascript application/javascript
</IfModule>

The text/text text/html text/plain text/xml text/css application/x-javascript application/javascript are mime types.

If you want to use it in virtual host, just place it inside the virtual host block:

<VirtualHost *:80>
    ...
    # BEGIN GZIP
    <IfModule mod_deflate.c>
    AddOutputFilterByType DEFLATE text/text text/html text/plain text/xml text/css application/x-javascript application/javascript
    </IfModule>
    # END GZIP
</VirtualHost>

That’s it. Restart Apache.

You can also place the above code inside a .htaccess file.

Testing If Compression Works

Open up Chrome Dev Tools. On the network tab look for these:

Additional Reading

• CSS Tricks article
• Comprehensive article from Google
• Mime Types