1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

How to Minify JavaScript & CSS for Faster Page Loading

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

  1. pradeep

    pradeep Team Leader

    Joined:
    Apr 4, 2005
    Messages:
    1,646
    Likes Received:
    86
    Trophy Points:
    0
    Occupation:
    Programmer
    Location:
    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):
    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]
     

Share This Page