Memperkecil Ukuran CSS pada Template

css 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/

Comments

  1. benar juga kita harus banyak mempelajari tentang css, salam sahabat saya suka artikelnya untuk menambah wawasan.

    ReplyDelete
  2. wach,makasih atas share ilmunya ka..
    bermanfaat banget nich...

    ReplyDelete
  3. bagus artikelnya... terus berkreasi

    http://cyberyaqin.blogspot.com/2011/01/update-player-we8-pc-2010-2011.html

    ReplyDelete
  4. waduh, masih belom mudeng ni.. ajarin ane dong suhu hehehe.. :p

    btw salam kenal, blonya dah ane follow tuh, follow back ya? :p

    ReplyDelete
  5. nice postingan sob....css aja saya masih kurang ngerti artinya opo.

    ReplyDelete
  6. thanks sob artikelnya mantabh....

    ReplyDelete
  7. Mantap sekali artikelnya, langsung menuju TKP

    ReplyDelete
  8. senang membaca blognya agan,,,,,kunjungan gan ya

    ReplyDelete
  9. hebat gan, makasi yaa, sungguh sangat membantu, mg manfaat

    ReplyDelete
  10. Thanks gan, ini dia nih yg saya cari, kunjungi juga situs referensi kami http://www.pengertianahli.com/, thanks...

    ReplyDelete

Post a Comment

Komentar