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

Note: Windows is my main development machine. This tutorial applies to Apache 2.4 running on Windows 8. However the same things apply to other OS: Make sure you have mod_deflate and mod_filter enabled. Add code to Apache config file. Restart Apache.

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>

Note: The … above is not an actual code. It means it should contain whatever your virtual host settings are.

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:

Check for Content-Encoding gzip. Source: CSS-Tricks.com

Check for Content-Encoding gzip. Source: CSS-Tricks.com

Transfer Size vs. Actual Size. Source: developers.google.com

Transfer Size vs. Actual Size. Source: developers.google.com

Additional Reading

No Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

css.php