How to optimize your website(feat.brotli Compression)
Tags: beginners, webdev, javascript
Published: 2019-09-04 05:13:49

Hi everyone! 
Last time, I talked about Gzip compression which is one of the most common way to encode content, and someone have mentioned about brotli by Google. 
For that reason, today I would to talk little bit about brotli. 
If you haven't read my last post about Gzip compression, please <a href="https://dev.to/ham8821/how-to-optimize-your-php-website-feat-gzip-compression-285j">Jump on here!</a>

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/8nyyy6i52jk4draxox4g.png)

Alright, like mentioned above, Gzip is one of the popular and common ways of content encoding yet very useful in terms of the fact that it is easy to use because it can be executed simply by adjusting the setting provided by web server. 
However, at the same time it is getting critics because it is not perfect when it comes to security problems.

<h3>FIRST: Birth of <b>Brotli<b></h3>

In September 2015, Google released the Brotli as a open source and then it started getting popular as chrome started supporting brotli compression.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/esndcsj37d8xd6ngi6m3.jpg)

<h3>SECOND: <b>Gzip VS Brotli<b></h3>

I know, You must be curious about which one is the best and I know always there would some discussions and different opinions on this.
But, according the this <a href="https://cran.r-project.org/web/packages/brotli/vignettes/benchmarks.html">article</a> which is comparing some of the compression technology including gzip and brotli, 
<b>less means better<b>
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/61dtua60n66fukz1f7gl.png)

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/p9625dobfaotno3vcxmd.png)

It is concluded that in terms of ratio of compression, brotli is showing the best result, yet in the compression speed area, gzip is showing the better result.

If you want to have a look at more articles on this, the links below might help you to understand more.

<a href="https://hacks.mozilla.org/2015/11/better-than-gzip-compression-with-brotli/">1)https://hacks.mozilla.org/2015/11/better-than-gzip-compression-with-brotli/</a>
<a href="https://medium.com/oyotech/how-brotli-compression-gave-us-37-latency-improvement-14d41e50fee4">2)https://medium.com/oyotech/how-brotli-compression-gave-us-37-latency-improvement-14d41e50fee4</a>


<h3> THIRD: Using <b>Brotli<b> on <b>Nginx</b></h3>
Obviously, nginx is one of the web servers that has so many benefits. However, when we use brotli, it might require bit of an extra work. 
If nginx version has been changed, we need to accordingly compile and reset the setting which sounds quite annoying at this point.
In order to reduce the extra work, there are some ways to automate these steps on internet yet it is not perfect.
 
Here are some links about Brotli support
<a href="https://github.com/pothi/nginx-brotli">1) https://github.com/pothi/nginx-brotli </a>

<a href="https://github.com/engintron/engintron/issues/712">2) Brotli with Engintron Nginx</a>

<h3> LAST: <b>Conclusion<b></h3>

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/s764t2yradrhxiyuzuya.png)

To sum up, Brotil is probably the best way to execute the content encoding comparing to previous deflate or gzip when we consider the fact that it definitely increases the ratio of compression and obviously reduces the loading time at maximum 20%. However, there are still some discussions about whether it is also better way for dynamic contents websites not only for static websites. Also, we need to keep an eye on the fact that it might be high-maintenance in some ways.