Mempercepat loading website dengan kompresi Javascript dan CSS

Makin kecil suatu file makin cepat file itu di load oleh browser. Makin sedikit request HTTP yang harus dilakukan makin cepat suatu page ditampilkan. Itulah 2 rules atau aturan dalam perhitungan kecepatan suatu website ditampilkan di browser. Saat ini web 2.0 serta beberapa framework dan CMS menggunakan beberapa file Javascript dan CSS. Sehingga diperlukan lebih dari satu kali HTTP request untuk tiap CSS dan Javascript. Hal ini tentu memperlambat browser dalam menampilkan halaman website. Ada beberapa teknik yang dapat mencegah masalah ini. Beberapa cara tersebut adalah:

Menggunakan google minify, merupakan script PHP yang mampu mengkombinasikan beberapa file CSS dan Javascript menjadi 1 file yang cukup dipanggil sekali. Cara penggunaannya
Sebelum menggunakan Google Minify:

<html>
  <head>
    <title>Example Page</title>
    <link rel="stylesheet" type="text/css" href="css/example.css" />
    <link rel="stylesheet" type="text/css" href="css/monkeys.css" />
    <link rel="stylesheet" type="text/css" href="foo/bar/baz.css" />
    <script type="text/javascript" src="js/prototype.js"></script>
    <script type="text/javascript" src="js/example.js"></script>
  </head>
  <body>
    <p>
      Blah.
    </p>
  </body>
</html>

Setelah menggunakan Google Minify

<html>
  <head>
    <title>Example Page</title>
    <link rel="stylesheet" type="text/css" href="minify.php?files=css/example.css,css/monkeys.css,foo/bar/baz.css" />
    <script type="text/javascript" src="minify.php?files=js/prototype.js,js/example.js"></script>
  </head>
  <body>
    <p>
      Blah.
    </p>
  </body>
</html>

Hasil HTML dari kode diatas adalah 1 CSS dan 1 Javascript. Hasil kombinasi dan kompresi file CSS dan Javascript akan di cache dan langsung dipanggil sehingga lebih cepat dari sebelumnya. Cara kerja kompresinya hampir sama dengan teknik kompresi lain yaitu dengan mengurangi whitespace dan comment yang tidak diperlukan. Hasilnya file lebih kecil, request lebih sedikit dan akhirnya browser menampilkan website lebih cepat. Untuk keterangan lebih lanjut bisa di lihat di URL http://code.google.com/p/minify/

Javascript Packer, teknik ini akan mengkompress javascript menjadi file. Teknik ini mengkompres file javascript menjadi 3 kali lebih kecil atau lebih. Dengan demikian file javascript akan lebih cepat di load dari sebelumnya. Penggunaannya cukup dengan membuka URL http://dean.edwards.name/packer/ kemudian copy paste kode Javascript anda pada field yang tersedia. Setelah di kompress website tersebut akan memberikan output code yang dapat anda copy paste lg pada file javascript milik anda.

Kedua teknik diatas bisa digabungkan yaitu dengan cara Javascript dipacker terlebih dahulu dengan teknik no 2 kemudian beberapa file javascript di combine jadi satu dengan teknik pertama. Kombinasi teknik ini belum saya coba tapi menurut saya harusnya tidak akan bermasalah. Kalo ada masalah bisa sharing , biar bisa kita cari solusi yang lebih baik lagi.

Tag:

Posted in : Web Developer

We have 14 comments in this post, add more by leave yours below.

akbar
November 10, 2007 at 6:43 am

Emang segitu ngefeknya ya? belom pernah nyoba sih…
tyohan
November 10, 2007 at 10:54 am

Buat kmu sih gak ngefek bar.. knapa? Karena di Holland sana akses internet super cepat. Sebenarnya gak terlalu ngaruh juga klo cuma blog gini. Cobain klo website RIA yang kompleks dan yang ngaksesnya edan> Repot juga tuh webserver ngehandle request client. Makin sedikit request ke server makin ringan kan… Hehehe… Kebayang gak jaman SMA dengan internet super lemot tapi tampilan website jaman sekarang… Wah… Gak tahan… Hehehe
brianhujung
November 14, 2007 at 9:24 am

ewww…
jd Penasaran ney.. kalo superlightweight javascript dikompresi lagi kayak apa jadinya yak?..

ah..sedot dulu aja ah tips triknya..

tapi kalo konksi di holland gang 5 seperti saia ini ngefek ga om?? )
wahyu
December 17, 2007 at 3:21 am

mas kalo mo mempercepat loading website joomla pakai cara apa ya?
thanks
tyohan
December 17, 2007 at 5:39 am

Pada dasarnya kecepatan loading website ditentukan 3 faktor yaitu:

Kecepatan Server tempat web di hosting, bila web dihosting pada shared server maka bila website lain di server yang sama menerima banyak request tentu akan menghambat request ke website anda
Kecepatan jaringan, kualitas dan kecepatan jaringan dari server web dihosting ke client menentukan seberapa cepat data dikirim ke client.
Kecepatan loading aplikasi, penggunaan CMS dan template mempengaruhi seberapa cepat halaman yang diminta browser dirender dan dikirimkan ke browser. Makin simple dan sedikit gambar dari template anda makin cepat halaman ditampilkan. Dan makin optimal code dari CMS yang digunakan makin cepat halaman dirender.

Saya gak punya banyak pengalaman di Joomla, pernah make tapi gak terlalu mendalami. Tapi untuk kasus Joomla paling kita bisa melakukan optimasi di sisi aplikasi yaitu

menggunakan tampilan yang simple dan tidak terlalu banyak gambar atau media lainnya.
tambahkan modul caching yang biasanya disediakan oleh CMS.
non aktifkan module-module CMS yang tidak digunakan

Selain itu pintar-pintar milih lokasi hosting, pastikan penyedia hosting memberikan quality of service yang baik.
Mat
April 16, 2008 at 2:37 pm

saya sudah mencubanya, sungguh laju sekali web saya di buka sekarang ini. terimakasih

Mat
http://www.mariklikdisini.com/blog
tyohan
April 17, 2008 at 8:08 am

Makasih,
syukur deh ada manfaat juga ke orang lain.
Raden Beletz
November 1, 2008 at 1:06 am

makasih tipsnya :d
salam kenal
radenbeletz
chamid
March 16, 2009 at 12:42 am

tips yang bagus. wajib dicoba nih
kampanye-damai pemilu indonesia 2009
March 17, 2009 at 4:28 pm

Thanks Tips nya, bermanfaat nih…
rusmadi
March 23, 2009 at 11:04 am

makasih infonya segera dicoba
Andri Yudatama
June 21, 2009 at 11:05 am

Mungkin bisa juga dengan melakukan kompresi javascript dan CSS menggunakan mod_deflate apabila server anda menggunakan apache

Detail bisa dilihat disini
http://andri.yudatama.com/2009/06/kompresi-dengan-mod_deflate/
skiptest
December 20, 2009 at 9:49 pm

thanks banget buat tutorialnya
ceceps
May 8, 2010 at 11:23 pm

Mas saya punya kesulitan untuk optimasi web berbasis ajax bagaimana optimasi yang paling ideal dengan spesifikasi situs web CMS (buatan sendiri), bandwidth 1GB, konfigurasi php untuk PDO di matikan oleh web hosting