title: Serving gzipped CSS and JavaScript from Amazon CloudFront via S3
body: <p>I've been looking for ways of making my site load faster and one way that I'd like to explore is making greater use of Cloudfront.</p>
  
  <p>Because Cloudfront was originally not designed as a custom-origin CDN and because it didn't support gzipping, I have so far been using it to host all my images, which are referenced by their Cloudfront cname in my site code, and optimized with far-futures headers.</p>
  
  <p>CSS and javascript files, on the other hand, are hosted on my own server, because until now I was under the impression that they couldn't be served gzipped from Cloudfront, and that the gain from gzipping (about 75 per cent) outweighs that from using a CDN (about 50 per cent): Amazon S3 (and thus Cloudfront) did not support serving gzipped content in a standard manner by using the HTTP Accept-Encoding header that is sent by browsers to indicate their support for gzip compression, and so they were not able to Gzip and serve components on the fly.</p>
  
  <p>Thus I was under the impression, until now, that one had to choose between two alternatives:</p>
  
  <ol>
  <li><p>move all assets to the Amazon CloudFront and forget about GZipping;</p></li>
  <li><p>keep components self-hosted and configure our server to detect incoming requests and perform on-the-fly GZipping as appropriate, which is what I chose to do so far.</p></li>
  </ol>
  
  <p>There <em>were</em> workarounds to solve this issue, but essentially these <strong>didn't work</strong>. [<a href="http://www.alfajango.com/blog/how-to-combine-gzip-plus-cdn-for-fastest-page-loads/" rel="noreferrer">link</a>].</p>
  
  <p>Now, it seems Amazon Cloudfront supports custom origin, and that <strong>it is now possible to use the standard HTTP Accept-Encoding method for serving gzipped content if you are using a Custom Origin</strong>  [<a href="http://www.nomitor.com/blog/2010/11/10/gzip-support-for-amazon-web-services-cloudfront/" rel="noreferrer">link</a>].</p>
  
  <p>I haven't so far been able to implement the new feature on my server.  The blog post I linked to above, which is the only one I found detailing the change, seems to imply that you can only enable gzipping (bar workarounds, which I don't want to use), if you opt for custom origin, which I'd rather not: I find it simpler to host the coresponding fileds on my Cloudfront server, and link to them from there. Despite carefully reading the documentation, I don't know:</p>
  
  <ul>
  <li><p>whether the new feature means the files should be hosted on my own domain server <em>via</em> custom origin, and if so, what code setup will achieve this;</p></li>
  <li><p>how to configure the css and javascript headers to make sure they are served gzipped from Cloudfront.</p></li>
  </ul>