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