Faster Page Load Times Using Brotli Compression

By Subodh Kumar, Principal Engineer, WaveMaker

At WaveMaker, we want our users to have the best user & developer experience aided by a great performance. Also, we want the apps built by our customers in WaveMaker to load really quickly. In every release, we work on making the load experience better.

WaveMaker is a Rapid Application Development (RAD) platform that lets customers create responsive web applications or mobile applications using a simple drag and drop approach. WaveMaker simplifies building modern responsive apps using Angular. WaveMaker provides 100+ out-of-the-box responsive UI components. Using these components functionality can be built by binding them to data sources such as REST, SOAP APIs, or Databases.

As customers build the application in WaveMaker, Angular code is automatically generated. This allows us to use build tools like web packs and other tools in the Angular ecosystem. Using these tools WaveMaker application build process already derives benefits such as minification, tree shaking, lazy loading, and compression of static assets

In the 10.2 release, WaveMaker is introducing support for a better compression algorithm ‘Brotli’ as a part of its optimization that will help the apps load even faster. Customers will realize these benefits without any code changes by simply rebuilding their apps.

Why static assets should be compressed?
The performance of every app is proportional to the size of the resources it serves over the network to the user. The resources can be in the form of HTML, JavaScript, images, styles, and others. The bandwidth & time a resource can consume is a function of its size.

Thus, having resources of a smaller size can help in an app’s response time & performance. Compressing the application assets can help us achieve that. With the right compression algorithm deployed, the resources served will be optimal.

Brotli will help the pages of an app load faster & be more responsive. It also provides a better user experience, which every app or business is striving for.

What is Brotli? How is it better than gzip?
Brotli like broccoli is better for your health. 🙂

Humor aside, Brotli (defined in RFC 7932) 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 to deflate but offers more dense compression.

Brotli, when compared to Gzip, provides better compression & decompression performance. Following is the summary for comparison of common assets of an app

  • 14% smaller JS
  • 21% smaller HTML
  • 17% smaller CSS

It’s not just about compression ratio, but also about how long Brotli takes to compress & decompress data. Data suggests that Brotli is better at compressing static data because of its superior compression ratio.

Browser support
Brotli compressed files are served only over HTTPS & encoding is supported in most of the modern web browsers as shared below,

How to check if your static assets are Brotli compressed
The browsers which support Brotli will send ‘br’ with ‘gzip’ in ’accept-encoding’ of request header.

 

And, If Brotli is enabled on the server, the response will be in Brotli compressed format

Performance gains in load times
In WaveMaker, as soon as the user makes a deployment request for the Angular profile, the Brotli compressed files are generated. Since the generation of compression is part of the build process, when a request for resources is made by the app, the files are readily available and shared. This results in no additional runtime cost at the server.

Below is the comparison of resources for a sample app developed in WaveMaker, which will show the difference in the resource size.

Asset Type Without Compression Gzip Brotli
JS 2.7MB 698KB 573KB (~17% over gzip)
CSS 548KB 82.9KB 67.5KB (~18% over gzip)


What do WaveMaker customers need to do to benefit from this?
For existing projects, just modify deployment.properties (This will be not be needed after the migration is in) to enable the compression in the ‘deployment. properties’ as shown below & have the app served over HTTPS.

 

References:
Google blog -Introducing new brotli compression 2015/09
Github - Brotli
Mozilla - GZip Compression with brotli