Improve Angular performance with Gzip compression + Azure Blob Storage

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 them on server with right headers. The requesting browser will get the compressed resource, and decompress it. This will yield a significant performance gain.

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.html in 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.

  1. Go to the output folder (normally dist/app-name), and verify the content size.
  2. 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.
  3. Compress the JavaScript and CSS files using Gzip (default compression for gzipper) `gzipper compress -v — include js,css dist/<app-name>`
  4. Remove original JavaScript, CSS files from output folder e.g. rm -rf *.js *.css
  5. The gzipper creates compressed files with original extension, and appends .gz at the end. Of course, you can configure the output file name format using options. Rename all .js.gz files to .js and .css.gz to .css extension.
  6. 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, $web which you MUSTN’T rename or delete.
  7. Go to Azure Blob Storage, Storage Browser (preview) or you can download the Storage Browser application locally as well. You can upload the output bundle files in $web container.
  8. 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.
    b) Content-Type — For JavaScript files, set application/javascript, charset=utf8 or text/javascript, charset=utf8
    c) Content-Encoding — Since we have compressed our assets using gzip, we will provide gzip here. You can also have br, deflate, compress as other options.
  9. Note that, there are other attributes which affects the compression, and caching mechanism of Azure Blob Storage.

Azure CDN

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.

Summary

This is a critically important step for any Static Page Application being deployed for the performance.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store