March 3, 2015

Jangan Gunakan Gambar untuk Background (Fast Loading Tips)

March 3, 2015

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  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 );

Loads time blog CB (Cek: 9 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).*

Previous
« Prev Post
Author Image

CB Blogger

Recommended Posts

Related Posts

Show comments
Hide comments

9 comments on Jangan Gunakan Gambar untuk Background (Fast Loading Tips)

  1. bikin kotak yang ada tulisan "banyak faktor yang menperlambat loads.... dsb..

    itu gmn gan ? :D

    ReplyDelete
    Replies
    1. select all > klik tanpa petik dua (quoted)

      Delete
  2. agan cb, saya memakai Template NJW V3 dan berencana untuk pindah ke NJW V4. nah pertanyaan saya. bagaimana cara membuat post di homepage menjadi dua?

    Mohon Bantuannya.. Terimakasih :D

    ReplyDelete
    Replies
    1. Pake aja NJW V2... sama saja kok

      Delete
    2. ok gan,, saya udh paje NJW V2, maaf saya tanya lagi, cara ngubah Font di Navigator agar sama kayak CB gimana ya?

      Delete
    3. ngapain niru-niru aja? gunakan huruf "Marcellus SC", pake kode dari google font

      Delete
    4. CB ini gak ngerti-ngerti. Itu maksudnya dia ngefans sama CB. Lagian, saya juga pernah kok niru-niru CB versi NJW v2 dulu huehehe.

      Berkat meniru-niru itu, saya jadi paham bagaimana setting lebih lanjut soal template blogger. Secara gak langsung CB sudah membantu saya.

      #GGMU #eh.

      Delete
  3. memang bener ni gan artikelnya kalo lebih fast akan lebih baik juga untuk pengunjung.

    ReplyDelete
  4. yg dibuat navigasi d icon icon itu bgaimana

    ReplyDelete

Contact Form

Name

Email *

Message *