Brotli compression in react-apps with Nginx
Brotli compression in react-apps with Nginx

Brotli compression in react-apps

What it is, why do we need it, and how to implement it.

What is Brotli?

Brotli is a compression algorithm and it’s been developed by Google and serves best for text compression. Nowadays it is supported by all major browsers.

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 modelling. Brotli is a compression algorithm developed by Google and works best for text compression.

Why do we need it exactly?

Most of the 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 and 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, you will get a response in Brotli compressed format.

Why do we need the Gzip fallback?

As of now, 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 on 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

Load time(ms) for different network connections

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.

--

--

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