Increase performance of website by compressing JavaScript.

Performance tuning of any website involves lots of things to be taken care of. For example, compressing the output / response of the website increase the performance by significant folds. GZIp and Deflate compression techniques are commonly used in servers like Apache, Tomcat, jBoss etc.

Also the size of a webpage plays significant role in load time and their by affecting websites performance. Thus if we reduce the size of the webpage by any mechanism, we can save a lot of time in loading.

JavaScript plays a very important role in todays “Web 2.0” applications. Lots of Ajax/DOM parsing etc can be seen commonly in all the web applications. JavaScript files for any websites may reach thousands of lines of codes.

Hence we can improve the performance of any page by compressing the code in JavaScript. Lots of mechanisms are available on internet to “minify” the JavaScript code. One of such tool is: JSMin.

JSMin

JSMin is a filter that removes comments and unnecessary whitespaces from JavaScript files. It typically reduces filesize by half, resulting in faster downloads. It also encourages a more expressive programming style because it eliminates the download cost of clean, literate self-documentation.

Try JSMin here.

I tried following JavaScript code (from jQuery.js file) with JSMin.

function success(){
	// If a local callback was specified, fire it and pass it the data
	if ( s.success )
		s.success( data, status );

	// Fire the global callback
	if ( s.global )
		jQuery.event.trigger( "ajaxSuccess", [xhr, s] );
}

function complete(){
	// Process result
	if ( s.complete )
		s.complete(xhr, status);

	// The request was completed
	if ( s.global )
		jQuery.event.trigger( "ajaxComplete", [xhr, s] );

	// Handle the global AJAX counter
	if ( s.global && ! --jQuery.active )
		jQuery.event.trigger( "ajaxStop" );
}

and following is what JSMin gave me after removing unnecessary spaces and comments.

function success(){if(s.success)s.success(data,status);if(s.global)jQuery.event.trigger("ajaxSuccess",[xhr,s]);}function complete(){if(s.complete)s.complete(xhr,status);if(s.global)jQuery.event.trigger("ajaxComplete",[xhr,s]);if(s.global&&!--jQuery.active)jQuery.event.trigger("ajaxStop");}

Almost 55% of compression achieved. :)

Other tools available in similar lines are:

YUI Compressor
Dojo Toolkit’s ShrinkSafe
Dean Edward’s Packer

Get our Articles via Email. Enter your email address.

You may also like...

4 Comments

  1. Raghu says:

    Good site on cool technologies.!!

  2. Lars says:

    Good points on minifying.
    We recently did this on our intranet web applications. We did it using jsmin.

    While the compression was good (about 50%), it made little impact on the load time of the page for users. Why? Because the amount of in-house javascript the we were now minifying was dwarfed by the amount of 3rd-party javascript (dojo, ArcGIS Server Javascript API, TinyMCE, FCKEditor, etc.), which were already pre-minified.

    That’s not to say don’t use minification on your web sites. We do. But you may want to evaluate beforehand, what percentage of the code used by my web can I actually minify? Ten percent? If my user sees a 5% speed improvement, will that make the effort worthwhile for me?

  3. fsevilla says:

    @Lars,
    I guess even if they see a 1% of improvement, it is worth your time. We are getting into an era where users and customers become the most important thing since we make business from them. That is why I believe that if a thousand users see 1% improvement, it is worth one hour of your time, plust the fact that now you can minify all php code, html, css and javascript, which at the end causes a considerable effect.

    That’s my thought tho….

    Regards

  4. putude says:

    thank you for sharing. I’ve update my website using your tricks.

Leave a Reply

Your email address will not be published. Required fields are marked *