Will Brotli Replace Gzip?
JS file with Gzip took 966ms to load while Brotli took only 296ms, which is remarkable!
Compression methods have been widely used to increase the performance of web applications. Gzip is the most popular among them. Recently another compression method named Brotli came into the picture, and it seems to become a good rival for Gzip.
This article introduces the Brotli compression method, setting up Brotli with a CDN (AWS CloudFront in particular) and evaluating the results compared to Gzip and uncompressed content.
What is Brotli?
Brotli compression was first introduced in 2013 as an offline compression method for web fonts by Google. After 2 years, Google released a new version of Brotli for generic losses data compression. However, Brotli fell short with browser support, where Gzip remained in the lead. As a result, Brotli had to wait for a few years to challenge Gzip.
Now Brotli has full support from all major web browsers, including Chrome, Firefox, Safari, and Edge. The game is on!
Tip: Share your reusable components between projects using Bit (Github). Bit makes it simple to share, document, and organize independent components from any project.
Use it to maximize code reuse, collaborate on independent components, and build apps that scale.
Bit supports Node, TypeScript, React, Vue, Angular, and more.
Is Brotli Better than Gzip?
Brotli compression has shown promising results in studies compared to Gzip. In comparison, Gzip has 9 levels of compression, while Brotli has 11. Besides, Brotli uses a dictionary that exists on both the server and client-side and contains common keywords and phrases. These factors improve the compression ratio for Brotli.
According to research by CertSimple, Brotli compresses JavaScript files 14% smaller than Gzip, while HTML and CSS compression rates are 21% and 17% better than Gzip, respectively.
However, these benefits come with a cost, where the time taken for the compression operation will increase as the compression level moves to higher levels. In short, Brotli demands more computational power.
Also, keep in mind that support for Brotli in browsers only works with HTTPS, while Gzip supports HTTP and HTTPS.
So you can see that Brotli has its advantages and limitations. Since you have a basic understanding of Brotli now, let’s move onto a real example.
Enabling Brotli & Gzip Compression with a CDN
I have selected a demo React project from GitHub for this demonstration. The set up uses AWS CloudFront configured for compression and AWS S3 for hosting with 4 simple steps.
Step 1: Create an S3 Bucket and Upload the React Bundle
As the first step, you can create an S3 bucket and upload the React bundle having index.html, CSS, and JavaScripts.
Step 2: Create an AWS CloudFront Distribution
Next, you can create an AWS CloudFront distribution using the AWS Console, as shown below.
There, you can select your S3 bucket as the Origin Domain Name from the drop-down. Also, keep in mind to configure Restrict Bucket Access, OAI, and Grant Read Permission on Bucket attributes as necessary. Then click on the Create Distribution button as the final step.
This step will take some time to complete. Next, select the created distribution and go to the Behaviors tab to enable the compression.
Step 3: Set Cache Policy to Brotli
You will find the default behavior, and you need to add a cache policy with Brotli compression enabled.
If you keep both options ticked, CloudFront will use Brotli compression by default if your browser supports Brotli.
Step 4: Verify the Compression Results
You can verify the results by opening the application in Chrome and visiting Chrome Network Console. There you can check the Response Headers for the content-encoding attribute value. If the value is br then Brotli is in operation.
Please refer to my previous article on Speed Up Your Static Web Site using Gzip and CDN if you need more information about enabling static hosting or Gzip compression.
Uncompressed vs. Gzip Vs.Brotli
After enabling Bortli compression, I’ve experimented with the sample React app to compare uncompressed, Gzip, and Brotli performance.
JavaScript File Performance
The above graph shows the file size of the main.js file uncompressed, with Gzip, and with Brotli.
The uncompressed main.js file size was 319kB while Gzipped and Brotli versions were 89.3kB and 81.7kB. Gzipped version has reduced its file size 3.5 times while the Brotli compression version has reduced 3.9 times.
When I compare the loading time for the same main.js file, there was a significant change between Gzip and Brotli.
Gzip took 966ms to load the file while Brotli took only 296ms, which is remarkable. The uncompressed version took 1.9 seconds to load the JS file.
JSON Payload Performance
Also, I made a comparison of XHR. These XMLHttpRequests contained data in JSON format. Let’s look at how these two compression methods perform in comparison.
As you can see, Brotli leads the competition with 1.34 seconds load time and 224B file size while Gzip falls behind with 1.54 seconds and 318B.
Although the difference is slightly less, the gap will increase as the original file size increases.
In this case, the original file size was 419B, and the compression ratio of Brotli is around 46%, while Gzips’ ratio is about 24%.
Conclusion
According to the above experiment result, it is clear that compression ratios of Brotli compression are on the higher side than those of Gzip. After looking at the compression results, I can clearly state that Brotli compression is the leading compression method at the moment for HTML, JS, CSS, and JSON files.
However, Brotli might perform poorly for non-text files. Therefore, it’s better to research before using Brotli for other file types.
Finally, since most web apps are developed using JavaScript frameworks like React, Brotli is an excellent option to increase your website’s load performance.
