How To Speed Up Your Web Application With Brotli Compression

Lossless compression is a great way of lowering the amount of data that users have to download to access your application. Minimizing data transfer improves several critical metrics of your application:

• The load time of the application will be lowered, improving your users’ overall experience—this is important for users with a slow internet connection, which is critical for applications primarily used on mobile devices.
• The amount of data transferred out of your servers—which can impact your cloud or data center cost, depending on the use case and hosting setup.

Introducing Brotli

Currently, Brotli is the most efficient compression algorithm for website code. According to benchmarks, HTML, CSS, and JS files are more than 10% smaller when compressed with Brotli compared to traditional GZIP. Brotli offers better results and is supported across all modern browsers—in most cases, it should be the go-to solution for compressing website data.

Whose responsibility is it to compress the files?

Isn’t compression something done automatically by your hosting provider? It can be, but there are few downsides to depending on a third party to compress the application:

• Compressing files is fast, but doing it when users request the files will introduce unnecessary delay. It’s safe to assume this is what happens when you are using compression support provided by hosting.
• You are limited to what is provided by the hosting company. GZIP may be the only option, which will produce files bigger than those compressed with Brotli.

As an alternative to automatic compression provided by hosting, you can generate .br files every time you build your app for deployment. In this way, you can ensure that .br files are up to date and ready on the server when needed—and that the user experience will not be affected by slow compression. Depending on your hosting setup, there will be different ways to configure your server to use .br files for user agents that accept Brotli.

How to set up Brotli in your Angular-based application

If you are interested in using Brotli for your AngularJS or Angular application, our team recently published a guide on the XLTS.dev blog here.

Looking for more support for your Angular projects?

Our team at DevIntent is highly experienced in Angular development, testing, and software quality. If you'd like to chat about how we can help you, please contact us at sales@devintent.com.