Improve Angular performance with Gzip compression + Azure Blob Storage

I can't believe it’s been so long I haven’t written anything, but again, the past couple of years have been very challenging for all of us. Nonetheless, I am happy that I got a chance again to write another story.

So in terms of Angular application performance topic, there are many guidelines one should adhere for example, using Lazy Loaded Modules, using build optimizer settings in angular.jsonetc.

Once your web application is built, and you are about to go live by deploying the output bundle to either Azure Storage, GCP/AWS S3 Bucket or any other static website hosting platform, One of the most important task you need to do — “compression”. Yes, Angular builder will do its best to reduce output bundle size with Tree Shaking etc. yet there is a chance to reduce the size.

Many standard CDN, and web hosting platforms like Azure Blob Storage, GCP Bucket, AWS S3 supports serving the compressed assets.

Note: In next story you will find the GCP deployment details.

https://balramchavan.medium.com/deploy-angular-application-to-google-cloud-storage-gcp-gzip-compression-ac62e6040e81

Problem

Let me explain in very simple term. Normally, when you hit the website URL in browser, the server gets the request with some headers, and after inspecting headers it sends the asked resource e.g. main.<hash>.js file. Well, many things go behind the scene over the network, but we won’t bother about them right now. Let’s say the application you built, is huge, i.e. the main.<hash>.js file is of 28.5 MB in size. Consider the time taken to download this file from server to client on a slow network. The performance will not be acceptable, will it? Whereas, if you compress this file using gzip or other compression methods, the size will be down at least by 80% more or so.

Solution

As a solution to this problem, almost all modern browsers sends the Content-Encoding headers to the server, letting them know that if the server sends them a compressed file instead of a plain file, they are smart enough to decompress the resource at the browser end. The supported Content-Encoding scheme varies for each browser, but almost all of them support gzip encoding (though you should strive for brotli encoding). To summarize, we have a solution now — compress the assets like CSS, JavaScript files, and put…