Wednesday, February 13, 2013

Minify Your CSS & JS Code

minify

Minify Your CSS & JS Code

Kalian tahu, sebagai web developer , kecepatan load website adalah aspek penting dalam menentukan keberhasilan kita dalam membuat website yang light. Banyak variable yang menentukan kecepatan yang diperlukan web browser dalam menampilkan website kita secara utuh, antara lain : ukuran gambar, ukuran file html, ukuran file css & javascript, kompleksitas algoritma di javascript dan yang paling mendasar -tetapi bukan urusan kita- adalah kecepatan paket internet dari pengguna, hehe.
Pada artikel ini akan kita bahas salah satu cara tips untuk meringankan website , yaitu bagaimana cara memperkecil ukuran script css/js dan mempercepat proses downloadnya. Salah satu caranya adalah menggunakan sebuah PHP5 App bernama Minify (sumber : http://code.google.com/p/minify).

Berikut beberapa cara kerja Minify :

  1. Menggabungkan beberapa file script css atau js.
  2. Compress file css/js dengan menghilangkan whitespace yang tidak berguna dan menghilangkan comments.
  3. Menyimpan hasil compressing dan kombinasi file css/js dalam sebuah file cache (step1 & 2 dikerjakan hanya 1x selama tidak ada salah satu file yang dimodifikasi)

Dari cara kerjanya, kita bisa mendapatkan beberapa 2 manfaat utama Minify, yaitu :

  1. Memperkecil ukuran file js/css yang dibutuhkan.
  2. Me-minimalisir jumlah request file js/css yang juga memperkecil jumlah byte yang dikirim u/ request file-file tersebut.

Bagaimana cara menggunakannya?

  1. Download Minify di http://code.google.com/p/minify
  2. Extract file zip.
  3. Copykan folder “/min/” kedalam folder web Anda. (lihat gambar dibawah ini)
  4. Buka file config.php pada folder “min”. Atur configurasi $min_documentRoot sesuai kebutuhan. (contoh pada gambar bawah: )
  5. Gunakan syntax seperti dibawah ini untuk memanggil file css / javascript Anda pada file html :
Nah, dari percobaan di lab pribadi Saya (#ceile… :p ) dapat disimpulkan bahwa Minify dapat mengecilkan byte transfer dan waktu page load halaman website kita.

Hasil Perbandingan :

# Tanpa Minify
Total File Size : 387,24 KB (10 request)
# Menggunakan Minify
Total File Size : 100,89KB (3 request)
*Catatan :
  1. Yang kita bandingkan adalah ukuran file total dan time load file javascript dan css-nya saja.
  2. Total Time Load menggunakan minify lebih besar dikarenakan waktu load file html yang terlalu besar dan berubah2 (bukan pengaruh minify dan kayaknya faktor non teknis :p )
Bagaimana? Tertarik menggunakan Minify? Saya sudah menggunakannya :)

No comments:

Post a Comment