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 (<kbd>Shift+Right mouse button</kbd> 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
.tar.gz and run
python setup.py install instead. Now try the command
python bro.py. The output should look like this:
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
.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:
Next add type and encoding information about your new
After that, remove other output filters for JS and CSS files; we don’t want other filters to break ours:
Lastly, use mod_rewrite to rewrite requests, so they point to the
For my server the section looks like this:
3. Verify our configuration:
Your Apache server should now answer any requests to the files specified in the configuration (in the above configuration, any
.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:
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).
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
You made some good points there. I did a search on the subject and found most persons will consent with your blog.
I was curious if you ever considered changing the page layout of your site? Its very well written; I love what youve got to say. But maybe you could a little more in the way of content so people could connect with it better. Youve got an awful lot of text for only having one or 2 pictures. Maybe you could space it out better?
Great website. A lot of useful information here. I am sending it to some friends ans additionally sharing in delicious. And of course, thanks on your sweat!|
I’m still learning from you, while I’m trying to achieve my goals. I certainly enjoy reading everything that is written on your blog.Keep the aarticles coming. I liked it!
Thank you for another excellent article. The place else could anyone get that type of information in such a perfect way of writing? I have a presentation subsequent week, and I am at the search for such info.