Add Brotli compression to your Apache Server

Google's Brotli compression algorithm allows for great data savings and thus faster loading times of your website.

But how do you configure Apache for it? That's pretty simple: We will simply redirect requests to large, static files like JS and CSS to their compressed instances and add information about the encoding into the HTTP response header.

1. Compress the files:

To compress the files we need to first get brotli. Choose the one suitable for your system (typically cp35 or cp27 Win32) and get bro.py (Right-click -> Save as...), we will use it later. Brotli requires Python, so be sure to have it installed. If you have successfully installed Python, you should be good to go. Open a command prompt in the directory you downloaded the .whl file (Shift+Right mouse button and select Open command prompt here for Windows) and type pip install wheel, this will install the wheel module for Python. Next type wheel install Brotli and use tab-autocomplete to avoid typing out the filename. This will install the brotli package. For Linux/macOS users: You don't need to download the .whl file. Just download the .zip or .tar.gz and run python setup.py install instead. Now try the command python bro.py. The output should look like this:

bro.py output
bro.py output

Now you are capable of compressing all your files with brotli. To make compression easier for me when working on my website, I use File Watchers in PhpStorm. I included my watchers.xml (Right-click and hit Save as..) file, so you can import it into your PhpStorm; adjust the paths, though, as I have put in some placeholders for you. The python.exe for me is at C:\Python36\python.exe, so search for a similar path. You can always compress the files manually by running bro.py -i -o. I will be using the .br extension, so I recommend .br. Leave the .js or .css, as well; it will make our configuration easier.

2. Configure Apache

Open your Apache configuration file or open/create .htaccess for the directory you want to cover. If you want to cover everything, just put it in your website's root directory (the directory where your index.php file is you see when visiting your website). Now add a Directory section to your file, pointing to the absolute path of your VirtualHost (you can also add the content of that section directly, if you don't need granular control over your files). First create the Directory section for your server:

<Directory "/var/www/html">

Next add type and encoding information about your new .br files:

<Directory "/var/www/html">
    AddType "text/javascript" .br
    AddEncoding br .br

    AddType "text/css" .br
    AddEncoding br .br
</Directory>

After that, remove other output filters for JS and CSS files; we don't want other filters to break ours:

<Directory "/var/www/html">
    AddType "text/javascript" .br
    AddEncoding br .br

    AddType "text/css" .br
    AddEncoding br .br

    RemoveOutputFilter js
    RemoveOutputFilter css
</Directory>

Lastly, use mod_rewrite to rewrite requests, so they point to the .br files:

<Directory "/var/www/html">
    AddType "text/javascript" .br
    AddEncoding br .br

    AddType "text/css" .br
    AddEncoding br .br

    RemoveOutputFilter js
    RemoveOutputFilter css

    RewriteEngine On

    RewriteCond %{HTTP:Accept-Encoding} br
    RewriteCond %{REQUEST_FILENAME}.br -f
    RewriteRule ^(.*)$ $1.br [L]
</Directory>

For my server the section looks like this:

Directory section in my configuration file
Directory section in my configuration file (force mod_pagespeed to be off)

3. Verify our configuration:

Your Apache server should now answer any requests to the files specified in the configuration (in the above configuration, any .js and .css file). To verify this, we take a look at Google Chrome's developer Network tab. Selecting one of the files reveals its real content-encoding:

Verify the encoding, it should be 'br'
Verify the encoding, it should be br.

4. Congratulations

Congrats, your server now serves all your JavaScript and Cascading Stylesheets with brotli compression, saving network capacity and time. For me the savings are honestly ridiculous:

br: 37.907
raw: 276.319
ratio: ~7.3/1

That means savings of 86.2% (Size of 13.8%)! Not too far from the average of scientific comparisons (OpenCPU - World Compression Challenge (Place 35, far in front of any other algorithm used on the web) - Squash Compression Benchmark).

References:

https://www.gstatic.com/b/brotlidocs/brotli-2015-09-22.pdf - Comparison of Brotli to other compression algorithms
https://github.com/google/brotli/ - Official GitHub repository of Brotli

{{ message }}

{{ 'Comments are closed.' | trans }}