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
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.

It’s important but what the hell 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.

Why we need the fallback to Gzip?

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

Let’s get started

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
})
]
}
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.

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

Vikas Singh

Written by

I code to bring wow experience for users

Groww Engineering

Groww Engineering and Tech

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade