How to Minify JavaScript & CSS for Faster Page Loading

Discussion in 'Web Development' started by pradeep, Jun 28, 2012.

  1. pradeep

    pradeep Team Leader

    Apr 4, 2005
    Likes Received:
    Trophy Points:
    Kolkata, India
    Home Page:
    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):
    /* 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):
    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):
    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

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

    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:

    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 (, get jsmin-php from


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

    // minify
    $minified_js JSMin::minify([URL=""]file_get_contents[/URL]($js_file));

    // save to file


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

Share This Page

  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice