Recently I have been working on a CSS & Javascript bundle called “Jon Kragh Starter” that I created as a starting point for all of my web projects.
I turned to Amazon’s CloudFront service as a CDN for my JS & CSS files. Amazon won for me because I need SSL, and their offering was the cheapest in that regard.
My site is hosted on Windows Server 2008 R2 Standard with IIS 7.5. Setting up Cloud Front was easy. I simply pointed it to my site as a “Custom Origin” and then 10 minutes later, I was about to view my content under the URL that CloudFront generates.
The biggest challenge was to get CloudFront to serve my gzipped css and JavaScript. CloudFront will serve Gzipped content if your origin server returns gzipped content to CloudFront, when CloudFront requests it with the user’s headers.
So first and foremost you need to ensure your origin server serves Gzipped content. Here is an example at my origin. Using Firebug’s network tab you can inspect the response headers:
The trick is to get CloudFront to serve the same Gzipped content. It turns out that IIS will not return gzipped content to CloudFront in its default configuration.
Many thanks to this thread for pointing me to the correct solution. What worked for me was to add the flags noCompressionForHttp10="false" noCompressionForProxies="false" to the server’s applicationHost.config file followed by a global “iisreset” from the command line.
Keep in mind during your testing, you will need to add new files to your server when you retry to see if you get your gzipped content from CloudFront. This is because CloudFront caches your content. There is a way to invalidate it through their API, but it’s much simpler to just add another js file (e.g. test with test1.js, then copy it & rename, and test with test2.js etc).
File: C:\Windows\System32\inetsrv\config\applicationHost.config
(Unfortunately this did not work for me in a regular application level web.config and it needed to be done at the server level).
<httpCompression directory="%SystemDrive%\inetpub\temp\IIS Temporary Compressed Files" noCompressionForHttp10="false" noCompressionForProxies="false">
<scheme name="gzip" dll="%Windir%\system32\inetsrv\gzip.dll" />
<dynamicTypes>
<add mimeType="text/*" enabled="true" />
<add mimeType="message/*" enabled="true" />
<add mimeType="application/x-javascript" enabled="true" />
<add mimeType="*/*" enabled="false" />
</dynamicTypes>
<staticTypes>
<add mimeType="text/*" enabled="true" />
<add mimeType="message/*" enabled="true" />
<add mimeType="application/x-javascript" enabled="true" />
<add mimeType="application/atom+xml" enabled="true" />
<add mimeType="application/xaml+xml" enabled="true" />
<add mimeType="*/*" enabled="false" />
</staticTypes>
</httpCompression>
iisreset
CloudFront JavaScript Gzip Test
My Origin
https://www.jonkragh.com/starter/v/1.0/foot-complete.js
Cloudfront gzip encoded javascript
https://d2yljticlotdgz.cloudfront.net/starter/v/1.0/foot-complete.js
CloudFront CSS Gzip Test
Origin
https://www.jonkragh.com/starter/v/1.0/starter.css
Cloudfront
https://d2yljticlotdgz.cloudfront.net/starter/v/1.0/starter.css
I’m now enjoying blazing speeds. Here is an example of Ctrl F5 the same JS file from my server (I am in NJ, my Server is in Denver).
Directly from my origin server
The same file from CloudFront