Compressing javascript and CSS

The YUI Compressor allows you to easily reduce the size of javascript and CSS files by removing comments, extra white spaces, reducing the length of variables where applicable, etc from them. The result is a smaller sized file which works exactly like the original.

Compressing using the YUI Compressor is quite straight forward:

java -jar "yuicompressor-2.4.2.jar" --type js -o "file.compress.js" "file.js"
java -jar "yuicompressor-2.4.2.jar" --type css -o "file.compress.css" "file.css"

Here, file.compress.js and file.compress.css are the compressed output files and file.js and file.css are the input files. These compressed files will work exactly like the original ones. So, you can simple replace the originals with these new compressed files and immediately start seeing faster page load times.

Combining multiple files into one file

We have reduced the file sizes in the previous step. However, we might still have multiple javascript and CSS files required to completely load the page. This means the page has to make one HTTP request for each file it requires. Why not combine all the javascript files into one single .js file and all the CSS files into one single .css file ?

You can use any text editor and simple copy paste the contents into one javascript and CSS file. You will then need to modify your page to include these files instead of multiple javascript and CSS files.

Please note that this technique of combining files can end up requiring the user to download a large .js and .css file for each page if each page requires a different set of files. In that case, you might want to use this technique for only the core files that are required on each page or most pages.

Serve gziped files via PHP

Now that we have reduced the size and number of files considerably, we can further reduce the size by serving gzip content. If you use mod_gzip on apache, you might already be serving gziped files. However, you might still wish to use this section as compressing content on the fly with gzip might be slower than this technique.

We will first need to gzip the contents of the combined file from the previous step. Lets assume the file was file.js and the gzip compressed file is file.js.gz.

This file needs to be served through a PHP file. You can use the PHP code below to serve this file.

$longExpiryOffset = 315360000;
header ( "Cache-Control: public, max-age=" . $longExpiryOffset );
header ( "Expires: " . gmdate ( "D, d M Y H:i:s", time () + $longExpiryOffset ) . " GMT" );

header ( "Content-type: text/javascript; charset=utf-8" );

//Check if browser can handle gzip content
if (stripos ( $HTTP_SERVER_VARS ["HTTP_ACCEPT_ENCODING"], "gzip" ) === false) {
 readfile("file.js");
} else {
 header("Content-Encoding: gzip");
 readfile("file.js.gz");
}

Similarly, to serve CSS, replace text/javascript with text/css in line 5 and change the file names.

Of course, you will have to modify the HTML in your page to load this PHP script instead of the javascript and css files.

These steps should improve the page load time of your page considerably.

Related posts:

1. Resume HTTP downloads in PHP using cURL or fsockopen
2. cURL wrapper class with executable and PHP extension support

A few demos of the library in action:

Scroll Demo

Full Demo

Cone Demo

You will find more information and detailed documentation at the Amazing Tree page

Related posts:

1. Frame Glider javascript library

Some demos are available too:

Simple Demo

Complex Demo

Frame as a droppable

More details including detailed documentation are available at the Frame Glider page

Related posts:

1. Amazing Tree javascript library
2. Javascript and CSS compression using YUI compressor, PHP and gzip