Tool Rekomendasi Untuk Minify CSS Dan Javascript

Tool Rekomendasi Untuk Minify CSS Dan Javascript

Bola Hero Gawai

Tool Rekomendasi Untuk Minify CSS Dan Javascript

Tool Rekomendasi Untuk Minify CSS Dan Javascript
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....

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

0 Comment

Add Comment

Komentar dengan link promo akan masuk spam.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×