Tool Rekomendasi Untuk Minify CSS Dan Javascript

Ditulis oleh: Adhy Suryadi

Ditulis pada: 9/09/2015

Kompres atau minify secara sederhana dapat diartikan sebagai penghapusan karakter yang tidak diperlukan dari sebuah sumber kode dengan tanpa mengubah fungsinya. Karakter yang tidak diperlukan dari sebuah sumber kode seperti CSS atau javascript ini seperti jarak putih antar kode, baris baru, serta komentar.

Karakter-karakter tersebut dapat menambah ukuran file kode tersebut sedangkan keberadaannya tidak diperlukan ketika kode tersebut dieksekusi. Untuk itu karakter-karakter tersebut sebaiknya dihapus. Dengan menghapus karakter yang tidak diperlukan, dapat mengecilkan ukuran file kode yang selanjutnya dapat memangkas waktu loading sebuah website.

Karena itulah alasannya kenapa kode CSS maupun javascript lebih baik dikompres atau di-minify.

Lalu pada postingan kali ini saya akan menunjukan sebuah tool yang saya rekomendasikan untuk digunakan untuk minify css maupun javascript.

Adalah refresh-sf.com, sebuah tool online untuk minify css ataupun javascript yang selama ini saya gunakan untuk mengoptimalkan kecepatan loading Kompi Ajaib.

Tool ini sangat mudah digunakan dan hasilnya cukup memuaskan dengan tampilan yang sederhana dan mudah dimengerti. Selain menghapus karakter-karakter yang tidak diperlukan dari sebuah kode, tool ini juga akan mengelompokan beberapa tag yang memiliki kode yang sama sehingga tidak ada pengulangan penulisan CSS (karena pada beberapa tool minify css lainnya hanya menghapus karakter tidak diperlukan saja).

Sebagai contoh, ada kode css seperti di bawah ini yang memiliki beberapa kode yang sama:

.div1{background:#00CC33; margin:0 auto; padding:0; border:1px solid #006699}

.div2{margin:0 auto; padding:10px; border:2px solid #3366CC}

.div3{background:#00CC33;}

Maka ketika kita kompres atau minify, akan tampak menjadi seperti di bawah ini.

.div1,.div2{margin:0 auto}.div1,.div3{background:#0C3}.div1{padding:0;border:1px solid #069}.div2{padding:10px;border:2px solid #36C}

Atau seperti di bawah ini dengan mempertahankan baris baru agar mudah untuk mengeditnya di kemudian hari.

.div1,.div2{margin:0 auto}

.div1,.div3{background:#0C3}

.div1{padding:0;border:1px solid #069}

.div2{padding:10px;border:2px solid #36C}

Dari kode di atas terlihat pengelompokan tag yang memiliki kode css yang sama sehingga kompresi menjadi lebih baik karena tidak ada pengulangan penulisan kode css yang sama.

Nah, hal ini akan berguna untuk mengkompres kode CSS blog agar kode CSS menjadi semakin ramping sehingga size blog bisa dioptimalkan untuk mendapat loading blog yang semakin ringan.

Silahkan copy kode CSS template tanpa menyertakan kode <style></style> atau <b:skin><![CDATA[ ]]></b:skin>

Jika ingin mempertahankan baris baru agar memudahkan dalam mengedit CSS selanjutnya silahkan centang keepBreaks pada menu Clean-CSS.

Untuk mencoba menggunakan refresh-sf.com silahkan akses link berikut: http://refresh-sf.com/

Semoga bermanfaat....