The Denny Depok

Sekali-kali mo bahas yang sedikit ilmiah

Purefect Desktop baru aja di re-release. Buat kamu yang mo nyoba purefect yang baru, bisa mengakses ke www.purefect.org. Dalam re-release ini yang baru adalah sudah dimasukknya beberapa teknik optimisasi untuk membuat purefect terlihat lebih cepat diloading. Buat yang sudah pernah nyoba purefect yang lama trus nyoba purefect yang di re-release, pasti ngerasa ada perbedaan besar dalam kecepatan loading. Ya mungkin masih enggak begitu bagus, tapi lumayan lah :D :D.

Disini saya mo ngebahas optimisasi yang sudah dilakukan secara lebih formal, supaya tehnik ini bisa dipake sama kamu-kamu yang perlu di proyeknya masing-masing (dan sekalian biar saya juga gak lupa :D).

Tehnik yang (telah dan akan) dipakai oleh purefect desktop adalah :

1. Minimalisasi HTTP Request

Dari pengalaman tim klorofil, hal yang paling berpengaruh dalam kecepatan loading adalah banyaknya request yang dilakukan browser ke server untuk menampilkan 1 page.

Maksudnya begini, misal kamu punya page yang perlu 5 image, 1 css dan 3 js file, maka banyaknya request browser ke server adalah 10 (1 untuk page, 5 untuk image, 1 untuk css dan 3 untuk js). Proses request adalah sebagai berikut :

• Browser merequest page kemudian memparsing file htmlnya
• Untuk tiap file yang dibutuhin (image, css, js) dilakukan HTTP request terpisah

Perlu diingat sesuai dengan spesifikasi HTTP, browser mendownload file pendukung maksimal 2 thread per page. Maksudnya dari 5 image tadi diatas, download dilakukan 2 image persatu waktu. Kemudian khusus untuk javascript, beberapa browser mendownload satu-satu untuk menjaga keterurutan kode.

