Pada kesempatan kali ini saya akan menjelaskan cara kompress file css. Perlu teman-teman ketahui sebelumnya, apabila teman-teman membuat website dengan ukuran file CSS yang cukup besar tentunya mempengaruhi loading website tersebut dan tentunya sangat membosankan pengunjung website teman-teman. Disamping itu, loading website yang disebabkan oleh besarnya file css tersebut dapat mempengaruhi peringkat website teman-teman di mata google, karena salah satu syarat untuk website yang masuk kategori friendly salah satunya adalah loading website yang cepat.

Maka tidak heran lagi, metode compressed dapat diterapkan di file css yang memiliki ukuran besar. Dan metode tersebut sudah tidak menjadi rahasia lagi dan sudah banyak di terapkan oleh banyak pengembang-pengembang website. tidak hanya itu, selain file css seperti file php, html dan javascript pun bisa di kompres atau diperkecil ukuran filenya tanpa mempengaruhi sedikitpun fungsi dari kode-kode selektor beserta property yang teman-teman buat. Mungkin teman-teman pernah melihat dan sempat bertanya-tanya, kenapa pada saat download Bootstrap ada beberapa file dengan nama bootstrap.css, bootstrap.min.css, bootstrap.js dan bootstrap.min.js.

Sebenarnya perbedaan dari file tersebut seperti halnya file bootstrap.css dan file bootstrap.min.css isinya adalah sama, hanya saja isi kode pada file bootstrap.min.css merupakan hasil kode dari file bootstrap.css yang sudah di kompress atau bisa dibilang dengan istilah minify dengan harapan file tersebut tidak mempengaruhi loading website karena file tersebut berukuran kecil dan sudah di kompress. Oleh sebab itu file tersebut dinamakan bootstrap.min.css.

Dan untuk mengkompres file css tersebut, tersedia beberapa tools yang dapat di akses melalui online, salah satu yang saya gunakan pada contoh penjelasan disini adalah CSS Minifier, berikut link nya www.cssminifier.com. Dengan tools tersebut yang perlu teman-teman lakukan hanya memasukan semua kode CSS yang teman-teman buat di Input CSS pada tools tersebut, kemudian selanjutnya teman-teman bisa langsung menekan tombol yang berwarna biru yang bertuliskan Minify, tunggu hingga proses minify tersebut selesai dan jika sudah, teman-teman bisa menekan tombol Slect All pada kotak Output Minified untuk di salin dan di terapkan pada kode css teman-teman.

Seperti pada contoh gambar di bawah ini :

cara kompress file css

Jika sudah teman-teman ganti kode file css yang original sebelumnya dengan kode hasil minify yang sebelumnya sudah teman-teman download. Sampai disini penjelasan saya mengenai cara kompress file css, semoga bermanfaat.