Cameron Stokes's Blog

Compressed Content, Amazon S3, and CloudFront

I recently published a static website to Amazon Simple Storage Service (Amazon S3) and started looking for ways to improve performance. There weren’t any inherent performance problems using S3 by itself but I wanted to squeeze out every bit of performance I could. I first looked at typical website performance techniques such as minifying files, putting stylesheets at the top, and scripts at the bottom, but wanted to keep going. My next steps were to GZIP components and use a content delivery network. Fortunately Amazon makes both of these easy with S3 and Amazon CloudFront.

Storing GZIP content on S3 takes a mere 3 steps:

  1. GZIP content
  2. Upload to S3
  3. Set metadata on content

For my small site I ran GZIP on all of my files manually at the command-line, but this could be easily scripted. From the command-line it looks like this:

1
2
3
$ gzip -c site/index.html > compressed/index.html
$ gzip -c site/_packed/application.js > compressed/_packed/application.js
$ gzip -c site/_packed/application.css > compressed/_packed/application.css 

After uploading the files to S3 I needed to set their metadata to indicate they’re GZIP encoded. In the S3 tab within the Amazon Management Console, this is done by selecting each object and going to the Metadata tab on an object’s properties and adding the Content-Encoding key and value shown here:

At this point you can test your compressed content by opening one of your files in your browser and making sure it renders appropriately.

Distributing content on the Amazon CloudFront CDN takes even fewer steps:

  1. Setup CloudFront distribution
  2. Setup DNS CNAME record (such as www.example.com)

Back in the AWS Management Console, in the CloundFront tab, click Create Distribution and select your S3 bucket from above as your origin. Enter the CNAME you plan to use and your Default Root Object and click through the rest of the wizard. At this point Amazon distributes your configuration to its CloudFront network, which seems to take about 5-10 minutes on average. Meanwhile, Amazon will assign your CloudFront Domain Name which you should set CNAME to in your DNS provider. You’re done…

At this point your website content is compressed, stored in a bucket on S3 and distributed on CloudFront. If you use Amazon’s Route53 DNS service, your entire site is running in the cloud.

Cursory tests show significant improvements across each level of changes:

To summarize, hosting a static website on S3 and CloudFront from Amazon Web Services is not only easy but also can drastically improve performance of your site.

(If you use Amazon’s Route53 DNS service, I find www.interstate53.com to be the best management interface out there currently.)

Tech

Comments