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" );
}
Code language: JavaScript (javascript)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");}
Code language: JavaScript (javascript)
Good site on cool technologies.!!
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?
@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
thank you for sharing. I’ve update my website using your tricks.