When your client sends a request to the server it will include a header saying which compression formats it will accept, As you can see it says it will accept gzip, deflate or br compression formats. The server will respond and if available will compress the result in a supported format. Here it supports gzip. Brotli is a new open-source compression format from google that improves on the performance of gzip in many cases. We only care about the HTTP compression.
Warning
Brotli only works on an https connection. Which is a good thing because we all want to encrypt the web, right? Installing Brotli
apt-get install brotliSetting up on Apache
Apache has supported brotli since version 2.4.26 by way of the mod_brotli module. However, I can’t find any information on this so we are installing this module by kjdev
Install the Module
git clone --depth=1 --recursive https://github.com/kjdev/apache-mod-brotli.git
cd apache-mod-brotli
./autogen.sh
./configure
make
install -D .libs/mod_brotli.so /usr/lib/apache2/modules/mod_brotli.so -m 644
cd /etc/apache2/mods-available
echo "LoadModule brotli_module /usr/lib/apache2/modules/mod_brotli.so" > brotli.loadThis has added the .load file to the mods available. We need to create an accompanying config file called brotli.conf, adding:
BrotliCompressionLevel 10
BrotliWindowSize 22
AddOutputFilterByType BROTLI text/html text/plain text/css application/x-javascript
Enable the module
a2enmod brotli
service apache2 restartYou should now see in the response header that the page is compressed with brotli (br):
Setting up on Nginx
Google has kindly released an Nginx Brotli module
Download the module
cd /usr/local/src
git clone https://github.com/google/ngx_brotli.git
cd ngx_brotli
git submodule update --init --recursiveRebuild Nginx with our new module
You should run nginx -V to get your config string and add:
cd /opt/nginx-1.13.1/ (or your own path)
./configure YOUR CONFIG STRING --add-module=/usr/local/src/ngx_brotli
make
make installFinally, add to your nginx.conf file
http {
brotli on;
brotli_static on;
}In conclusion, the setup for both Apache and Nginx is pretty painless. If the browser does not support brotli it can always fallback to the ever faithful gzip.
What the heck is Brotli?
Just like gzip, Brotli is also a compression algorithm. It is developed by Google and serves best for text compression. The reason being, it uses a dictionary of common keywords and phrases on both client and server side and thus gives a better compression ratio. It is supported by all major browsers :
Does your browser support Brotli?
Browsers which support Brotli send ‘br’ along with ‘gzip’ in accept-encoding request header. If Brotli is enabled on your web server, you will get response in Brotli compressed format.
Gzip vs Brotli:
The advantage for Brotli over gzip is that it makes use of a dictionary and thus it only needs to send keys instead of full keywords. According to certsimple,
- Javascript files compressed with Brotli are 14% smaller than gzip.
- HTML files are 21% smaller than gzip.
- CSS files are 17% smaller than gzip.
Note: Images should not be compressed either by gzip or Brotli as they are already compressed and compressing them again will make their sizes larger.
Fewer bytes transferred not only leads to faster page load but also helps in reducing costs of Content Delivery Network (CDN). Now that we know all these benefits, let’s see how to enable Brotli…
Embracing the Brotli side:
There were two ways by which we can deliver Brotli compressed assets:
- Enabling Brotli on our web-server
- Enabling Brotli on CDNs
We chose to go ahead with serving Brotli from our web servers and installed it on nginx. Google has provided a module for it which needs nginx to be installed from source. Once installed, the following settings need to be put in nginx conf file:
brotli on;brotli_static on; # for static compression, explained laterbrotli_comp_level 11; # this setting can vary from 1-11brotli_types text/plain text/css application/javascript application/json image/svg+xml application/xml+rss;
After this, all content types which are mentioned in brotli_types setting will be brotli compressed. Easy, wasn’t it!
Note: We have to keep gzip settings on nginx intact as clients who doesn’t support br should get gzip compressed files. Although nginx gives precedence to br if both are supported.
Here, our web server will send br compressed assets, then CDN will just cache it and pass on to the browser.
Another way to enable Brotli is via CDN. By this way you don’t have to write any code or install anything in your infra, but this will be a paid service. We went for the ‘Brotli from Origin’ approach (former), as it is more cost efficient and engineering is what we like to do.
Dynamic vs Static Compression:
Dynamic compression means compressing files on the fly whereas static means to compress files once and then serve every time from cache. We used static compression for our Javascript and CSS files, as those will not change (until a new build is deployed). All these files are then cached on CDN and get served from there itself.
We talked about a setting ‘brotli_comp_level’ above and promised to explain it later, so here it is. It indicates the compression ratio and ranges between 1 to 11. Higher the ratio, higher the time it will take to compress it. So we used the value 11 for our static assets. For Dynamic assets like API responses , we should use smaller values – a high compression time can backfire, and put all our efforts to improve latency to turmoil.
Results :
Brotli from Origin Now Available for Akamai
What is Brotli from Origin?
Brotli from Origin specifically configures Akamai delivery to work well for customers that are providing Brotli-compressed resources at origin. The Brotli from Origin behavior allows for Akamai to deliver the Brotli-compressed resource when supported by the requesting user agent; otherwise, when not supported, non-Brotli resources are automatically used.
What are the benefits of Brotli from Origin?
With Brotli from Origin, Akamai now has a comprehensive Brotli solution that can be applied for resources already compressed at the origin. By applying Brotli compression to resources, you can reduce bandwidth consumption and improve web performance above and beyond what gzip can do.
How do I enable Brotli from Origin?
- To enable it, simply add the behavior through Property Manager (On/Off setting). It can also be enabled through the Property Manager API.
How is Brotli from Origin different from Akamai Resource Optimizer?
Resource Optimizer takes resources from origin and applies Brotli compression to them as they come into the Akamai platform. They are then cached and delivered with Brotli compression. Brotli from Origin basically extends this approach to support resources already compressed at origin and enables them to be served through the Akamai cloud delivery platform and back to the browser. In other words, Akamai now supports both origins that provide Brotli compression as well as origins that do not. For origins that do not, Akamai now automatically provides Brotli compression.
We think it’s a great solution.
Hari's Technical Space 