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