Compressing jQuery / Javascript with PHP

compressing jquery with PHP

This is a quick little tip that I've been using on my most recent projects to significantly reduce the size of Javascript code. This comes in handy when using frameworks and although jQuery (my framework of choice) is quite small to begin some libraries like Prototype combined with script.aculo.us come in at quite a large file size.

Using this small modification I reduced the size of jQuery along with my own Javascript code from 55kb to around 16kb with one less trip to the server. All of the compression is done on the server side using PHP so if a visitor's browser does not support G-Zip then they will just receive the original uncompressed files.

Sample Setup

For my sample setup I have a "js" folder in the root of my website. This folder will contain all my Javascript files and at the moment only contains the jQuery library.

Create a new file called "jquery.php" and inside put this code:

ob_start('ob_gzhandler');
echo join('',file('jquery-1.2.3.pack.js'));
ob_end_flush();

Instead of linking to your javascript code in your HTML, change it so it links to your new php file like this:

// from this
<script type="text/javascript" src="/js/jquery-1.2.3.pack.js"></script>

// to this
<script type="text/javascript" src="/js/jquery.php"></script>

Test this in your browser to check that everything is working ok, and to see how much has been saved with using this technique load up firebug in firefox and click on the "net" tab to see the filesize before and after.

Compressing Multiple Scripts at Once

If you have multiple Javascript files you would like to include simply add them to your php file like this:

ob_start('ob_gzhandler');
echo join('',file('jquery-1.2.3.pack.js'));
echo join('',file('common.js'));
echo join('',file('more_code.js'));
ob_end_flush();

In the above example all 3 files will be loaded, compressed and sent to the browser as one single file. As well as reducing the file size this will also reduce the number of server round trips and will shave a few more ms from the load time.

How it works

The "ob_start()" php function turns on output buffering which means than any output generated by the script will be saved into an internal buffer instead of being outputted to the browser. This buffering will continue until the "ob_end_flush()" method is used to flush the internal buffer and output everything that has been produced by the script.

As of PHP version 4.0.4 the "ob_gzhandler" was added as a callback mechanism to allow PHP to send gz-encoded data to browsers that support compression. The beauty of using this type of compression is that everything is handled on the server so that this little script will work in all browsers.

Wrapping Up

There you have it, a simple way to compress your Javascript code and libraries so they take up less space and bandwidth. There are a few other more advanced techniques to compress all your Javascript and CSS on the fly using mod_rewrite and these can be found below. I've personally had trouble using them with CakePHP and Code Igniter because they utilise their own mod_rewrite rules so if you get them working let me know.

Source Code for This Article

Posted on 9th April 2008
on 9/4/08

comments powered by Disqus