Monday, 18 December 2006
The solution turned out the be simple, combine all the different files into a single large file and compress that file using gzip. Unfortunately, if you do this manually you are going to run into maintenance problems. That single compressed file is no longer editable. So after editing one of the original source files you will have to recombine it with the other files and re-compress it.
But there is more. Compressing the files will decrease the size of the data that needs to be transferred, it does not solve the problem that the browser can only download a limited number of files at the same time. If you have many different files that need to be loaded the browser will not optimally use the bandwidth it has access to. It will request some files from the server and wait until those files are retrieved before the rest of the files are requested. The solution to this problem is to combine all those different files into one large file. And this is exactly what the script tries to do. You can concatenate different files by simply adding the names of the other files to the URL of the first file.
Take for example the following URLs:
You can combine all these files to a single file by simply changing the URL to:
scriptaculous.js file like you normally would. The reason for this is that
scriptaculous.js file I will get the benefit of compression, but the different files won’t be combined into a single file.
Unfortunately I noticed a nasty side effect of the combination of these two methods. If you combine many files the resulting files can be come quite large. Compressing those files takes some time and on a busy server that time will become large enough to negate a significant portion of the improvements you made earlier. But this problem can also be solved by simply adding a cache that stores an already combined and compressed version of the files. The cached version is automatically created the first time that particular combination of files is used and used every time – as long as the files are not changed. The result is that once the cache is created there is almost no overhead and the compressed file is delivered almost instantly.
Configurating this script is easy. First you need to download and configure the
combine.php script. By default this script look in the
css directory in the root of your website, but if you are currently using different directories you can change these values at the top of the
combine.php script. Upload the
combine.php script to the root of your website. Secondly you need to create a
cache directory that is writable by the web server. Again, by default this script will look for the
cache directory in the root of the website, but you can change this in the
combine.php script. Finally you need to create or modify your
.htaccess file. If you do not have a
.htaccess file you can create it in the root of your website and add the following lines. If you already have an preexisting
.htaccess file you can simply add the following lines to the file:
Note: if your preexisting
.htaccess file already uses URL rewriting you do not need to add the first two lines. You can simply add the last two lines to the bottom of the