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
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.
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.
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
Azure Blob Storage Setup
Though we are referring to Azure Blob Storage here, similar settings should be available in other platform like GCP/AWS. Let’s get started with Azure example. Create a new Blob Storage in Azure portal. Once created, go to
Static Website settings in Blob Storage, and enable it. After that, provide
Index Document Name and
Error Document Name input box. Save the changes (I forget many times). Once saved, you will get a URL for your static website. Since we haven’t uploaded anything, browsing the URL will show some error message. So now we are ready to upload the content to the Azure Storage. Let’s build the application.
Angular Deployment Setup
- Create the production build using
ng build -c productionscript or your own custom command if any.
- Go to the output folder (normally
dist/app-name), and verify the content size.
- Install any NPM package to create Gzip files — I prefer Gzipper
npm install -g gzipper. You can install it locally also if you can’t override the global settings.
rm -rf *.js *.css
gzippercreates compressed files with original extension, and appends
.gzat the end. Of course, you can configure the output file name format using options. Rename all
- Now we are ready to upload content to our Azure Blob Storage. We do need to set a few important attributes, but we will do it later. When you enable “Static Website” option for an Azure Blob Storage, it creates a special container called,
$webwhich you MUSTN’T rename or delete.
- Go to Azure Blob Storage,
Storage Browser (preview)or you can download the
Storage Browserapplication locally as well. You can upload the output bundle files in
- The most critical part is to set up the attributes for uploaded files. There are helper utilities from Azure (azcopy) etc. which allow you to set up attributes while uploading the content itself. You can check it out as well. You can run the PowerShell script to update the attributes of all items. Which attributes to set, you ask.
a) CacheControl — This attribute will cache the resource on the client side until the expiry settings. For example,
cache-control=public,max-age=604800,must-revalidate. You should check out the CacheControl header information for detailed options.
c) Content-Encoding — Since we have compressed our assets using
gzip, we will provide
gziphere. You can also have
br, deflate, compressas other options.
- Note that, there are other attributes which affects the compression, and caching mechanism of Azure Blob Storage.
With the above steps, you are all set with the compression. Try loading your website in browser, check the
Network tab in the browser with request headers. You should see the
Content-Encoding header attribute set with
gzip and size of the gzipped file being trasnferred over the network.
As you can see in the example above, there were only 987kb transferred for a total of 3.6 MB resources. The Request header contains
Accept-Encoding attribute with
gzip included, and thus the server responded with
gzip attribute with compressed file.
The next step is to set up an Azure CDN with custom domain mapping with your domain and link the URL with Blob storage URL. The Azure CDN is smart enough to serve the compressed assets if being served from Blob Storage, so there are no action items for us.
This is a critically important step for any Static Page Application being deployed for the performance.
You can refer to my example repository, which contains no logic at all but contains a large mock data set to have a huge output
GitHub - ultrasonicsoft/ng-gzip-compression-azure-demo: Deploy Angular app on Azure Blob Storage…
This project was generated with Angular CLI version 13.3.0. Run ng serve for a dev server. Navigate to…