February 22, 2021

Brotli compression in react-apps

Reading time about 3 min
Brotli compression in React apps

What is Brotli?

Brotli is a compression algorithm developed by Google that is best suited for the compression of text.

Brotli is a data format specification for data streams compressed with a specific combination of the general-purpose LZ77 lossless compression algorithm, Huffman coding, and 2nd order context modeling.

Why do we need it exactly?

Most companies are customer-centric and they know what user experience means. So, brotli will provide performance improvements to the overall user experiences for the webpack powered website.

According to a study by Google, the session time increases up to 70% if the website loads within 5 seconds. So, here at Sendinblue, we know the importance of every second, and using Brotli compression over gzip we were able to save around 12–15% of load times.

Problem Statement

How to enable react apps to serve brotli compressed files when served through Nginx with a fallback to Gzip?

Let’s enhance the performance

It’s a two steps process

  • Generate Brotli and Gzip compressed versions of files using webpack.
  • Serve the correct version of files when requested over a network.

Node 10.16.0 later has native support for Brotli compression in its zlib module.

plugins: [
    new CompressionPlugin({
      filename: '[path][base].gz',
      algorithm: 'gzip',
      test: /\.js$|\.css$|\.html$/,
      threshold: 10240,
      minRatio: 0.8,
    new CompressionPlugin({
      filename: '[path][base].br',
      algorithm: 'brotliCompress',
      test: /\.(js|css|html|svg)$/,
      compressionOptions: {
        level: 11,
      threshold: 10240,
      minRatio: 0.8,
  • Nginx configuration
# gzip
gzip on;
gzip_vary on;
gzip_proxied any;
gzip_comp_level 6;
gzip_types text/plain text/css text/xml application/json application/javascript application/xml+rss application/atom+xml image/svg+xml;

# brotli
brotli on;
brotli_comp_level 6;
brotli_types text/xml image/svg+xml application/x-font-ttf image/vnd.microsoft.icon application/x-font-opentype application/json font/eot application/vnd.ms-fontobject application/javascript font/otf application/xml application/xhtml+xml text/javascript  application/x-javascript text/plain application/x-font-truetype application/xml+rss image/x-icon font/opentype text/css image/x-win-bitmap;

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

Does your browser support Brotli?

Browsers that support Brotli send “br” along with ‘gzip’ in the accept-encoding request header. If Brotli is enabled on your web server, as a result, you will get a response in Brotli compressed format.

Why do we need the Gzip fallback?

A, most browsers support brotli, but yes not all, and gzip has been supported by all browsers.

The “accept-encoding” HTTP header tells us, which content-encoding, usually a compression algorithm, the client is able to understand.

Performance Metrics

We implemented brotli compression on multiple applications at Sendinblue and found encouraging metrics both on bundle size and load time improvement. Sharing below some stats from one of our applications.

Bundle size is reduced by more than 70% compared to having no compression and by 12–15% when compared to Gzip compression

The load time, over different network connections, reduced by 7–15% when compared to gzip and by 48–82% when compared to no compression.

Eventually, these few lines of code will improve the performance of Webpack powered websites. Yes, there are many other performance improvements things also, which we will discuss in our upcoming blogs.