Tingkatkan performance website dengan mengompresi javascript

Tuning performa website apa aja melibatkan banyak hal yang bisa dilakukan, antara lain mengkompress output atau response bisa meningkatkan performa secara signifikan. Kompresi GZIP dan Deflate sering kali digunakan di beberapa server seperti Apache, Tomcat, JBoss.

Meski begitu, ukuran halaman web punya peran penting dalam load time dan berpengaruh dalam performa website. Jadi kalo kita mengurangi ukuran halaman web dengan cara apa aja, kita bisa menghemat banyak waktu loading.

Javascript punya peran penting dalam tren aplikasi “Web 2.0″ sekarang ini. Banyak Ajax/DOM dijumpai di hampir semua aplikasi web. Bahkan Javascript di beberapa web bisa mencapai ribuan baris. Kita bisa tingkatin performa web dengan kompres kode2 di Javascript. Banyak metode untuk meminimaliskan kode javascript. Salah satunya adalah JSMin.

JSMin adalah filter yang menghilangkan komentar dan spasi yang tidak perlu di Javascript. Menghasilkan ukuran file separuhnya, jadi proses download jadi lebih cepat. Juga membuat kode lebih susah dibaca, karena dokumentasi disimpan sendiri oleh kita.

Coba JSMin disini.

Aku coba kode javascript dibawah dengan 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" );

}

dan dibawah ini adalah hasil kompresi kode javascript dengan JSMin, dengan ngilangin komentar dan spasi yang tidak diperlukan.

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");}