Optimasi loading web dengan combine+minify file css dan js (codeigniter)

Optimasi loading web dengan combine+minify file css dan js (codeigniter) - Hallo, guten tag! :) , pada pembahasan sebelumnya saya telah membahas bagaimana cara optimasi load image, nah pada pembahasan kali ini saya akan membahas bagaimana cara optimasi loading web dengan cara menggabungkan + meminimalkan file css dan js kita. Jadi cara ini akan menggabungkan semua file css anda menjadi satu file css dan file js menjadi satu file, lalu habis file css di gabung barulah file css dan js itu di minimalkan sehingga file akan menjadi sangat kecil dan web akan sangat cepat pada saat akan meload style dan js-nya.

Cara ini aku dapat dari teman facebook ku, om Tirta Keniten :) , waktu itu dia nyaranin 1 library php bernama minify. Library ini mempunyai kemampuan menggabungkan+meminimalkan file css dan js.

Kelebihan dari library ini seperti yang sudah di jelaskan sebelumnya, yaitu dapat mempercepat load web anda dengan cara menggabungkan+meminimalkan file css dan js anda.

Berikut andalah screen shot file yang sudah di combine+minify :

Styles.min.css merupakan hasil dari gabungan semua file css yang ada di folder css dan script.min.js merupakan hasil dari gabungan semua file yang ada di folder js. Pada gambar di atas saya menggabungkan 2 file css dan 2 file js. Berikut adalah gambar file js dan css sebelum di combine+minify.

Mungkin tanpa banyak basabasi mari kita lanjut ke praktiknya saja. Pada pembahasan kali ini saya akan menerapkan library minify ini pada codeigniter.

Spesifikasi sourcecode yang ku pakai :

• Codeigniter 3.0.3
• Library Minify (download versi untuk codeingiter disini) by, slawomir jasinski 

Pada library yang di buat oleh om slawomir sudah terdapat libralies + contoh penggunaannya, anda tinggal lihat-lihat saja.

Sedikit penjelasan, abaikan file controllernya. Anda lihat file view bagian kode :

<?php
 $this->minify->css(array('browser-specific.css', 'style.css'));
 echo $this->minify->deploy_css();
 $this->minify->js(array('helpers.js', 'jqModal.js'));
 echo $this->minify->deploy_js(FALSE, 'custom_js_name.min.js');
?>

Library akan membaca file css pada direktori assets/css, dan akan membaca file js pada assets/js. jadi jika pada saat anda menggunakan library ini direktori asset anda harus seperti ini :

Semua js di letakan di assets/js dan semua file css di letakan di assets/css.

Default-nya nama output yang di hasilkan dari library ini adalah script.min.js atau script.min.css. Tetapi anda juga dapat memodifikasi nama file output yang nanti akan di hasilkan dengan cara :

//untuk css
echo $this->minify->deploy_css(FALSE, 'custom_css_name.min.js');

//untuk js
echo $this->minify->deploy_js(FALSE, 'custom_js_name.min.js');
?>

Mudahkan :) , jika bingung komen saja yah :)
Mungkin saya cukupkan sekian untuk pembahasan kali ini, danke :)