Saturday, November 15, 2008

Compressed GZip content from Windows Azure blob storage

by Sriram via Sriram Krishnan on 11/15/2008 9:32:00 AM

On one of our internal mailing lists, someone asked how to serve gzipped content from Windows Azure storage directly. When serving static content (like JS/CSS files) over HTTP, serving them compressed usually gives you big wins in terms of network performance since you have to send less bytes over the wire.

Windows Azure currently doesn't compressing uncompressed data on the fly for you. However, there's nothing stopping you from storing the data compressed in the first place. The key is to set the Content-Encoding header to 'gzip' when uploading the blob so that when the blob storage serves it back out, clients know that the content they're getting is compressed and know how to deal with it.

One caveat with this approach is that there is no way to support clients which can't support gzip decompression. However, all modern browsers support this really well so you shouldn't run into any issues for plain vanilla HTTP content.

Here's a snippet of code illustrating how to do this. In this, I take a file posted over a Asp.Net file upload control and store it compressed in blob storage.

/* Blob to be uploaded,in this case coming from a file upload control */
var inputstream = fileUpload.PostedFile.InputStream; 
var contentType = fileUpload.PostedFile.ContentType;

/* We'll use the filename without the path as the blob key */
var blobKey = Path.GetFileName(fileUpload.PostedFile.FileName); 

var container = BlobStorage.Create
                (
                StorageAccountInfo.
                GetDefaultBlobStorageAccountFromConfiguration()
                ).GetBlobContainer("js");

/*Compress the blob we're storing*/
var compressedData = new MemoryStream();
var gzipStream = new GZipStream(compressedData, 
    CompressionMode.Compress); 
gzipStream.Write(fileUpload.FileBytes,0, 
    fileUpload.FileBytes.Length);
gzipStream.Close();

/* Store the compressed content to blob store
  and set the right Content-Encoding header */

container.CreateBlob(
        new BlobProperties(blobKey)
        {   /* This is the part that makes it all work! */
            ContentEncoding = "gzip", 
            ContentType = contentType
        },
        new BlobContents(compressedData.ToArray()),
        false/*Don't overwrite*/
        );

I uploaded a 20K sample JS file and then hit the blob's URL with Firefox. The screenshot shows you how the 20K JS file got compressed down to 7K and then sent down with the right header for the browser to decompress it on the fly

This technique typically works better on large text content like CSS and JS files. I wouldn't recommend using this on images as they are typically highly compressed already. For more on such performance techniques, I would strongly recommend Steve Souders' excellent book.