In this article, we extrapolate our favorite CSS-compression technique for JavaScript. Below, we outline the steps required to auto-compress your JavaScript documents via gzip and PHP. Two different compression methods are presented. The first method does not require htaccess, but rather involves the manual editing of JavaScript files. The second method employs htaccess to do all the work for you, thus requiring much less effort to implement. In either case, the result is the same: automatically compressed content delivered only to supportive browsers, resulting in reduced bandwidth, faster loading times, and smiling visitors :)

Method One

Overview: This method involves adding a small PHP script to your JavaScript document and replacing its .js extension with a .php extension.

Place the following PHP script into the top of any JavaScript document(s) that you wish to compress. Then change the .js extension to .php, to arrive at something similar to compressed-js.php. Remember to use the new name when referencing the file (i.e., <script type="text/javascript" src="compressed-js.php"></script>):

Functional Summary: The previous PHP function will first check to see if the browser requesting the file will accept "gzip-deflate" encoding. If no such support is detected, the requested file is sent without compression. Next, the function sends a header for the content type and character set (in this case, "text/javascript" and "UTF-8"). Then, a "must-revalidate" "cache-control" header requires revalidation against currently specified variables. Finally, an "expires" header specifies the time duration for which the cached content should persist (one hour in this case).

Method Two

Overview: This method involves placing the PHP script in a separate .php file and adding a set of rules to an .htaccess file.

A more discrete, unobtrusive method for compressing JavaScript involves two steps. First, save the script provided in the first method (above) as a seperate gzip-js.php file and place it in a JavaScript-exclusive directory. Then, add the following ruleset to an .htaccess file located in the same JavaScript-exclusive directory (i.e., the JavaScript directory should contain only .js files):

Here is the same .htaccess ruleset commented with functional explanations:

# JavaScript compression htaccess ruleset
# process all JavaScript files in current directory as PHP
AddHandler application/x-httpd-php .js
# prepend the PHP script to all PHP files in the current directory
php_value auto_prepend_file gzip-js.php
# compress all parsed PHP pages from current directory
# this rule is redundantly present as the first line of the PHP script
php_flag zlib.output_compression On

Functional Summary: The .htaccess rules above first instruct Apache to parse all JavaScript files in the current directory as PHP. After this, Apache is instructed to insert the contents of the “gzip-js.php” file into the beginning of each PHP file (i.e., files with .js extensions renamed to .php) parsed from the current directory. And finally, Apache is instructed to compress automatically every parsed document in the current directory.

Check it out

Comments

Hi Taneem, have you tried using a browser tool such as Firebug? With Firebug installed, there is a Firefox extension called YSlow that enables you to analyze many different components of your web pages, including file compression.
Regards,
Jeff

Yes, that error message indicates that compression is already enabled elsewhere on your server, either through Apache or via your php.ini file. Either way, thanks for the information — glad to hear that everything is working :)

Jeff, I don’t care what my wife will say about this (I won’t show her just in case), but I absolutely love you!

For the past 48 hours, I’ve been googling for a way to compress the 46 KB mootools on my site. mod_gzip isn’t available as I have a shared account, and everything I tried didn’t work. Your first method here worked. I would have prefered the second, cleaner method, but the directory in question has a css file, not only .js. And it’s a plugin for WP, so I didn’t want to edit the plugin files, because every time I’ll update it I’ll have to repeat everything. I just edited it to change the extension to .php.

I don’t know why I didn’t find this article earlier through Google! In the future I’ll search with site:perishablepress.com in mind. :-D

Do you have some tutorial about how to compress all css and js files and deliver them in only 2 files? I have 6 css and 5 js on every page. They’re tiny files, except the mootools one, but it’s 11 requests!

Oh and I tried the htaccess method in js exclusive directory. But a plugin is calling for a “jquery.js?ver=1.2.6”, not just “jquery.js”. Firebug is showing me that jquery.js?ver=1.2.6 is not found… If I only knew where it’s calling from!
Any idea how to resolve this?

Projects

About the site

Perishable Press is the work of Jeff Starr, professional developer, designer, author, and publisher with over 10 years of experience.
Check out some of Jeff's books and projects, follow on Twitter, or learn more »

Fun fact: Perishable Press has been online since 2005, and features over 800 articles and more than 11,000 comments. More stats »