GZIP Compression Using Amazon S3 Cloudfront CDN
After integrating CDN with your current hosting, the next step you need to do probably to make use the benefit of compression as much as possible. Most of the modern browser is now supporting gzip-compression as standard feature and it is quite easy to produce on-the-fly gzip distribution on your hosting server. Amazon S3 Cloudfront CDN on the other hand, currently does not support on-the-fly gzip-ing, but implementing gzip distribution with Cloudfront could be easier than you think.
(Although the example I describe below is using WordPress platform and PHP, I don’t see any problem to be used and implemented on different platform and language)
Serving Static Compressed File from The Cloud
GZIP in The Cloud
This is the outline:
- We do the gzip compression beforehand. Using 7zip(free) or many other compression utility, just create the compressed version of your static file. So every file that you put on CDN should have 2 versions: the normal version (just in case a browser did not support compression) and the gzip-compressed version (for most browser)
For example: your main theme stylesheet from your website: style.css. You will have 2 versions: style.css (normal version) and style.css.gz (compressed version produced using gzip). - Rename your gzip-ed version to have the same last extension as the original. For example, rename style.css.gz above to style.gz.css.
The reason is some applications (that could be an extension of your browser) only check for the last extension (anything after dot at the end of the name) instead of checking “Content-Type” on the header. So, in this case the program will still know that the file is actually a css file to describe the stylesheet. Note: “Content-Type” header is usually generated automatically by CLoudfront based on the extension. - Upload both normal (e.g:style.css) and compressed version to (e.g:style.gz.css) to Amazon S3 Cloudfront.
- Add one more Header only for compressed version (e.g:style.gz.css) with “Content-Encoding” and the value is “gzip”
- Double check the content of the header:
Normal file(e.g:style.css): need to have “Content-Type: text/css” (of course if it’s gif image the value will be “image/gif”, etc)
Compressed file (e.g:style.gz.css) : need to have “Content-Type: text/css” and “Content-Encoding: gzip”.
Also, don’t forget to set the appropriate access privilege (ACL setting) - Modify Wordpress (or other platform) to deliver the correct one. The idea is if the browser supports gzip, then we will point to compressed version. If it doesn’t support compression, just give the normal version.
Modify Wordpress To Deliver Compressed Version
How do we know whether or not the browser support gzip compression? Fortunately it’s easy to answer: the browser will tell the server via “Accept Encoding” parameter. So we just check if the browser sent this “Accept Encoding”, if yes, give the link of gzipped version, otherwise just give the normal one.
Why we do this? The gzip version could be say 50% smaller hence it will be delivered 2 x faster. So, if all the static file (usually *.css, *.js, *.txt , etc) then there will be significant speed improvement, i.e: the website is displaying faster on the user’s browser.
1. Modify index.php at the root directory of your server
Open your index.php file on your wordpress directory. It’s usually very small and only consists lines like:
define(‘WP_USE_THEMES’, true);
require(‘./wp-blog-header.php’);
Add 2 additional code below (before the above lines):
$GLOBAL_GZSTRING=”";
if (substr_count($_SERVER['HTTP_ACCEPT_ENCODING'], ‘gzip’)) $GLOBAL_GZSTRING=”.gz”; else $GLOBAL_GZSTRING=”";
Basically it is just checking whether the browser support gzip. If it is not, then the global variable $GLOBAL_GZSTRING will be empty, otherwise “.gz” will be the content.
I can see some advantages modify the index.php of the root directory (although some will disagree with the style):
- Usually it doesn’t get changed in the event of Wordpress upgrade. Even if it is, it’s very straightforward to put those 2 lines without disturbing anything else.
- Easy to remove if you decide no longer want to use CDN to deliver compressed format.
2. Modify the caller of the file
Yes, you need to know where the file being called from the Wordpress. For example, the style.css above is called from header.php in the theme’s directory and contain something like:
<link rel=”stylesheet” type=”text/css” href=”<?php bloginfo(‘template_directory’); ?>/style.css” media=”all” />
Then you just simply insert the global variable to make it like: (see red color for the insertion)
<?php global $GLOBAL_GZSTRING;?>
<link rel=”stylesheet” type=”text/css” href=”http://[Your CDN URL]/style<?php echo $GLOBAL_GZSTRING;?>.css” media=”all” />
It basically just insert “.gz” into the link to the static file whenever the client support gzip compression.
So, by using this modification, your website will correctly pointing to the compressed file from already fast CDN to deliver even better performance for your website.
Some notes:
- Although not complicated, you do need some knowledge on PHP (to iron out any possible typo error , for example or other minor problem. So, either you know what you are doing or have your IT guys to do it together with you. (This just need hardly an hour if you need to pay him/her by the hour
). - This tweak somehow do not work on RackSpace Cloud Files CDN as they add some prefix on the header by default. (For example: “Content- Encoding: gzip” will become “X-Object-Meta-Content-Encoding:gzip” which will – of course – not recognized by the browser).
- Don’t do gzip on images that have been compressed, for example: *.jpg, *.png, *.mp3, *.mp4 or even *.gif, etc. You will notice the improvement of size will not be significant hence the benefit will not outweigh the pitfall (clogging your computer with decompression method)
- And, of course, always backup your data before making any change.
It works for me as I have tested it and currently using this tweak, but I disclaim any responsibility whatsoever if you have some technical difficulty because of reading this article and do something wrong on the way.
Comments
Tell me what you're thinking...
and oh, if you want a pic to show with your comment, go get a gravatar!