Bisa dilihat kan bagaimana makin banyak HTTP request, makin lambat sebuah page diload. Yang paling berpengaruh tentu overhead request-response (yang dilakukan 2-2 :(). Oleh karena itu, meminimalkan jumlah HTTP request tentu aja sebuah ide yang sangat penting. Yang dilakukan di purefect :

a. Dekomposisi Javascript Kemudian Jadikan Monolitik

Maksudnya gini, usahain klasifikasikan kelas-kelas & fungsi-fungsi javascript berdasarkan kemungkinan perubahan. Jadi nanti kita bisa misahin antara yang gak akan berubah, yang jarang berubah dan sering berubah. Kemudian untuk yang gak pernah berubah, lebih baik dijadikan satu file besar aja, jangan terpisah. Yang jarang berubah diusahain sesedikit mungkin filenya (lakukan penggabungan sebanyak mungkin), yang sering berubah bebas. Tehnik ini nanti juga berpengaruh ke tehnik caching yang saya bahas dibawah.

b. Image Sliding & Image Sprite

Intinya sih gabungin beberapa gambar menjadi satu file. Image sliding cara kerjanya seperti ini, misal saya punya button dengan 3 state, mau pakai 3 gambar supaya kelihatan ada efek animasinya, nah kan ukuran gambarnya sama semua jadi saya bisa menggabungkan ke 1 file trus pake css posisi untuk membuat efek animasi.

Contoh file gambar :

trus untuk state 1 pakai css :

style="{background: url(button.gif) no-repeat top left}"

untuk state 2 (dipake di event onMouseMove) :

style="{background: url(button.gif) no-repeat center left}"

untuk state 3 (dipake di event onMouseDown) :

style="{background: url(button.gif) no-repeat bottom left}"

Untuk image sprite, kita gabungin gambar-gambar menjadi satu file trus untuk menampilkannya pake css posisi dengan point.

contoh file 100×50, 1gambar 50×50 :

Untuk nampilin gambar yang pertama :

style="{width: 50; height: 50; background: url(sprite.gif) no-repeat 0 0}"

Untuk nampilin gambar yang kedua :

style="{width: 50; height: 50; background: url(sprite.gif) no-repeat -50 0}"

dan seterusnya.

c. Connection KeepAlive

Idenya begini, kalau request dilakukan berulang-ulang maka ada overhead pembukaan koneksi socket antara browser dan server. Pembukaan koneksi adalah aktifitas yang memakan waktu dan resource server. Oleh karena itu kalau ada cara supaya permintaan yang berulang-ulang tersebut bisa hanya memakai 1 pembukaan koneksi pasti akan mempercepat proses download.

Untuk server apache tehnik ini bisa dilakukan dengan merubah setting berikut :

MaxKeepAliveRequests 0
Setting ini membuat semua request dijaga tetap tersambung, jadi bisa dipakai untuk request selanjutnya. Tapi jangan lupa untuk setting :

KeepAliveTimeout 15

Setting ini untuk menjaga koneksi yang sudah tidak request bisa langsung ditutup. Memang tehnik ini memerlukan akses ke httpd.conf, mungkin gak semua orang bisa melaksanakan. Untuk server lain cari sendiri ya

2. Compressing

Inti dari tehnik compressing adalah membuat file yang ditransfer sekecil mungkin supaya waktu transfernya lebih cepat. Yang mungkin dilakukan :

a. Usahain gambar dalam format GIF

gif sepertinya format yang mengkompress gambar paling baik, walau mungkin masalah warna terjadi pengurangan. Tapi kan enggak semua gambar kita perlu kualitas foto kan ?

b. Kalo pake jpeg, pake jpeg2000

jpeg 2000 melakukan kompresi lebih baik dari jpeg yang sebelumnya.

c. Turunin kualitas gambar (kalo bisa)

file jpeg dan png bisa ditentuin kualitas gambarnya, kalo bisa nurunin kualitas dalam batas yang masih ditoleransi, bisa menghemat byte file.

d. Hilangin whitepace di html, css dan javascript

whitespace (spasi, tab dan enter) enggak berpengaruh ke file-file diatas, kalo bisa dihilangin tentu aja menghemat byte yang perlu ditransfer. Tapi inget ada beberapa kasus di javascript yang gak bisa dihilangkan.

contoh

html asli :

body Text
html menjadi :

body text

css asli :

.control {
position: absolute;
left: 0;
top: 0;
font-family: Arial;
font-size: 8pt;
}
dijadikan :

.control {position: absolute;left:0;top:0;font-family:Arial;font-size:8pt;}

javascript asli :

for (var i = 0; i < 25; i++)
{
obj1.count(i);
}

dijadikan :

for (var i=0;i<25;i++){obj1.count(i);}
Tapi kalo dihilangin whitespecenya akan menyulitkan pembacaan kode selanjutnya, makanya pisahin antara kode pengembangan dan kode operasional.

kemudian di windows, enter adalah “\r\n” kalo bisa pakai “\n” aja, dibrowser diartikan sama aja

Selanjutnya, sehabis penghilangan whitespace biasanya menghasilkan kode seperti ini :

"satu "+" dua"

model ini bisa dioptimisasi jadi

"satu dua"

pertama menghemat byte, kedua menghemat proses jadi javascriptnya jadi lebih cepat.

e. Gunain variable sependek mungkin di javascript

misalnya kita pakai nama variable “TemporaryValue”, kalo diubah jadi “tmpVal” kan menghemat beberapa byte tanpa menghilangkan arti semantiknya.

Trus kalau ada kasus seperti ini :

this.button.setLeft(25);
this.button.setWidth(25);
this.button.setHeight(25);
this.button.setWidth(25);

bisa dirubah menjadi :

var o = this.button;
o.setLeft(25);
o.setWidth(25);
o.setHeight(25);
o.setWidth(25);