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/

Share this

Related Posts

Previous
Next Post »

11 comments

comments
January 8, 2011 at 3:25 PM delete

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

Reply
avatar
January 11, 2011 at 7:23 AM delete

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

Reply
avatar
January 11, 2011 at 2:42 PM delete

bagus artikelnya... terus berkreasi

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

Reply
avatar
July 31, 2011 at 2:43 AM delete

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

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

Reply
avatar
February 17, 2012 at 3:27 PM delete

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

Reply
avatar
June 6, 2012 at 4:26 PM delete

thanks sob artikelnya mantabh....

Reply
avatar
August 10, 2012 at 8:51 PM delete

Mantap sekali artikelnya, langsung menuju TKP

Reply
avatar
August 15, 2012 at 2:45 PM delete

senang membaca blognya agan,,,,,kunjungan gan ya

Reply
avatar
January 17, 2014 at 11:31 PM delete

hebat gan, makasi yaa, sungguh sangat membantu, mg manfaat

Reply
avatar
May 25, 2014 at 6:36 PM delete

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

Reply
avatar

Komentar