Tuesday, March 16, 2010

Using gzip'ed Cappuccino Projects with GoDaddy.com Shared Hosting

Update- Blog moved to: http://saleemabdulhamid.com/blog/2010/3/using-gziped-cappuccino-projects-with-godaddycom-shared-hosting

One of the many reasons GoDadddy.com's shared hosting is terrible, is the lack of access to the httpd.conf file and Apache configuration options. Fortunately, all is not lost, and it is still possible to get all the awesomeness of fast-loading gzip'ed files following the instructions below (with credit to Mathieu Carbou for pointing in the right direction.).
Why would you want to do this? In my app, which weighs in at about 2MB uncompressed when first loaded, gzip'ing cut the load time in about half. On subsequent loads, with caching, that was cut approximately in another half. So it's definitely worth the little extra work during deployment.


The first step is to get your files gzip'ed. You can do this either locally or by ssh after having uploaded the files. Since you probably want both the gzip'ed and un-gzip'ed files on your server, in case someone's browser can't handle gzip'ed files, it makes sense to do it on the server, since that means less stuff you have to upload.
In either case, you can gzip all your files using some kind of script like this:

    for i in `find . -name *.*`
            echo "Compressing $i..."
            gzip -c -9 $i > $i.gz
If you only want to gzip .js files, or .html files, etc. just change *.* to *.js, *.html, etc. I think that gzip'ing reduces the size of pretty much all types of files in a cappuccino project, except maybe the .png's.
If this works correctly, you should see all your project files having a corresponding .gzip file in the same directory.

Redirecting the Browser Request to the gzip Files

When your browser requests for example index.html, you want the server to reply with the gzip'ed version, namely index.html.gzip, and also inform the browser that the file is gzip'ed. To do this, we will add some rewrite rules to a .htaccess file in the base directory of your app. If you want to do more customized things, you can check out the reference for rewrite rules. Otherwise, just use exactly what is given below.
First, create a new text file and name it .htaccess. This file should be in the root directory of your app on the server. Add the following lines to this file (do not add the explanations):

rewriteengine on
Turns on the apache rewrite engine.
rewritebase /
This is the base path to all the files you will be redirecting to  later. So if your app is in some directory below the .htaccess file, this would be rewritebase /someDirectory.
rewritecond %{HTTP:Accept-encoding} gzip
This checks if the browser that is requesting the file can handle gzip'ed files. If not, the rules will not be applied.
rewritecond %{REQUEST_FILENAME}.gz -f
This checks if there is a file with a .gz extension that corresponds to the file being requested.
So, if for example, you excluded .png's from being gzip'ed they would be passed over by the rewrite engine.
rewriterule (.*) $1.gz [L,QSA]
This is the actual rewrite rule. It says rewrite a request for a file named *.* that matches the rules above to *.*.gzip.
<files *.gz="">
 AddEncoding x-gzip .gz
 Header set Content-Encoding: gzip
This section just adds the correct headers to the gzip'ed files. You can also have multiple of these blocks for different file types (e.g. *.js.gz) that set the file type header (e.g. add a line: ForceType text/javascript ) but so far it's been working fine for me without that. I guess browsers nowadays are smart enough to figure that out on their own.

No comments:

Post a Comment