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 background blog CB. Silakan copas jika mau menggunakannya:
background: rgba(209,209,209,1);
background: -moz-linear-gradient(top, rgba(209,209,209,1) 0%, rgba(254,254,254,1) 0%, rgba(226,226,226,1) 75%, rgba(219,219,219,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(209,209,209,1)), color-stop(0%, rgba(254,254,254,1)), color-stop(75%, rgba(226,226,226,1)), color-stop(100%, rgba(219,219,219,1)));
background: -webkit-linear-gradient(top, rgba(209,209,209,1) 0%, rgba(254,254,254,1) 0%, rgba(226,226,226,1) 75%, rgba(219,219,219,1) 100%);
background: -o-linear-gradient(top, rgba(209,209,209,1) 0%, rgba(254,254,254,1) 0%, rgba(226,226,226,1) 75%, rgba(219,219,219,1) 100%);
background: -ms-linear-gradient(top, rgba(209,209,209,1) 0%, rgba(254,254,254,1) 0%, rgba(226,226,226,1) 75%, rgba(219,219,219,1) 100%);
background: linear-gradient(to bottom, rgba(209,209,209,1) 0%, rgba(254,254,254,1) 0%, rgba(226,226,226,1) 75%, rgba(219,219,219,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d1d1d1', endColorstr='#dbdbdb', GradientType=0 );
background: -moz-linear-gradient(top, rgba(209,209,209,1) 0%, rgba(254,254,254,1) 0%, rgba(226,226,226,1) 75%, rgba(219,219,219,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(209,209,209,1)), color-stop(0%, rgba(254,254,254,1)), color-stop(75%, rgba(226,226,226,1)), color-stop(100%, rgba(219,219,219,1)));
background: -webkit-linear-gradient(top, rgba(209,209,209,1) 0%, rgba(254,254,254,1) 0%, rgba(226,226,226,1) 75%, rgba(219,219,219,1) 100%);
background: -o-linear-gradient(top, rgba(209,209,209,1) 0%, rgba(254,254,254,1) 0%, rgba(226,226,226,1) 75%, rgba(219,219,219,1) 100%);
background: -ms-linear-gradient(top, rgba(209,209,209,1) 0%, rgba(254,254,254,1) 0%, rgba(226,226,226,1) 75%, rgba(219,219,219,1) 100%);
background: linear-gradient(to bottom, rgba(209,209,209,1) 0%, rgba(254,254,254,1) 0%, rgba(226,226,226,1) 75%, rgba(219,219,219,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d1d1d1', endColorstr='#dbdbdb', GradientType=0 );
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).*
Demikian artikel tentang Jangan Gunakan Gambar untuk Background (Fast Loading Tips) ini dapat kami sampaikan, semoga artikel atau info tentang Jangan Gunakan Gambar untuk Background (Fast Loading Tips) ini, dapat bermanfaat. Jangan lupa dibagikan juga ya! Terima kasih banyak atas kunjungan nya.
