Azure Storage GZip Encoding

12 Sep

tldr; ASGE is a new CLI tool that lets you easily enable HTTP Compression and CORS on your blobs in Azure Storage, you can find it on GitHub.

Azure storage is an excellent option for storing assets for your web application (or even your entire static web application), but it is often preferable to have this data delivered to the browser using HTTP Compression to reduce file size and improve performance. Azure CDN can be used to provide compression and performance improvements on top of blob storage but has an upper limit of 1MB for HTTP compression.

There are a variety of scenarios where you may have content larger than the 1MB compression limit for Azure CDN.  Large aggregated CSS and JS produced by build tools such as Webpack can easily exceed this size.  In my case large 3D assets feeding frameworks like ThreeJS and Babylon can heavily benefit from compression.

Azure Blob Storage is capable of delivering the correct content-encoding: gzip headers, but you have to compress the data yourself and properly configure the headers.  After being configured correctly the files can be downloaded directly or via CDN and properly leverage HTTP Compression with any web browser.

Managing this manual compression and configuration of headers yourself would be tedious so I have created a tool can be run to do it for you, and happily ignores files that are already compressed. You can run it automatically as part of a build process, or manually on an as-needed basis.

Azure Storage GZip Encoding Utility

The utility can enumerate all of the files in a container. It then filters to files matching your provided extensions. These files are compressed using GZip and the content-encoding and cache headers are configured on them so they are compatible with all browsers HTTP compression features. The tool will not alter a file which is already compressed (based on inspecting the headers), so it is safe to run multiple times to catch new files.

The utility can also automatically configure your storage account with wildcard CORS settings which are often desirable if serving certain types of assets through Azure CDN.

Enabling CORS on a storage account is non-trivial, and when used via CDN’s that cache CORS settings (like Azure CDN) it is typically important to just enable CORS wildcards.  The tool does this via the -w parameter, which builds out this simple CORS rule and applies it:

Source code and binaries are available at GitHub.  Code contributions are welcome.


Leave a Reply

Your email address will not be published. Required fields are marked *