An factor worth consideration in web development is page size. With many users using broadband connections, this is becoming less of a problem. However, the difference in achievable speeds is still significant in some countries, so keeping page sizes to a minimum is still advisable.

The purpose of this article is to make your pages load as fast as possible by compressing jQuery even further than by using standard packing methods.

The jQuery website offers different versions of the script, including a standard uncompressed version, a minified version and a packed version.

The difference in size between the versions can be quite substantial (version 1.2.6, correct 02-05-08):

• Minified and GZipped 16kb
• Uncompressed 97kb
• Packed 30kb

For development purposes, the uncompressed version offers the most versatility, especially when testing developing new plug-ins, however, by using the minified or packed version of jQuery, you will be able to shave off a substantial amount of extra kilobytes.

By using server-side technology you can save even more size, by compressing the script on-the-fly and even cacheing the script so that when the user navigates from page-to-page on your site, the script is ready for use in their temporary cache folder rather than being requested from the server each time.

Cache jQuery

The following assumes you are using an Apache web-server, however with some adaption this technique is possible with other server technologies.

By including instructions within our root .htaccess file we can cache any file type that we specify. In this case we will cache JavaScript files (.js) This will automatically cache our external jQuery file, as well as any other external JavaScript files for use across the whole site. This should significantly speed up page loads, by calling the file from the temporary cache on the users PC.

One recommendation when using caching for extended periods (I.e. longer than a few hours), it is recommended to use numbered file names. In the case of jQuery, it is automatically given a unique file name when downloaded. It is recommended to maintain this structure for when the script is upgraded on the site. Please read our previous article for more detailed instructions on .htaccess/page caching.

<ifmodule mod_expires.c>
<filesmatch “\.(js)$”>
ExpiresActive on
ExpiresDefault “access plus 1 month”
</filesmatch>
</ifmodule>

By changing the file extensions the above code can be used for a variety of file types. Changing the default expiry time can also be adjusted. Read more on caching pages.

Compress jQuery

The following assumes you are using an Apache web-server, this technique is possible with other server technologies but for the purpose of this article, Apache is being used.

Here comes the fun part of actually compressing the jQuery file size. I personally use the packed version of the script rather than the minified version, to avoid any compatibility issues that can arise with minifaction of files. However, if you choose to use the minified version of the file, you will likely get an even smaller file size.

Please read our article on using Apache mod_deflate for a detailed explanation of this technique.

The following line of code is simply added to your root .htaccess file to enable compression of JavaScript.

AddOutputFilterByType DEFLATE text/html text/plain text/javascript


The above code will compress the external JavaScript as well as the HTML code used on the page.

An example of the saving in size can be seen below. As mentioned before I used the packed version of jQuery, and managed to compress the file down from 30kb’s to 15kb’s using this method.

If you find this method useful, let us know how much of a saving you’ve been able to make on your websites.