How to Minify JavaScript & CSS for Faster Page Loading

Minifying JavaScript and CSS reduces their file sizes considerably, which is accomplished by removing comments, unwanted newlines, space & tab characters, in more advanced cases long variable names are renamed into smaller ones and all the occurrences of the variable name is updated in the script - this is known as obfuscation - but, obfuscation leaves the script/CSS largely unreadable by a human. In the following example a JavaScript code is minified to remove unwanted, but remains quite readable.

The source (330 characters):

Code:

/* JavaScript test code
@Author: Pradeep
@Date: 6/28/2012
*/

// Let's define our function
function MyReallyCoolAndFunkyFunction( myName, myCity, myCode )
{
        alert('Name :' + myName);
        if ( window.opened )
        {
                alert('Name :' + myCode);
        }
}

// Call the function
MyReallyCoolAndFunkyFunction( 'Pradeep', 'Kolkata', '77768' );

The minified code (183 characters):

Code:

function MyReallyCoolAndFunkyFunction(myName,myCity,myCode){alert("Name:"+myName);if(window.opened){alert("Name :"+myCode)}}MyReallyCoolAndFunkyFunction("Pradeep","Kolkata","77768");

As you can see there is a 44% reduction in size from the source and only the comments, spaces & newlines have been removed but the function & variable names have been left as-it-is. Next, let's see an example of minification & obfuscation.

The minified & ofbuscated code (104 characters):

Code:

function d(b,c,a){alert("Name :"+b);if(window.opened){alert("Name :"+a)}}d("Pradeep","Kolkata","77768");

Now that's around 68% reduction in size.

Minifying Using YUI Compressor

YUI Compressor is a tool provided for free by Yahoo!, we'll be using this to minify our JavaScript and CSS files. For YUI Compressor to work you'll need Java JRE installed on your system, you can know more about YUI Compressor at http://developer.yahoo.com/yui/compressor/.

Here's how you can minify you CSS & JS files:

Code:

java -jar /path/to/yuicompressor-2.4.7/build/yuicompressor-2.4.7.jar util_functions.js -o util_functions.min.js
java -jar /path/to/yuicompressor-2.4.7/build/yuicompressor-2.4.7.jar basic_style.css -o basic_style.min.css

Alternately you may combine all your JS/CSS files into one file, which helps in decreasing page loading time 2nd visit onwards because the 2nd time onwards users' browser will not download the CSS/JS, it'll just load it from cache.

If you want to minify multiple files at once you can use this command:

Code:

java -jar /path/to/yuicompressor-2.4.7/build/yuicompressor-2.4.7.jar -o '.css$:-min.css' *.css
java -jar /path/to/yuicompressor-2.4.7/build/yuicompressor-2.4.7.jar -o '.js$:-min.js' *.js

Minifying Using JSMin PHP port

jsmin-php is a PHP port of Douglas Crockford's JSMin (http://www.crockford.com/javascript/jsmin.html), get jsmin-php from http://code.google.com/p/jsmin-php/.

PHP:

require_once('jsmin.php');

$js_file = "/path/to/js/my_functions.js";

// minify
$minified_js = JSMin::minify([URL="http://www.php.net/file_get_contents"]file_get_contents[/URL]($js_file));

// save to file
file_put_contents("/path/to/js/my_functions.min.js", $minified_js);


Related

[thread=6814]Speed Up Your Pages[/thread]