Archive for December, 2006
Purefect Optimization (Bahasan Formal :D)
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 15Setting 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);
3. Caching
Caching adalah tehnologi yang paling sering disalah artiin sama web developer. Jadi banyak yang menganggap caching menyebabkan aplikasi web mereka jadi gak benar dan kehilangan kontrol terhadap akses ke web mereka. Padahal kalo aturan cache yang dilakukan browser, cache bisa menjadi tools yang sangat berguna bagi web developer.
Aturan cache yang dilakukan oleh browser :
a. file index (index.php / index.html) kemungkinan besar tidak dicache
b. bila di HTTP response ada “Cache-Control: no-cache” maka tidak dicache
c. bila di HTTP response tidak ada “ETag” atau “Last-Modified” tidak akan di cache
d. kalo request memakai method POST sebagian besar browser tidak akan mencache responsenya
e. kala di request dengan methos GET tapi ada query string contoh a.php?v=123 sebagian besar browser tidak mencache
f. SSL pasti tidak dicache
Jadi dengan menggunakan aturan diatas, kita membuat file yang jarang berubah untuk semaksimal mungkin bisa dicache di client.
a. image & css kemungkinan besar di cache
tapi kita bisa memastikan dengan setting apache :
ExpiresActive On
ExpiresByType image/gif “modification plus 1 year”
ExpiresByType image/png “modification plus 1 year”
ExpiresByType text/css “modification plus 1 year”
nb. menurut spesifikasi HTTP cache maksimal 1 tahun
b. js di cache, tapi untuk mengantisipasi perubahan kita memakai format nama file :
abc.ver1.js
jadi di htmlnya :
normalnya js akan dicache, nanti kalau ada perubahan di js, ubah nama filenya jadi :
abc.ver2.js
di htmlnya :
Kalau ada yang takut melakukannya dengan manual, maka bisa diotomatisasi dengan bantuan php :
nama file tetap :
abc.js
di html :
trus kita memakai rewrite engine apache, setting di httpd.conf :
RewriteEngine on
RewriteRule ^(.*\.)ver[0-9.]+\.(js)$ $1$2 [L]mungkin ada yang sudah mengimplementasikan pake abc.js?ver=123, ternyata model tersebut tidak dicache oleh browser, jadi tehnik itu adalah tehnik yang sia-sia.
c. file php yang jarang berubah, untuk mencachenya bisa memakai :
Header("Cache-Control: must-revalidate");
$offset = 60 * 60 * 24 * 3;
$ExpStr = “Expires: ” . gmdate(”D, d M Y H:i:s”, time() + $offset) . ” GMT”;
Header($ExpStr);
?>
d. Usahain gunain method GET untuk file yang jarang berubah
e. Gunain SSL seminimal mungkin
f. Kalo update file di server, update yang berubah saja
Sekian dulu dari saya mudah-mudahan bisa bermanfaat.
5 commentsMOU Indonesia Dan Microsoft (lagi… :D)
Hmm… di detik lagi ribut lagi soal MOU Microsoft dan pemerintah Indonesia lagi. Ada yang bilang janggal, ada yang bilang ilegal ada yang bilang melanggar aturan, lucu, gak fair dll.
Wah saya gak mau ikutan ngomentarin deh, soalnya saya udah duga dari dulu, bahkan saya merasa pemerintah gak bakalan bergeming walau dikritik bagaimanapun. Ya mau gimana lagi dong, 99% kantor pemerintahan sekarang pake produk microsoft (bajakan 96% lisensi 3% :D) kalo mau pake produk laen (gak harus open source) pemerintah gak bakalan mau ambil resiko untuk melatih orang-orang untuk make produk laen tersebut.
Ya harus sadar dong, gimana sih kualitas kebanyakan pegawai pemerintahan. Udah bisa ngetik pake word aja sebenernya udah hebat banget. Bukan maksudnya ngerendahin loh, tapi itu kenyataan, soalnya saya udah pernah ngajarin pegawai, ngajarin word aja (yang harus diakui paling familier tampilannya) susah banget, apalagi pake produk lain.
Trus kalo ada yang bilang mau ngajarin, apa mampu ngajarin orang-orang kantor pemerintahan yang berserakan diseluruh indonesia ? Apa ada organisasi yang mampu dan bener-bener mau melaksanakan itu dengan waktu yang cepat dan biaya yang gak terlalu besar (jangan sampe sebesar biaya pembelian ke microsoft) ?
Itu baru soal pelatihan, belum yang paling utama PRODUKNYA !!! ada gak yang bisa menyediakan produk yang setara dengan microsoft ? yang bisa mengakomodari jutaan file yang terlanjur disimpan dalam formatnya microsoft. Mau bilang open office ? Yakin 100% bisa buka tanpa masalah ? trus ada gak yang bisa jamin permakaiannya, kalo ada error yang tanggung jawab siapa ? Ada organisasi yang bisa jamin ? kalo perorangan sih gak bisa berbuat apa-apa, kan orangnya juga masih kerja di perusahaan lain, trus kalo dia keluar kota gimana ? kalo sakit gimana ? itu yang perlu, ada organisasi yang berani memikul tanggung jawab super berat ini.
Tapi saya bukan orang yang pesimis, saya cuma mo bilang yang diperluin sekarang tuh konkritnya. Ya itu organisasi yang berani jamin semua yang dibutuhin pemerintah bisa dipenuhi (dengan segera - orang indonesia kan gak sabaran).
Nah boleh gak klorofil ngajuin untuk buatin yang pemerintah perlu (OS, office, database dll). Mungkin kasih 1 tahun untuk ngelengkapin semua dan biaya 1/4 aja dari yang ditawarin microsoft Boleh gak ? kalo boleh orang-orang klorofil berani gak ? (kalo saya berani yang laen gimana berani ? :D :D)