Mempercepat Loading Blog Dengan Teknik Kompress CSS

loading...

Blog sobat loadingnya berat, ingin mempercepat loading blogspot, pada posting ini akan saya share tentang cara mempercepat loading blog dengan teknik kompresi di CSS untuk pengguna blogger/blogspot, selain pengguna blogger/blogspot, mungkin akan sedikit beda, tetapi prinsipnya sama. 

Kemarin saya sudah posting  tentang Cara Membuat Navigasi Breadcum di Blogger, hal itu tujuannya untuk menguatkan blog kita dalam persaingan SERP Google dan Bing. :o

Apa itu CSS?
Menurut mbae wikipedia :

Cascading Style Sheet (CSS) merupakan salah satu bahasa pemrograman web untuk mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam.

Sama halnya styles dalam aplikasi pengolahan kata seperti Microsoft Word yang dapat mengatur beberapa style, misalnya heading, subbab, bodytext, footer, images, dan style lainnya untuk dapat digunakan bersama-sama dalam beberapa berkas (file). Pada umumnya CSS dipakai untuk memformat tampilan halaman web yang dibuat dengan bahasa HTML dan XHTML.

CSS dapat mengendalikan ukuran gambar, warna bagian tubuh pada teks, warna tabel, ukuran border, warna border, warna hyperlink, warna mouse over, spasi antar paragraf, spasi antar teks, margin kiri, kanan, atas, bawah, dan parameter lainnya.CSS adalah bahasa style sheet yang digunakan untuk mengatur tampilan dokumen.Dengan adanya CSS memungkinkan kita untuk menampilkan halaman yang sama dengan format yang berbeda.

Apa ada kaitannya CSS dengan SEO?
Menurut pengamatan para pakar seo, CSS dan SEO sangat berkaitan erat dan juga saling berhubungan. Misalnya robot google akan malas mengunjungi blog kita, gara - gara CSS nya yang amburadul, yang membuat loading blog kita jadi berat. Akibatnya beberapa postingan kita yang seharusnya masuk menjadi 10 besar google menjadi tersingkir dari persaingan SERP.

Dimana letak kode CSS blog kita?
Terletak dibagian Template blog kita. yaitu : 

Dasbor >> Rancangan >> edit HTML >> terletak di antara <b:skin> --sampai--> ]]></b:skin> 

Lalu Bagaimana cara Kompresi CSS blog nya?
Ada 2 Cara yang bis kita pakai, yaitu:

1. Cara Manual
Cara ini akan menyita banyak waktu, karena akan dilakukan secara manual dan satu persatu.
contoh:

#header-wrapper {
background: url(http://www.freeimagehosting.net/uploads/e439563253.jpg) no-repeat #000;
height: 150px;
margin-top: padding: 0px 0px 0px 0px;
text-align: center;
border: 1px solid #000;
}

setelah dikompres akan menjadi

#header-wrapper{background:url(http://www.freeimagehosting.net/
uploads/e439563253.jpg) no-repeat #000;height:150px;margin-top:padding:0px 0px 0px 0px;text-align:center;border:1px solid #000;}
{Margin-top: 15px;
Margin-right: 10px;
Margin-bottom: 15px;
Margin-left: 15px; }

menjadi

{Margin:15px 10px;} 

Sobat bisa mengecek dulu kecepatan loading blog sobat disini, lalu setelah selesai di kompress css nya, bandingkan dengan hasil sebelumnya.

2. Cara Instant/Otomatis
Cara ini terbilang lebih simple dan cepat, karena kita memanfaatkan tool gratis kompresi CSS secara online.

Caranya dengan memotong/meng copy kode CSS pada temlate sobat yaitu letaknya di antara  <b:skin> --sampai--> ]]></b:skin> , lalu memasukkan/paste kode CSS kedalam form yang disediakan, klik compress, jadi dech..... :d  

Lalu copy hasil compressan tadi, dan paste kembali di antara <b:skin> --sampai--> ]]></b:skin>  yang ada di template kita tadi. Simpan template  sobat. :x

Kita bisa mengunjungi situs dibawah ini :

http://www.cssoptimiser.com/
http://www.cssdrive.com/index.php/main/csscompressor
http://www.csscompressor.com/
http://www.csstidyonline.com/

Dan masih banyak lagi situs - situs yang menyediakan kompresi css untuk mempercepat loading blog kita, silakan cari/browsing di mbah google. :D 

Sekian dulu tentang cara mempercepat loading blog dengan teknik kompresi di CSS untuk pengguna blogger/blogspot.

Selamat mencoba, semoga bermanfaat.... ;)