| 
Article in English Version
Well..
You have a great site but, when I tried to open I had to wait for 49 seconds and it is still counting, then I start feel boring and I click cross icon on top of my browser to close your blog. Once again I'm Googling and I get a fast loading blog, I subscribe it.
What a sad story. To speedy your blog, one of the ways you can compress the CSS code. I ever compress my blogger template from 23kb to 18kb (5kb aren't big enough), but like I mentioned earlier, if you have a 25kb CSS file, and you’re getting a lot of page-views and your visitors have slower connections, you and your visitors just might notice a difference.
Here are the tips, enjoy :
Reduce the number of Line Break
Mentioned or not, line break is a character and it do have size (I think 8 bytes are small) if you press line break a hundred times. Deleting line break will reduce the size of you CSS.
BIG MEMORY
#CSScode.example {
color:#FFFFFF;
font-size:14px;
text-align:center;
}
SMALL MEMORY
#CSScode.example {color:#FFFFFF;font-size:14px;text-align:center;}
Express the color as simple as possible
When you have simple color code (I mean where the 1st & 2nd, 3rd & 4th and 5th & 6th are identical) it can be expressed in 3 characters.
BIG MEMORYOr if you know the color name exactly, then you may call them by its name:
color:
#FFFFFF;
#000000;
#FF0000;
#113344;
SMALL MEMORY
#FFF;
#000;
#F00;
#134;
However, we won't able to change anything like this:
#C4C4C4, #1A2B3C, #940f13
#FFFFFF known as white, call it :
.CSS.example{color:white;)
#000000 known as black, call it :
.CSS.example{color:black;)
another choice : red, blue, yellow, grey, and so on
One line Background CSS code
Blog are boring without image (background are image too (sometime..)), but beware when you type background CSS code because sometime they have a lot of style on it.
You can simplify all your background attributes (background-position, background-repeat, etc.) into a single line in CSS.
BIG MEMORY
#CSS.example {
background-image:url("myBackground.jpg");
background-repeat:repeat-y;
background-position:top center;
}
SMALL MEMORY
#CSS.example {background:url("myBackground.jpg") top center repeat-y;}
One line Border CSS code
The basic are same as background code, you can simplify your border attributes (border-width, border-style, border-color) onto a single line in CSS.
BIG MEMORY
#CSS.example {
border-width:1px;
border-style:solid;
border-color:#FFFFFF;
}
SMALL MEMORY
#CSS.example {border: 1px solid white;}
One line Font CSS code
The basic are same as background and border code, you can simplify your font attributes (font-family, font-size, line-height) onto a single line in CSS.
BIG MEMORY
#CSS.example {
font-family: arial, sans-serif;
font-size:11px;
line-height:12px;
}
SMALL MEMORY
#CSS.example {font: 11px/12px arial,sans-serif;}
One line Padding and Margin
I think you agree to make it as simple as possible because I don't think you want coding the code manually.
BIG MEMORY
#CSS.example {
padding-left:0;
padding-right:0;
padding-top:10px;
padding-bottom:30px;
}
#CSS.example {
margin-left:0;
margin-right:0;
margin-top:10px;
margin-bottom:30px;
}
SMALL MEMORY
#CSS.example {padding: 10px 0 30px 0;}
#CSS.example {margin: 10px 0 30px 0;}
note, always remember that the first number means "top", second means "right", third means "bottom", the last number means "left"
Remove the last semicolon
Look at your template CSS, you will notice that every end of the code closed by semicolon (;). You can remove the last semicolon, just remember "the last"
BIG MEMORY
h2 {font-family:verdana;color:#333;}
SMALL MEMORY
h2 {font-family:verdana;color:#333}
Remove "PX" (pixels)
You can remove px when the amount is (only) specified as 0 (zero). Leave px when they have some amounts.
BIG MEMORY
h2 {padding:2px; margin:0px;}
SMALL MEMORY
h2 {padding:2px; margin:0}
Always use simple comment
Who says simple comment hard to read? Do not use a curly comment that can make your hair curly.
BIG MEMORY
/************************************/
/* Memory Wasting */
/************************************/
SMALL MEMORY
/* Memory Saving */
Group similar style
This happens easily after a long website development. We just declare the same styles over and over again without realising that something exactly the same is already exist. It's good to look back the CSS code and reanalyse it, so that similar styles can be grouped together.
BIG MEMORY
h1 {padding:5px 0; font-family:verdana; font-weight:700;}
#box1 .heading {padding:5px 0; font-family:verdana; font-weight:700;}
#box2 .heading {padding:5px 0; font-family:verdana; font-weight:700;}
SMALL MEMORY
h1, #box1 .heading, #box2 .heading {padding:5px 0; font-family:verdana; font-weight:700;}
Bonus Stage! - Use Free Compression Tools
Or, if you don't want to do all that manually, you can always use the following tools:CSS Optimizer
Style Neat
Clean CSS
Want learn more from the most standard CSS, learn from W3C CSS Validation
Hope the post can help! =] Happy blogging..
Article dalam Bahasa Indonesia
11 Tips Untuk Mengecilkan CSS
Ini adalah edisi Bilingual. heheTutorial di DindingCoret sekarang adalah cara-cara untuk mengecilkan file CSS yang ada di template sobat. Sobat memang punya website yang bagus, tapi aku akan berpikir lain jika loadingnya lama banged. Lebih baik cari yang lain dari pada nungguin 1 website super lola..
Aku pernah mengecilkan nilai CSS dari 23kb sampai 18kb (aku yakin kalau 5kb itu ngga besar) dan ternyata memang ada perbedaan di loadingnya.
Rasanya sayang jika pengunjung harus kabur karena tampilan blog yang lama. Nah untuk itu, kita kecilin yuk template blog sobat, supaya lebih user friendly!
Berikut adalah langkah-langkahnya :
Kurangi ENTER!
Disadari atau tidak, karakter line break ("Enter") mempunyai besar byte meskipun tidak besar (mungkin sekitar 8byte) dan kalau sobat melakukan "enter" ratusan kali pada CSS wah, makin gemuk donk! Menghapus "enter" pada CSS akan mengurangi besar file template.
BOROS MEMORI
#CSScode.example {
color:#FFFFFF;
font-size:14px;
text-align:center;
}
HEMAT MEMORI
#CSScode.example {color:#FFFFFF;font-size:14px;text-align:center;}
Menulis kode warna sesingkat mungkin
Kalau sobat menggunakan warna dengan kode yang simple (Maksudku jika kode ke-1 & ke-2, ke-3 & ke-4, dan ke-5 & ke-6 adalah sama) maka dapat dituliskan hanya dengan 3 huruf.
BOROS MEMORIAtau jika sobat tahu nama warnanya, bisa kog sobat panggil dengan nama warna itu :
color:
#FFFFFF;
#000000;
#FF0000;
#113344;
HEMAT MEMORI
#FFF;
#000;
#F00;
#134;
Bagaimanapun, sobat tidak dapat menyederhanakan kode seperti ini :
#C4C4C4, #1A2B3C, #940f13
#FFFFFF adalah kode warna putih, cara memanggilnya :
.CSS.example{color:white;)
#000000 adalah kode warna hitam, cara memanggilnya :
.CSS.example{color:black;)
pilihan lain : red, blue, yellow, grey, dsb.
Menyatukan kode CSS Background
Blog memang membosankan tanpa gambar (dan background juga gambara lho.. (kadang sih..)), tapi hati-hati dalam menuliskan kode blog kadang kita ngga sadar bahwa kode telah gemuk karena banyak variasi disana.
Sobat dapat menyederhanakan atribut background (background-position, background-repeat, etc.) kedalam 1 baris CSS.
BOROS MEMORI
#CSS.example {
background-image:url("myBackground.jpg");
background-repeat:repeat-y;
background-position:top center;
}
HEMAT MEMORI
#CSS.example {background:url("myBackground.jpg") top center repeat-y;}
Menyatukan kode CSS Border
intinya sama dengan background diatas, sobat dapat menyederhanakan atribut border (border-width, border-style, border-color) kedalam 1 baris CSS.
BOROS MEMORI
#CSS.example {
border-width:1px;
border-style:solid;
border-color:#FFFFFF;
}
HEMAT MEMORI
#CSS.example {border: 1px solid white;}
Menyatukan kode CSS Font
Intinya sama dengan background dan border diatas, sobat dapat menyederhanakan atribut font (font-family, font-size, line-height) kedalam 1 baris CSS.
BOROS MEMORI
#CSS.example {
font-family: arial, sans-serif;
font-size:11px;
line-height:12px;
}
HEMAT MEMORI
#CSS.example {font: 11px/12px arial,sans-serif;}
Sederhanakan baris pada Margin dan Padding
Aku pikir sobat setuju untuk membuatnya simple karena aku yakin sobat juga malas untuk mengetiknya secara manual. hehehe...
BOROS MEMORI
#CSS.example {
padding-left:0;
padding-right:0;
padding-top:10px;
padding-bottom:30px;
}
#CSS.example {
margin-left:0;
margin-right:0;
margin-top:10px;
margin-bottom:30px;
}
HEMAT MEMORI
#CSS.example {padding: 10px 0 30px 0;}
#CSS.example {margin: 10px 0 30px 0;}
catatan, selalu ingat bahwa angka pertama berarti "atas", kedua berarti "kanan", ketiga berarti "bawah", dan yang terakhir berarti "kiri"
Hilangkan Semicolon terakhir
Lihat CSS sobat, sobat pasti mnyadari bahwa setiap akhir dari kode pasti ditutup dengan semicolon (;). Sobat dapat menghilangkan semicolon yang terakhir, ingat hanya yang "terakhir"!
BOROS MEMORI
h2 {font-family:verdana;color:#333;}
HEMAT MEMORI
h2 {font-family:verdana;color:#333}
Hilangkan "PX" (pixels)
Sobat dapat menghilangkan px jika angkanya adalah 0 (nol). Jangan hapus px jika angkanya lebih dari 0.
BOROS MEMORI
h2 {padding:2px; margin:0px;}
HEMAT MEMORI
h2 {padding:2px; margin:0}
Selalu gunakan komentar yang simple
Siapa bilang dengan komentar yang simple jadi tidak bisa kebaca komentarnya? Jangan gunakan komentar yang bisa membuat CSS sobat jadi keriting.
BOROS MEMORI
/************************************/
/* Buang-buang Memori */
/************************************/
HEMAT MEMORI
/* ini baru hemat.. */
Menyatukan bentuk CSS yang sama
Ini mudah terjadi saat terjadi pembuatan website yang panjang. Kadang kita melakukan deklarasi terus menerus padahal bentuknya sama dengan sebelumnya.
Sebuah saran yang bagus adalah dengan melihat kembali bagaimana struktur kode pada website, dan menyatukan deklarasi yang ada jadi satu.
BOROS MEMORI
h1 {padding:5px 0; font-family:verdana; font-weight:700;}
#box1 .heading {padding:5px 0; font-family:verdana; font-weight:700;}
#box2 .heading {padding:5px 0; font-family:verdana; font-weight:700;}
HEMAT MEMORI
h1, #box1 .heading, #box2 .heading {padding:5px 0; font-family:verdana; font-weight:700;}
Bonus! - Gunakan Tools Online Gratis
Atau, jika sobat malas untuk melakukannya secara manual sobat bisa gunakan tool-tool gratis yang ada diinternet :CSS Optimizer
Style Neat
Clean CSS
Mau belajar dari sang ahli, belajar dari W3C CSS Validation
Yah, semoga tutorial ini dapat membantu untuk meningkatkan jumlah pengunjung pada blog sobat! Happy blogging!
