Enable Brotli Compression in Webpack with Fallback to Gzip

Why should I care, what exactly and how to use.

Vikas Singh
Dec 6, 2018 · 3 min read
Image for post
Image for post
Simply put, Brotli outperforms Gzip.

Customer Centricity is essential in today’s world. Most of the companies are now adapting customer first strategy to increase engagement, thus business. And providing a super fast web experience is one of the best ways to improve user experience and decrease bounce rate.

According to a Google study, it was found that sites loading within 5 seconds had 70% longer sessions, 35% lower bounce rates, and 25% higher ad viewability than sites taking nearly four times longer at 19 seconds. Yes, every second matters! And we at Groww saved around 1.8 seconds by using Brotli compression over gzip compression for our Javascript files.

Just for the sake of completion, let’s see for a sec what is Brotli Compression.

Brotli is a generic-purpose lossless compression algorithm that compresses data using a combination of a modern variant of the LZ77 algorithm, Huffman coding, and 2nd order context modeling, with a compression ratio comparable to the best currently available general-purpose compression methods. It is similar in speed with deflate but offers more dense compression.

All the developers out there working to get that performance boost in their React Project already knows the power of shipping less js code. Code splitting comes into play here. Enabling Brotli compression further helps to reduce the number of packets you send to the client and thus gives performance boost especially on 3G and 4G network.

Because not all browsers support Brotli compression yet. But all support Gzip.

Image for post
Image for post
Browser support for Brotli Compression
Image for post
Image for post
“accept-encoding” header can be checked to know what all compression accepted by the browser.

Goal: We will enable Brotli compression in Webpack with fallback support to Gzip.

There are 2 significant steps in this process.

  1. Generate Brotli and Gzip compressed version of files.
  2. Send correct version of the file when requested based on the request headers.

For the first step, we will use “compression-webpack-plugin and “brotli-webpack-plugin” to generate required files.

const CompressionPlugin = require(‘compression-webpack-plugin’);
const BrotliPlugin = require(‘brotli-webpack-plugin’);
module.exports = {
plugins: [
new CompressionPlugin({
asset: ‘[path].gz[query]’,
algorithm: ‘gzip’,
test: /\.js$|\.css$|\.html$/,
threshold: 10240,
minRatio: 0.7
}),
new BrotliPlugin({
asset: ‘[path].br[query]’,
test: /\.js$|\.css$|\.html$/,
threshold: 10240,
minRatio: 0.7
})
]
}
Image for post
Image for post
Image for post
Image for post
It will generate files like this. Look how .br file is smaller in size than .gz file

Next step is to serve right file based on accept-encoding header. We will use express-static-gzip for handling this part for us.

import expressStaticGzip from "express-static-gzip";app.use('/build/client', expressStaticGzip('build/client' {
enableBrotli: true,
orderPreference: ['br', 'gz'],
setHeaders: function (res, path) {
res.setHeader("Cache-Control", "public, max-age=31536000");
}
}));

That’s it. Those few lines enables the Brotli compression with fallback to the Gzip compression for all the static resources of your website.

Image for post
Image for post
Let’s see it in action here

So, in just a few lines of code, we have given a boost to our Webpack powered website. There are various other things that one can do to improve the performance which I will discuss in my next blog.

If you enjoyed this story, please click the 👏 button and share to help others find it! Feel free to leave a comment below.

The Groww Engineering publishes technical stuff, latest technologies and better ways to tackle common programming problems. You can subscribe to get them here.

Groww Engineering

Groww Engineering and Tech

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store