Kompresi Javascript & CSS Untuk Mempercepat Loading Website

Masih ragu-ragu menggunakan jQuery, MooTools, prototype.js atau framework javascript lainnya karena ukurannya yang cukup besar? Atau file css anda cukup besar hingga puluhan bahkan ratusan KB? Cobalah trik di bawah ini untuk memperkecil ukuran file-file web.

Ukuran script jQuery (versi 1.3.2) adalah sekitar 118 KB (versi development / tidak dikompres), atau 56 KB (versi minified / dikompres). Dengan menambahkan lagi kompresi menggunakan gzip/deflate, script jQuery versi minified bisa diperkecil lagi menjadi hanya sekitar 19 KB. Sebuah penurunan ukuran yang cukup besar kan..

Ada beberapa teknik untuk mengompres, yaitu:

1. Menggunakan mod_deflate

Ini adalah cara paling mudah, karena kita tinggal menambahkan 1 buah file .htaccess, maka semua jenis file-file yang kita inginkan akan terkompres dengan otomatis. Tapi sayangnya tidak semua server hosting mengaktifkan mod_deflate.
mod_deflate adalah sebuah module pada web server Apache 2 (menggantikan mod_gzip pada Apache 1.3) yang digunakan untuk mengompres output dari server sebelum dikirimkan ke browser. Sebelum mencoba menggunakannya, cek dahulu apakah web server anda sudah mengaktifkan module ini. Jika sudah aktif, maka buatlah sebuah file .htaccess di dalam document root website anda, dan isikan code seperti ini.

<IfModule mod_deflate.c>
	AddOutputFilterByType DEFLATE application/javascript
	AddOutputFilterByType DEFLATE application/x-javascript
	AddOutputFilterByType DEFLATE text/css
</IfModule>

File .htaccess di atas akan secara otomatis mengompres semua file javascript dan css.

2. Menggunakan Google AJAX Libraries API

Cara ini juga cukup mudah, namun sayangnya hanya khusus untuk beberapa javascript library yang terkenal saja. Contoh meload jquery secara langsung dari server googleapis.com:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

Maka kita akan mendapatkan versi jquery 1.3.2 yang sudah dikompres dengan minify dan gzip. Lebih lengkapnya bisa dilihat di sini.

3. Menggunakan PHP

Cara ini cukup merepotkan, karena kita harus me-rename file-file *.js atau *.css menjadi file *.php.
Contohnya: apabila kita ingin mengompres file jquery.js, maka file tersebut kita rename dulu menjadi jquery.js.php, kemudian tambahkan script ini pada bagian paling atas:

1
2
3
4
5
6
7
8

<?php
ob_start('ob_gzhandler');
header('content-type: text/javascript; charset: UTF-8');
header('cache-control: must-revalidate');
$offset = 60 * 60 * 24 * 365 * 10; //cache selama 10 tahun
$expire = 'expires: ' . gmdate('D, d M Y H:i:s', time() + $offset) . ' GMT';
header($expire);
?>

Untuk file css scriptnya sama seperti di atas namun pada bagian content-type diganti menjadi text/css

Untuk mengecek apakah kompresinya berhasil, gunakan add-ons firefox seperti Web Developer Toolbar, atau bisa juga menggunakan YSlow. Pada Web Developer Toolbar, masuklah ke menu Information -> View Document Size. Sedangkan untuk YSlow ada di tab Components.

Di bawah ini adalah screenshot View Document Size pada sebuah halaman html yang di dalamnya memanggil beberapa file js dan css.

Dan yang ini screenshot untuk Yslow: