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

GZIP in The Cloud

This is the outline:

  1. 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).
  2. 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.
  3. Upload both normal (e.g:style.css) and compressed version to (e.g:style.gz.css) to Amazon S3 Cloudfront.
  4. Add one more Header only for compressed version (e.g:style.gz.css) with “Content-Encoding” and the value is “gzip
  5. 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/cssandContent-Encoding: gzip”.
    Also, don’t forget to set the appropriate access privilege (ACL setting)
  6. 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):

  1. 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.
  2. 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.

Be Sociable, Share!

 

Comments

9 Comments on GZIP Compression Using Amazon S3 Cloudfront CDN

  1. Brad on Sun, 25th Apr 2010 8:24
  2. Thanks for the tip! Great explanation. I guess it may be obvious to many but I didn’t realize it was as easy as using 7zip on the file. Thanks again.

  3. Dalton on Tue, 27th Apr 2010 6:22
  4. Thanks for the tip, this seems to be working for me. It’s a lot of work, but probably worth it since I have a lot of uncompressed scripts & CSS on CloudFront.

    Just a suggestion: it’s probably better to add the line the functions.php of your theme instead of the WordPress index.php:

    $GLOBAL_GZSTRING=””;
    if (substr_count($_SERVER['HTTP_ACCEPT_ENCODING'], ‘gzip’)) $GLOBAL_GZSTRING=”.gz”; else $GLOBAL_GZSTRING=””

    Then, add at the top of header.php, and you can use it anywhere!

  5. Moorthy on Thu, 17th Jun 2010 22:45
  6. IE6 doesn’t seem to send an HTTP_ACCEPT_ENCODING header.
    if (isset($_SERVER['HTTP_ACCEPT_ENCODING']))
    {
    if (substr_count($_SERVER['HTTP_ACCEPT_ENCODING'], 'gzip'))
    $GLOBAL_GZSTRING=".gz";
    else
    $GLOBAL_GZSTRING="";
    }
    else
    $GLOBAL_GZSTRING="";

  7. Hayden on Thu, 20th Jan 2011 22:05
  8. I tried adding to functions.php it broke php. Can u add instructions on adding to functions.php because index.php is overwritten on every wordpress version upgrade installed.

    thx

  9. rmd on Mon, 24th Jan 2011 19:34
  10. Very nice tutorial. Just a question for step 4, how can I set the content encoding of the compressed file into gzip?

  11. john on Mon, 31st Jan 2011 5:41
  12. How do I perform step 4 from the section entitled Serving Static Compressed File from the Cloud.

    4. Add one more Header only for compressed version (e.g:style.gz.css) with “Content-Encoding” and the value is “gzip”

    How do you do this?

  13. Denis Kristanda on Sat, 2nd Apr 2011 16:58
  14. john, rmd,
    You can use this using your uploader tools. I use the free Cloudberry which can do this easily (asked everytime you upload)

  15. Denis Kristanda on Sat, 2nd Apr 2011 17:00
  16. Moorthy,
    check the webserver (apache,etc) – could be setting from it

  17. Will on Thu, 29th Dec 2011 0:46
  18. Great tip… wondering how this holds up under all browsers. Do they all understand .gz compression? I’m going to test it out and see how it works. Thanks again for the tip.

Tell me what you're thinking...
and oh, if you want a pic to show with your comment, go get a gravatar!





Newsletter Subscription

Get website update right into your mail box! And rest asure we respect your privacy and will never abuse your trust with your email address.
 
SIGN UP now! It's Free..