Memperkecil Ukuran CSS pada Template

Tidak dapat dipungkiri bahwa ukuran sebuah script baik itu CSS ataupun Javascript akan sangat berpengaruh kepada kecepatan loading sebuah blog atau website, hal ini sangat perlu diperhatikan terlebih bila anda memasukkan atau mengedit CSS pada template blog anda dengan sesuka hati (tanpa memperhatikan guna dan manfaat kode tersebut) padahal tidak menutup kemungkinan kode CSS atau javascript tersebut tidak digunakan sama sekali.

Oleh karena itu sebaiknya anda mengecilkan ukuran CSS pada template anda dengan cara mengedit kembali kode CSS pada template anda, sehingga didapatkan kode CSS yang lebih kecil ukurannya tapi sesuai dengan yang anda inginkan pada blog anda.

Ada beberapa hal yang perlu anda perhatikan serta anda pertimbangan mengenai cara penulisan CSS yang baik dan benar dan juga sekaligus dapat memperkecil ukuran CSS pada template, berikut uraiannya :

 

1. Gunakan shorthand untuk kode CSS yang berulang, misal :

margin-top : 10px; margin-right : 5 px; margin-bottom : 10px; margin-left : 5px;

sebenarnya kode di atas dapat dirubah menjadi lebih ringkas yakni menjadi :

margin : 10px 5px 10px 5px; // urutan Top –> Right –> Bottom –> Right

atau yang lebih simpel yakni :

margin : 10px 5px; //urutan Top Bottom –> Right Left

(Kode shorthand untuk CSS ini hanya sekedar contoh, untuk lebih lengkapnya menyusul pada postingan-postingan berikutnya)

 

2. Gunakan gaya penulisan kode/script yang bersambung tidak membuat garis baris baru untuk satu kode, contoh :

body {

color : red;

font-family : “times new roman” verdana “comic sans” arial;

border : 1px dashed #333;

}

lebih baik penulisannya sebagai berikut :

body {color:red; font-family: “times new roman” verdana “comic sans” arial; border: 1px dashed #333}

(ini dikarenakan bila anda membuat baris baru untuk tiap kode, sebenarnya terdapat whitespace pada kode tersebut, seperti halnya spasi – akan dihitung-)

 

3. Gunakan bagian-bagian dengan menggunakan komentar, contoh :

*/ HEADER BLOG */

{ …… kode CSS …… }

* ISI BLOG */

{ …… kode CSS ……. }

(hal ini digunakan untuk memudahkan anda ketika sulit mencari sebuah script, anda tinggal mencarinya lewat kotak pencarian pada browser yang anda gunakan untuk mengedit CSS tersebut.)

 

(halaman ini akan terus diupdate bila penulis mendapat cara yang lainnya)

 

4. Gunakan tools yang dapat memperkecil ukuran CSS kita, misal di http://www.cleancss.com/