Kecepatan loading sebuah blog atau website sangat dipengaruhi oleh besarnya file CSS (Cascading Style Sheets). Padahal kehadiran CSS dalam sebuah sebuah template blog atau website sangat dibutuhkan untuk mengatur tampilan sebuah blog atau website. Semakin banyak pengaturan tampilan sebuah blog akan semakin panjang file CSS yang dibutuhkan. Hal ini akan sangat mempengaruhi loading sebuah blog atau website.
Ada cara untuk mempercepat loading sebuah blog atau website yaitu dengan mengkompresi file CSS. Untuk mengkompresi sebuah file CSS bisa digunakan CSS Compressor yang banyak bertebaran di internet.
Ok, Kita mulai saja tutorial Cara Kompres CSS Untuk Percepat Loading Blog.
1. Seperti biasa, masuk ke akun blogspot Anda (Jangan lupa backup dulu template Anda).
2. Pilih Design -> Edit HTML
3. Copy semua file CSS yang ada di template Anda, CSS biasanya diwali dengan sebuah . (titik) dan tanda # (pagar).
4. Kita buka situs CSS Compressor.
5. Pastekan semua file css yang telah Anda lakukan di no. 3. Seterusnya pilih tombol Compress.
Hasil kompresi CSS seperti gambar dibawah ini. Coba perhatikan kotak warna kuning, hasil kompresi CSS blog ku ini bisa dikecilkan sebesar 34,2%.
6. Hapus file CSS yang ada di dalam template Anda, lalu Copy dan Paste hasil kompresi css ke dalam template Anda.
7. SAVE template Anda.
Contoh penggalan CSS sebelum dan sesudah kompressi:
Sebelum kompressi:
* {margin:0; padding:0;}
body {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
text-align: center;
color: $textColor;
background: $bodybgColor;
font-family: arial,verdana,helvetica,tahoma,Sans-serif;
font-size: 100%;
width: 100%;
}
#outer-wrapper {
margin: 0 auto; /* to make the template lay in the screen center */
padding: 0px 0px 0px 0px;
margin-top: 15px;
margin-bottom: 30px;
position: relative;
width: 100%;
text-align: center;
}
#blog-wrapper {
margin: 0 auto; /* to make the template lay in the screen center */
padding: 6px 8px 6px 6px;
margin-top: 15px;
margin-bottom: 10px;
text-align: center;
position: relative;
width: 940px;
background: $blogframeColor;
border: 1px solid $blogBorderColor;
}
Sesudah kompressi:Semoga loading blog atau website Anda semakin cepat.
body{text-align:center;color:$textColor;background:$bodybgColor;font-family:arial,verdana,helvetica,tahoma,Sans-serif;font-size:100%;width:100%;margin:0;padding:0}
#outer-wrapper{position:relative;width:100%;text-align:center;margin:15px auto 30px;padding:0}
#blog-wrapper{text-align:center;position:relative;width:940px;background:$blogframeColor;border:1px solid $blogBorderColor;margin:15px auto 10px;padding:6px 8px 6px 6px}