Bermacam cara untuk mengurangi berat loading blog. salah satunya dengan CSS Compressor. Kehadirannya CSS Compressor sangat lah membantu para blogger. salah satunya saya. sebelum nya web saya ini loading nya terlalu lama. ada teman blogger yang bilang web kamu jay di tinggal ke toilet trus kembali lagi belum juga ke buka-buka. wkwkwkwk tapi sekarang alhamdulillah dengan CSS Compressor telah membantu saya keluar dari masalah itu. Nah pasti anda mengalami juga hal sebiginikan. untuk mengatasinya anda bisa mencoba jasa CSS Compressor ini.
Cara mengkompress CSS ada 2 (dua) cara yaitu
Langkah pertama dengan cara Manual:
Saya ambil sepenggal kode CSS pada blog saya:
a {
color: #ffffff;
font-size: 12px;
text-decoration: none;
text-transform:title case;
padding: 0px 0px 0px 3px;
}
a:visited {
color: #ffffff;
font-size: 12px;
text-decoration: none;
text-transform:title case;
padding: 0px 0px 0px 3px;
}
a:hover {
color: #ffffff;
text-decoration: none;
padding: 0px 0px 0px 3px;
}
Setelah di amati, maka dari contoh css diatas ada dua bagian CSS yang sama. Bagian itu adalah properti CSS untuk fungsi a dan fungsi a:visited. Nah kedua properti tersebut dapat disederhanakan dengan menggabungkan nya dengan memberi tanda koma(,). perhatikan kode warna dalam hexa color code #ffffff.ini bisa di sederhankan menjadi seperti ini #fff. sehingga secara keseluruhan kode CSS tersebut bisa menjadi seperti di bawah ini:color: #ffffff;
font-size: 12px;
text-decoration: none;
text-transform:title case;
padding: 0px 0px 0px 3px;
}
a:visited {
color: #ffffff;
font-size: 12px;
text-decoration: none;
text-transform:title case;
padding: 0px 0px 0px 3px;
}
a:hover {
color: #ffffff;
text-decoration: none;
padding: 0px 0px 0px 3px;
}
a,a:visited{
color:#fff;font-size:12px;
text-decoration:none;
text-transform:title case;
padding:0 0 0 3px
}
a:hover{
color:#fff;
text-decoration:none;
padding:0 0 0 3px
}
color:#fff;font-size:12px;
text-decoration:none;
text-transform:title case;
padding:0 0 0 3px
}
a:hover{
color:#fff;
text-decoration:none;
padding:0 0 0 3px
}
Setelah kode CSS tersebut di kompres, terlihat ada pengurangan spasi di antara kode a,a:visited. berarti kesimpulannya bahwa spasi juga berpengaruh besar terhadap kecepatan loading blog. maka kode diatas masih dapat disederhanakan lagi menjadi
a:hover{color:#fff;text-decoration:none;padding:0 0 0 3px}
a,a:visited{color:#fff;font-size:12px;text-decoration:none;text-transform:title case;padding:0 0 0 3px}
a,a:visited{color:#fff;font-size:12px;text-decoration:none;text-transform:title case;padding:0 0 0 3px}
Lankgah Kedua menggunakan CSS Compressor:
Cara di atas adalah cara menual yang bisa anda lakukan untuk mengkompres kode CSS. Namun akan memakan waktu yang lama. namun ada cara yang praktis untuk mengkompres CSS anda dengan menggunakan jasa Tool CSS Compressor. Namun sebaiknya anda harus download terlebih dahulu tamplate blog anda supaya tidak terjadi hal-hal yang tidak diinginkan.
Berikut langkah-langkah cara kompres CSS dengan CSS Compressor:
- Kunjungi http://www.csscompressor.com/
- Berikutnya pada compression mode pilih mode kompresi yang anda inginkan.
- Kemudian copy lalu paste kode css yang anda kompres ke css input.
- Kemudian klik Tombol Compress.
- Di kolom bawah akan ada hasil kompresi. sekarang klik tombol select all kemudian copy paste ke tamplate anda pada CSS yang di kompres tadi.
- Selesai...
Selamat mencoba..........
Tidak ada komentar:
Posting Komentar