Selasa, 03 Maret 2015

Jangan Gunakan Gambar untuk Background (Fast Loading Tips)


By on 20.31



Fast Loading Tips
SALAH satu cara mempercepat loading time blog adalah dengan tidak menggunakan background (latar) blog dengan gambar, image, atau foto. Makin cepat & ringan tampilan blog, maka akan makin user friendly dan disukai mesin pencari.

Gambar latar belakang biasanya berulang secara horizontal atau vertikal. Sekitar 50% penyebab blog tampil lambat adalah karena image background, menurut MBT. GT Metrix juga suka memberikan catatan khusus soal gambar latar blog ini.

Maka, ganti saja background berupa gambar itu dengan kode warna atau kode CSS/HTML. Dijamin, loading time blog akan lebih cepat dari sebelumnya.

Kode CSS latar belakang blog biasanya seperti ini:
body { background: #7AA1C3 url(http://xyz.com/bg-image.jpg);

Intinya, diawali dengan tulisan body {background:

Cara Mengubah Background Blog

Untuk mengubah latar belakang blog dari gambar menjadi kode CSS/HTML sangat mudah.
1. Template > Edit HTML
2. Temukan (Ctrl+F) kode body {background:# ....}
3. Ganti dengan kode berikut seperti ini:

body {background:#000;}

Catatan:
- Di belakang kode warna biasanya ada kode lain, seperti color:#444 dsb. Jangan sampai kehapus!
- Kode #000 adalah warna hitam. Silakan pilih warna lain di Kode Warna HTML.

Menggunakan Color Gradient

Kita juga bisa menggunakan warna gradient atau gradasi untuk background blog. Blog CB ini juga sekarang menggunakan Color Gradient.

Gak perlu repot-repot membuat sendiri kode warna gradient untuk background, cukup:
1. Buka Gradient Generator.
2. Pilih warna
3. Copy kodenya
4. Paste di kode body { 

Ini kode warna gradient  backgriund blog CB. Silakan jika mau menggunakannya:

body {background: rgba(255,255,255,1);
background: -moz-linear-gradient(-45deg, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 38%, rgba(237,237,237,1) 100%);
background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(255,255,255,1)), color-stop(38%, rgba(246,246,246,1)), color-stop(100%, rgba(237,237,237,1)));
background: -webkit-linear-gradient(-45deg, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 38%, rgba(237,237,237,1) 100%);
background: -o-linear-gradient(-45deg, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 38%, rgba(237,237,237,1) 100%);
background: -ms-linear-gradient(-45deg, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 38%, rgba(237,237,237,1) 100%);
background: linear-gradient(135deg, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 38%, rgba(237,237,237,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed', GradientType=1 );

Loads time blog CB (Cek: 3 Maret 2015)

Loads time blog CB

Kenapa Harus Fast Loading?

Sering dibahas, kecepatan tampilan blog merupakan rekomendasi Google. Menurut Google, didukung survei, 75% pengunjung akan meninggalkan dan tidak akan membuka lagi blog yang tampil lambat, berat, lama, lemot, alis "lamberta".

Google rekomendasikan kecepatan blog di bawah 4 detik. Paling lambat 5-6 detik lah!
Banyak faktor yang memperlambat loads time blog, terutama gambar (image). Yang lainnya seperti flash, animasi, javascript, termasuk widget hit counter, statistik pengunjung, widget alexa rank, dll.

Tidak menggunakan latar belakang blog berupa gambar merupakan salah satu saja dari sekian cara mempercepat loading time blog. Good Luck! (http://contohblognih.blogspot.com).*


About The Blogger

"Belumkah datang waktunya bagi orang-orang yang beriman, untuk tunduk hati mereka mengingat Allah dan kepada kebenaran yang telah turun (kepada mereka), dan janganlah mereka seperti orang-orang yang sebelumnya telah diturunkan Al Kitab kepadanya, kemudian berlalulah masa yang panjang atas mereka lalu hati mereka menjadi keras. Dan kebanyakan di antara mereka adalah orang-orang yang fasik." (QS. Al Hadid 57 : 16)

1 komentar: