Ada masalah dengan loading blog saudara? jika ada mungkin
salah satu penyebabnya adalah CSS pada template blog saudara memiliki banyak
perintah yang tidak terlalu penting atau bahkan tidak berfungsi. Jika saudara
adalah blogger baru seperti saya ini, saudara mesti mencoba mengkompres CSS
template blog saudara agar loading blog semakin cepat.
Saudara harus melakukan kompres CSS pada template blog
saudara, karena ada blogger yang mengatakan HTML template yang selalu dikompres
akan lebih di senangi oleh SEO (Search Engine Optization). Kenapa bisa? Karena
mesin pencari mulai kini sudah memperhatikan kecepatan muat (loading) sebuah
blog untuk berada di posisi pertama mesin pencari google.
Lalu apa hubungnya antara CSS dengan muat time (loading)
sebuah blog? Yang paling sederhana, ukuran file CSS menentukan berapa banyak
bagian yang harus dibaca oleh browser. Semakin besar ukuran file CSS, tentu
saja bahasa perintahnya semakin banyak, . Dengan demikian waktu baca yang
dibutuhkan browser semakin panjang dan lama.
Kembali ke CSS. CSS (Cascarding Style Sheet) adalah seluruh
isi aturan stlye CSS yang ada di dalam template HTML, XML, maupun yang lainya.
Seluruh rangkuman tersebut kemudian di rangkum menjadi satu sebagai sebuah file
yang akan dibaca oleh browser. Nah pada bagian ini, banyak aturan yang tidak
perlu yang bisa kita hapus agar tidak mengambil space karena semakin banyak
space semakin besar ukuran file.
Lalu bagaimana mengurangi ukuran file CSS-nya. Mengurangi
file CSS sebenarnya bisa dilakukan dengan dua cara, yaitu mengkompres CSS
secara manual dan mengkompres CSS menggunakan layanan situs penyedia kompres
CSS. Jika sobat sudah siap untuk mengkompres CSS, kita mulai dengan cara yang
manual terlebih dahulu . . .
1. Kompres CSS Secara Manual
Untuk kode CSS biasanya ditunjukan/dimulai dengan tanda
bintang (*), Dot (.) , dan Pagar (#). Berikut adalah contoh CSS pada
header-wrapper.
#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;
}
Di atas adalah contoh penataan CSS secara standar,
dimaksudkan agar browser bisa membaca dengan baik dan urut. Namun pada saat
ini, semua browser telah memiliki kecepatan dan kemampuan baca yang tinggi,
sehingga penataan CSS seperti di atas tidak menjadi hal wajib. aturan
(penataan) di atas memiliki white space (Sisa Ruang) dan juga spasi. Sehingga
kita bisa melakukan kompres pada aturan CSS di atas. 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;}
Bukan itu saja CSS yang ada pada template blog saudara,
masih banyak lagi aturan CSS yang standar dan harus anda kompres agar file CSS
blog saudara ringan. Dan saran saya jangan ada aturan CSS yang ganda karena
selain menambah berat loading blog juga membuat CSS error. Jadi kalau ada CSS
yang sama hapus salah satu saja.
2. Mengkompres CSS Menggunakan Situs-Situs penyedia Tool
Kompres CSS
Nah, jika saudara tidak ingin pusing-pusing mengkompres CSS
secara manual, saudara bisa mencoba situs-situs penyedia kompres CSS secara
online. Namun pada tutorial saya kali ini saya akan menggunakan CSS Diver
Gallery sebagai situs penyedia kompres CSS-nya. Untuk caranya silahkan ikuti
langkah-langkah di bawah ini:
Buka akun blogger saudara
Masuk ke menu "template" blog saudara
Klik "Edit HTML"
Copy kode CSS template saudara yaitu antara kode
<b:skin> dan ]]></b:skin>
Kemudian buka CSS Driver Gallery
Pada menu optionnya sobat bisa menguubahnya sesuai selera
sobat. Namun untuk yang standar (umun) biasanya pengaturanya seperti berikut:
Pengaturan CSS Driver Gallery
Pada kolom yang kosong, pastekan kode CSS yang sudah sobat
copy
Klik "Compress-It!"
Setelah itu akan muncul kode CSS yang berhasil dikompres
Kembali ke template blog sobat, ganti kode antara
<b:skin> dan ]]></b:skin>dengan CSS yang sudah dikompres
Pratinjau terlebih dahulu untuk mencegah kesalahan template
Setelah dirasa berhasil, Klik Simpan template untuk
menyimpan perubahan.
Penting!!! Lakukan backup template terlebih dahulu untuk
mencegah terjadinya kerusakan pada template.
Selain CSS Driver Gallery, masih banyak lagi situs-situs
penyedia kompres CSS yang bersebaran di internet. Saudara bisa mencari
situs-situs penyedia kompres CSS lainya, sobat bisa melakukan googling dengan
keyword "css compression tools". Caranya pun masih tidak jauh berbeda
dengan cara di atas, hanya saja pengaturanya saja yang sedikit berbeda.
Jika loading blog saudara masih dirasa lelet, mungkin itu
karena faktor koneksi intenet di PC saudara. Atau bisa juga karena CSS template
saudara banyak yang error, error-nya CSS bisa jadi karena ada CSS yang ganda
(sama) dalam satu template blog. Untuk mengetahui CSS yang error, soabat bisa
mengeceknya dengan http:jigsa.w3.org/css-validator/. Untuk caranya silahakn
ikuti prosedur di bawah ini:
Silahkan buka situs CSS Validation Service.
Pada kolom "address", silahkan masukan alamat URL
blog saudara.
Klik "Check"
Setelah itu akan muncul kode CSS yan eror atau tidak
berfungsi.
Contoh CSS yang ERROR
Silahkan tinjau ulang kode-kode yang dimunculkan di template
blog saudara, atau kalau perlu dihapus saja . . .
Sebenarnya selain mengkompres CSS pada template blog, agar
loading blog ringan dan bertambah cepat elemen yang harus kita kompres adalah
Javascript dan HTML. Namun untuk yang dua ini, akan saya posting di artikel
saya mendatang.
Tidak ada komentar:
Posting Komentar